应用布局优化根据华为折叠屏屏幕比例,通过UI自适应引擎,提供应用重布局能力,优化该应用在当前设备上的显示效果,从而增加页面空间的利用率,提升用户的视觉体验。
1.适用场景介绍
1)控件自适应:应用布局优化提供一套具备响应式能力的控件,帮助开发者对Android页面的局部区域进行快速的适配:HwRspGridView、HwRspLinearLayout、HwRspListView、HwRspRecyclerView、HwRspViewPager。
2)整体自适应:应用布局优化提供Android整体/页面级别的统一重布局能力,手机的UI系统会在运行时分析用户的界面,将原本大图大字体的页面调整为正常的尺寸,同时识别不同类型的元素并进行智能重排版,尽可能优化用户界面。
3)Web页面:应用布局优化对以下Web结构提供自适应排版的能力,满足不同页面设计的需求。
单行元素(包含轮播图等特殊类型):整体缩放
列表元素:元素缩放,自动换行并左对齐
瀑布流:元素缩放,位置按照瀑布流自动排列
大图元素:整体缩放并添加背景
大弹窗、大字体、通栏:整体缩放
2.控件自适应
2.1使用方法
以控件维度接入,实现局部区域自适应,适配灵活。可直接使用华为响应式控件,或者修改控件继承关系。以下是开发控件总览和控件在设备上最小SDK版本要求:
2.2代码集成示例
步骤一:Maven方式引入aar包
使用前需在build.gradle的dependencies中添加所引用控件的依赖。implementation"com.huawei.ui.rspuikit:hwrsplistview-androidn:{version}"
步骤二(方式1):XML集成方式
XML配置示例:原listview调整为响应式控件(原代码不需要修改)。
步骤二(方式2):代码集成方式
①导入控件包。
importcom.huawei.rspuikit.hwrspgridview.widget.HwRspGridView
②创建自定义控件类,调整原控件继承关系。
③代码代码使用示例如下。
3.整体自适应
3.1使用方法
以页面维度,自动调整内容布局大小和位置,简单方便。
3.2接入方式
修改AndroidManifest文件:在“AndroidManifest.xml”文件的“application”中新增“meta-data”:
新增easygo.json配置文件:在工程中assets目录新增easygo.json文件,json文件中配置适配策略、activity名称等信息。目录结构为:
若应用已经有该文件,只需要在“logicEntities”字段新增内容。
"easygo.json"文件模板以及字段详细说明:
二、H5页面开发指南
1.折叠机Web页面常见问题
在移动端,我们web的开发,通常会使用rem/vw等动态尺寸做响应式设计。使用这种方式,在我们常见的直板机上问题不大。但是,如果在折叠机上,就会出现各种各样的问题。最典型的就是信息密度大幅下降的问题。
假设网页是基于300像素的设计稿开发的,那在325像素的手机上,能够显示的内容是设计稿的92%,400像素的手机上则是75%,而在折叠机上则变成了42%。首先是内容明显地变少了,其次是由于内容整体放大了,对于手机这种手持设备,视距很近,用户的感受会非常不好。
这里有两个例子,能看到折叠机上的内容相对窄屏,虽然屏幕变大,但是内容却变少了。
2.折叠机Web适配推荐方法
那么要怎么解决这个问题?简单来说,我们期望对不同的布局,折叠机上能够有自适应的能力,不是简简单单地放大。比如对于横向有新内容的元素,我们推荐用延伸布局的方式,在宽屏时,将隐藏在屏幕外的内容展示出来。对于纵向的重复元素,我们推荐将重复元素左右摆放,一页展示更多的内容。对于横向没有新内容元素,直接将容器拉长,元素的内容尺寸不变。
对于延伸布局,需要做两个事情:
第一,对于横向的重复元素,固定住元素本身的尺寸。
第二,对于元素的容器,将高度进行固定,宽度设置成动态尺寸即可。
对于重复布局,也只需要做两个事情:
首先,我们无需对原样式进行任何改动,仅需要添加一个媒体查询的样式。在宽屏时,重复元素的尺寸相对原样式减半,同时,设置重复元素为inline属性,让元素能够自动补空。
3.折叠机UX适配插件
为了降低开发者的适配成本,为开发者开发了一个折叠机适配插件,希望能够帮助到大家。对于常见的布局进行了总结归纳,设计一个自适应插件,可自动识别常见的布局,并对网页进行重新排版。下图是使用插件重排后的效果。
如何使用插件呢?重排插件的使用方式很简单,它有两种模式,一种是自动重排模式,一种是手动重排模式。自动模式的情况下,仅需要集成插件,插件能够自动地识别布局并重排。手动模式的情况下,可以由开发者来指定元素的布局模式,插件会根据开发者输入的布局信息,对布局进行样式的改造,使其能够自适应折叠屏。
大家可以从下面的地址获取到插件:
三、多窗开发指南
1.多窗口介绍
Android7.0加入多窗口特性,分为分屏、悬浮窗、画中画:
分屏模式会以左右并排或上下并排的方式分屏显示两个应用。用户可以拖动两个应用之间的分隔线,放大其中一个应用,同时缩小另一个应用。
悬浮窗(自由窗口)模式下,窗口可以浮动显示,用户可以自由调整应用窗口的大小。
画中画模式可让用户在与另一个应用互动的同时继续播放视频。
华为EMUI10开始对多窗口特性深度优化,并持续演进,除了常见的使用方式外,还支持应用内元素一步打开悬浮窗、全屏应用手势操作一步悬浮窗、一步分屏,具有较好的易用性和用户体验。
悬浮窗的打开方式:
(1)通过一步小窗的手势操作快速让应用从全屏到悬浮窗
(2)智慧多窗应用栏触发:从屏幕边缘向内滑并悬停,拖出应用栏,点击应用图标,打开应用悬浮窗。
(3)横幅通知触发:沉浸式场景来通知,点击通知,悬浮窗展示。
分屏的打开方式:
(1)通过一步分屏的手势,可快速将全屏应用变成分屏。
(2)通过智慧分屏侧边栏触发。长按侧边栏的应用图标并拖出,和前台应用形成分屏组合。
2.如何适配多窗口
如何调试:通过开启以下设置项:“开发者选项>强制将活动设为可调整大小”,然后重启手机,之后系统就会强制应用可进入多窗口模式,以方便开发者测试和验证。
(2)多窗口适配建议
①识别多窗口状态
调用该方法以确认Activity是否处于多窗口模式
isInMultiWindowMode()
当Activity进入或退出多窗口模式时,系统将回调此方法
onMultiWindowModeChanged()
②正确处理Configuration变化
建议在android:configChanges配置中增加如下配置,避免窗口大小变化时Activity发生relaunch:
③正确使用应用资源
推荐使用Activity作为Context上下文加载合适的资源及做布局运算。如果使用的是ApplicationContext,加载的资源无法感知到多窗口。
使用activity上下文从display中获取窗口大小:
activity.getWindowManager().getDefaultDisplay().getMetrics(dm)
activity.getWindowManager().getDefaultDisplay().getSize(point)
R版本之后可使用:
activity.getWindowManager().getCurrentWindowMetrics()
使用activity上下文从display中获取屏幕真实大小(获取屏幕大小也要尽量使用activity上下文,非activity上下文在多屏场景无法正确取到页面所在对应屏幕信息):
activity.getWindowManager().getDefaultDisplay().getRealMetrics(dm)
activity.getWindowManager().getDefaultDisplay().getRealSize(point)
activity.getWindowManager().getMaximumWindowMetrics()
不要保存屏幕或窗口尺寸信息,使用时获取在进程级变量中保存的布局信息,会导致屏幕/窗口大小变化后,布局位置计算错位,出现重叠、截断等问题。
④正确获取View的控件位置
多窗口情况下View.getLocationOnScreen和View.getLocationInWindow接口含义不同,前者拿到的控件在屏幕上的位置(相对屏幕左上角起点),后者是控件在窗口内部的位置(相对于窗口左上角起点)
⑤使用自适应布局
由于多窗口情况下,窗口尺寸会变化,最佳的用户体验,需要实现响应式布局,不同的尺寸下展示不同的布局。尽量根据应用的窗口尺寸大小进行动态布局,不要使用绝对布局。
使用自适应布局,建议将ConstraintLayout用作界面中的基本布局,根据布局中视图之间的空间关系指定每个视图的位置和大小。当屏幕尺寸改变时,所有视图都可以随之移动和调整大小。
⑥尽量使用可滑动的页面/控件
⑦尽可能使用相对位置
分屏时,屏幕的高度和宽度会发生变化,开发者在设计控件布局时,尽量使用相对位置,以避免窗口大小改变时,出现截断或者重叠等问题。
四、平行视界开发指南
1.功能介绍
基于Activity拆分任务窗口,应用只需要很少的配置工作,就能在折叠屏等大屏设备上达到良好的体验。
2.平行视界接入方法
3.接入指导
3.1我们提供两种窗口显示模式:
1)平行视界购物模式(0)
特点是右分屏永远是最后一个窗口。任何时候,从左分屏打开的新页面,都会将右分屏的页面替换掉;从右分屏打开新页面,原右分屏页面向左移,新页面在右分屏打开。任何时候,从左分屏触发Back,左右分屏中的所有应用页面都将退出。
2)自定义模式(1)
应用采用配置“应用页面对”的方式标识业务在特定状态下需要分屏展示。如“A->B”,A上启动B,触发分屏(A左B右)。但B启动A,不启动分屏。一旦进入分屏后,如当前屏幕显示为“A|B”。
a)若配置了B->C,则B触发C,B左移,C右侧显示。
b)若没有配置C,则无论左右触发,都右侧显示。
3.2默认启动页和窗口显示比例
默认启动页是指应用从桌面启动时默认进入应用之后是左右双窗口显示模式。左边显示H页面,右边是A0页。
3.3窗口锁定
通过锁定功能,可以取消左右窗口的联动,左右启动保持独立。
3.4拖动到全屏和默认全屏
3.5拖出到悬浮窗
拖出到悬浮窗,使同一个应用可以同时存在多个任务。
以上就是折叠屏UX设计及开发指南解读(下篇)的全部内容。