折叠屏UX设计及开发指南解读(下篇)联盟动态技术文章

应用布局优化根据华为折叠屏屏幕比例,通过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设计及开发指南解读(下篇)的全部内容。

THE END
1.怎么取消重排窗口怎么取消重排窗口点击那个小方框就行,或者关闭打开。https://www.wps.cn/learning/room/d/247539
2.怎么取消重排窗口理想股票技术论坛想要了解如何取消重排窗口?本文提供了简单易懂的窗口重排取消方法,帮助您轻松解决重排窗口带来的困扰。快来了解取消窗口整理的技巧吧! ,理想股票技术论坛https://www.55188.com/tag-2183196.html
3.中国共产党威海市委员会组织部经验交流PPT演示文稿的基本操作...默认情况下,PowerPoint采用的是全屏模式播放。不过,还可以采用窗口模式或使用小屏幕模式来播放。如果想采用窗口播放模式,只要按下Alt键,然后单击演示文稿窗口左下角的"幻灯片播放"按钮即可。 24.采用小屏幕模式播放 如果想采用小屏幕播放模式来播放幻灯片,可按下Ctrl键不松开,再单击演示文稿窗口左下角的"幻灯片放映"...http://www.whzzb.gov.cn/art/2014/7/15/art_34385_941618.html
1.Word怎么关掉重排窗口微笑温暖如花: 1、首先打开多个Word2010文档页面,在其中一个文档窗口中单击“视图”选项卡。2、接着在“窗口”中单击“全部重排”命令。3、这时可以看到所有窗口将自动缩小,全部横排显示在屏幕上。 赵玉乔邀请你来回答 赞 回复 (1) Word2003重排窗口如何取消? 共2条回答 > 锦绣未央: 你把需要还原的窗口...https://www.3d66.com/answers_relation/relation_416764.html
2.关闭iPad上的分屏或浮动App了解如何使用“分屏浏览”多任务处理模式来同时使用两个 App。 在Safari 浏览器中合并标签页和窗口 如果在“分屏浏览”模式下打开了两个 Safari 浏览器窗口,你可以将这两个窗口中的所有标签页合并到一个窗口。按住窗口按钮 ,然后轻点“合并所有窗口”。 https://support.apple.com/zh-cn/102364
3.Win11拖动窗口时弹出分屏框怎么办?Win11关闭窗口分屏的方法窗口分屏功能,可以让用户轻松地将应用程序拖动到不同的区域,调整大小并进行重新排列。同时,还可以通过拖动窗口边缘来调整窗口的大小, 立即下载 Win11拖动窗口时弹出分屏框怎么办?窗口分屏功能,可以让用户轻松地将应用程序拖动到不同的区域,调整大小并进行重新排列。同时,还可以通过拖动窗口边缘来调整窗口的大小,并利用...http://www.101bt.net/6s24388p0.html
4.自学WPS表格4:窗口视图单击“视图”选项卡上的【新建窗口】按钮,可以为当前工作簿新建一个窗口。同时各窗口会自动重命名。 二、重排窗口: 打开多个窗口时,想要以不同的方式显示,可以点击“视图”选项卡上的【重排窗口】按钮,在下拉菜单中选择“水平平铺”、“垂直平铺”、“层叠”等窗口排列方式。 https://www.360doc.cn/article/16123909_1024726724.html
5.2023Web前端开发八股文&面试题(万字系列)——这篇就够了!跨窗口通信 PostMessage Form Data 对象 绘画canvas 1.3 伪类和伪元素 伪类:用于已有元素处于某种状态时为其添加对应的样式,这个状态是根据用户行为而动态变化的 例如:当用户悬停在指定元素时,可以通过\:hover来描述这个元素的状态,虽然它和一般css相似,可以为 已有元素添加样式,但是它只有处于DOM树无法描述的状态下才...https://developer.aliyun.com/article/1353677
6.wps表格怎么取消重排窗口wps表格怎么取消重排窗口 WPS电子表格如何取消重排窗口 将其中一个窗口最大化就可以了。所有窗口的都显示在标签栏上了。 # 爱玩数码 # 《wps表格怎么取消重排窗口》不代表本网站观点,如有侵权请联系我们删除https://www.zcbm580.com/pos/k8l4z5lqy.html
7.PPT演讲实用技巧播放PPT文档时,点击Powerpoint的“幻灯片放映”菜单中的“观看幻灯片”将启动默认的全屏放映模式,这时必须使用“Alt+Tab”或“Alt+Esc”组合键才能与其他窗口切换。如果在播放幻灯片时,按住Alt键不放,依次按下“D”、“V”键激活播放操作,就可以让幻灯片放映模式变成一个带标题栏和菜单栏的普通窗口形式,操作起来就...https://www.yjbys.com/edu/yanjiang/44914.html
8.如何取消窗口重排Excel基础应用ExcelHome技术论坛之前弄了重排之后每次打开EXCEL就出现2个窗口,想问怎么取消窗口重排?谢谢 https://club.excelhome.net/forum.php?mod=viewthread&tid=765903
9.Excel2010如何重排窗口excel办公软件软件教程重排窗口”在哪?使用“重排窗口”我们可以做些什么?如何使用“重排窗口”进行多窗口比较编辑?如何取消Excel2010中的“重排窗口”?下面就让上好网为大家一一道来。 一、Excel2010中的“重排窗口”在哪? 在Excel2003中我们可以点击菜单栏的“窗口”--“重排窗口”即可打开,可是到了Excel2010已经有了些小变动了。在Exc...https://www.jb51.net/office/excel/43592.html
10.Excel中重排文档窗口的方式不包括。【判断题】当鼠标指针移动一个窗口的边缘时会变为一个双向的箭头,表明可改变窗口的大小。 A. 正确 B. 错误 查看完整题目与答案 【简答题】ECSR原则是指:取消、( )、( )、重排。 查看完整题目与答案 【判断题】F-C 酰基化反应会有重排产物。 A. 正确 B. 错误 查看完整题目与答案 【单选题】...https://www.shuashuati.com/ti/e504d44d22d3429997e53ef4fc0f8ebd.html?fm=bdbds645686c195bb04243c41b1204b902d5f
11.JavaScript前端开发案例教程第二版课后答案web前端开发实例教程...17、Doctype 作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 18、盒模型:3C 标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在 Quirks 模式下,IE 的宽度和高度还包含了 padding 和 border。 19、Css Hack?ie6,7,8 的 hack 分别是什么? https://blog.51cto.com/u_16099245/9160962
12.cpm的使用操作流程(通用9篇)设置完后,点击确定。点击【取消预置】按钮,取消上一次预置。 如果操作员有进免费车的权限,点击【进免费车】按钮,弹出免费车入场窗口,如下图所示。输入免费车车牌号码,选择入场口,点击确定,道闸开启,车辆可进入停车场。 点击【出免费车】按钮,弹出免费车出场窗口,如下图所示。输入免费车车牌号码,选择出场口,点击...https://www.360wenmi.com/f/file3tp9kdaq.html
13.怎么取消重排窗口怎么取消重排窗口 点击那个小方框就行,或者关闭打开。https://www.huoban.com/news/post/47317.html
14.如何获取到其他窗口上某个控件的值?特请教各位帮忙指点迷津~~问题如下:现在想获取这个窗口上红色线框中的时间,代码要肿么写呢?https://bbs.csdn.net/topics/391948347
15.轻松搞定多窗口协同作业腾讯云开发者社区小诀窍:双击拆分线即可取消拆分操作。 上述两种方法基本原理一致:固定一行,通过冻结或拆分调整另一行的相对位置,完成数据对比。这两种方法看起来仍有些笨拙,因此推出第三种方法,也是如何查看工作簿不同部分这一问题最普遍主要的解决方法。 方法三:新建窗口-全部重排 ...https://cloud.tencent.com/developer/news/304028
16.前端性能优化高性能JavaScript整理总结木鱼coc6.浏览器窗口尺寸变化 减少重绘和重排 //三次重绘 el.style.borderLeft = '1px'; el.style.borderRight = '2px'; el.style.padding = '5px'; //一次重绘 el.style.cssText = 'border-left: 1px;border-right: 2px; padding: 5px'; 批量修改DOM时如何减少重绘和重排: 步骤: ...https://segmentfault.com/a/1190000013963213/