华为发布折叠屏官方适配方案

2月底,在西班牙巴塞罗那召开的MWC2019华为终端全球发布会上,华为正式发布了5G折叠屏手机HUAWEI Mate X,同时,华为也宣布这款手机将在今年年中上市,消息一出,瞬间刷爆朋友圈。关于这款手机背后的黑科技,相信大家都已经有所了解,我们就不再展开讨论,对于开发者来说,最关心的莫过于折叠屏的适配问题,对此,我们联系到了华为终端的相关技术专家,为大家获取了折叠屏的官方适配方案,以下全文就是适配文档。

\n

背景和范围

\n

此文档针对华为Mate X 以及后续可能的折叠屏产品,提供应用适配的规格要求描述,以及适配指导。以确保应用在折叠屏显示各种形态下,皆可以布局正确,显示美观,并且屏幕物理形态切换时,应用尽可能做到不重启,不中断当前用户业务。

\n

适用范围

\n

文档适用于Android平台APP相关的设计,开发,测试人员等。

\n

规格描述

\n

Mate X物理形态概述

\n

\n

对于通用软件,可能存在如下形态,即:

\n
  • \n
  • \n

    展开态,全屏点亮工作;

    \n\n
  • \n

    折叠主屏态:折叠态,主屏工作;

    \n\n
  • \n

    折叠副屏态:折叠态:副屏工作。

    \n\n
\n

静态适配需求规格描述

\n

大屏静态显示规格:

\n

\n

大屏规格定义:应用在大屏展开下,可以撑满全屏显示,且在横竖屏切换形态下,布局和操作按键都正常,不出现任意方向的黑边。

\n

如上图,A图为撑满全屏,OK、BCD都是错误的适配规格。

\n

主屏静态显示规格

\n

屏幕比例:19.5 : 9

\n

参照下图:

\n

\n

副屏静态显示规格

\n

副屏规格:25 :9

\n

副屏下,默认不以全屏显示,以主屏比例显示,即在副屏下也显示19.5:9居下显示。应用只需要做好19.5:9的适配即可,副屏以19.5:9 在屏幕下方显示由系统统一控制。

\n

\n

动态适配需求规格描述

\n

说明:

\n

(1)任意形态下打开一个应用,满足以上静态显示规格;

\n

(2)当用户物理形态切换时,应用需要做到不重启应用,并自动在新的设备形态下按照静态规格布局。

\n

即:在用户进行展开,折叠等操作, 应用任务不中断,自动适应各种屏幕下的静态布局规格。

\n

\n

设计和开发指导

\n

大屏布局UI设计指导

\n

如下适配建议以及各应用适合适配类型,仅作为推荐性建议,具体由应用根据各自业务特性进行针对性设计。

\n

适配建议一:X轴方向自适应

\n

说明:

\n

即,尽量保持Y轴方向上元素不变,X轴方向上自适应。

\n

示例:

\n

\n

\n

\n

范围(推荐性):适用于界面元素相对单一,没有大量列表类、或较多显示元素的页面。

\n

适配建议二:布局内容扩展

\n

说明:参考pad布局显示更多内容,对于区分了手机和pad布局的应用,在展开态优先考虑参考pad的大屏布局适配展开态界面,显示更多内容;尽量保证Y轴方向元素的不变。

\n

示例:

\n

\n

\n

范围(推荐性):一般适用于WEB类应用,页面特征一般为元素多,适配原则以尽量显示较多元素优先。

\n

适配建议三:分栏布局

\n

说明:对于设计过分栏能力的模块,需要在展开态体现分栏布局。

\n

示例:

\n

\n

范围:一般有明显list二级菜单的元素结构比较适合。

\n

适配建议四:横竖屏布局一致

\n

说明:考虑到展开态8:7.1的比例,展开态的横屏和竖屏建议一套布局。横竖一致;不对展开态的横屏特殊处理,挪移布局不用体现。

\n

示例:

\n

\n

\n

适配开发指导

\n

开发约束

\n

说明:具备8:7.1, 19.5:9, 25:9, 三种可能的显示形态。

\n

强烈建议应用支持可变比例显示(resizeable),在可预见的屏幕比例范围内,都可以做到良好适配。且在比例切换时,应用能够自己处理 screenSize 变化,不需要重走生命周期。总结来说,即要求应用可以完全支持自适应布局,无论静态还是场景切换下。

\n

适配规格:支持热切换能力

\n

应用适配折叠屏需要做“屏幕比例适配”和“切换显示比例应用不重启适配”。

\n

屏幕比例适配

\n

适配方式1:应用支持自适应能力(推荐)

\n

应用只要能做到自适应,在任意比例的屏幕都能做到全屏显示。

\n

1.应用如何申明自适应

\n

\n

2.设置方法:在 manifest 文件的 或 节点中设置 android:resizeableActivity 的值为true,可声明应用支持自适应显示,Activity 将能以分屏和 freeform 模式启动。

\n
android:resizeableActivity=[\u0026quot;true\u0026quot; | \u0026quot;false\u0026quot;]\n
\n

适配方式2:设置应用支持的最大比例和最小比例适配

\n

为保证应用在主副屏或者大屏态能保证满屏显示,请尽快确保应用可以支撑较高范围的宽高比,避免后续反复适配,华为建议最高宽高比支持到2.4或者更大(可以确保在主屏、辅屏下满屏显示,如果设置的比例小于2.4可能因为最终屏幕比例与当前规格存在差异引起应用无法全屏显示),最小宽高比为1:1(可以确保在展开态大屏下满屏显示)。

\n

最大宽高比申明: maxaspecratio:2.4(2.4表明在主副屏下满屏显示)

\n

Android 7.1 及以下版本,在 manifest 文件的\u0026lt;application\u0026gt;节点中增加 \u0026lt;meta-data\u0026gt;数据,设置最大支持比例:

\n
\u0026lt;meta-data android:name=\u0026quot;android.max_aspect\u0026quot; android:value=\u0026quot;2.4\u0026quot; /\u0026gt;\n
\n

Android 8.0 及以上版本,在 manifest 文件的 \u0026lt;activity\u0026gt; 节点中增加 android:MaxAspectRatio 属性,声明最大支持比例:

\n
\u0026lt; activity android:maxAspectRatio=\u0026quot;2.4\u0026quot;\u0026gt;\n     ...\n    \u0026lt;/activity\u0026gt;\n
\n

最小宽高比申明: minaspectratio:1.0 (App | Activity Level )

\n

Q之前版本:在 manifest 文件的 \u0026lt;application\u0026gt;节点中增加 \u0026lt;meta-data\u0026gt;数据,设置最小支持比例(声明为1.0即表示在展开态大屏下满屏显示):

\n
\u0026lt; meta-data android:name=\u0026quot;android.min_aspect\u0026quot; android:value=\u0026quot;1.0\u0026quot; /\u0026gt;\n
\n

Q版本之后支持:在 manifest 文件的 \u0026lt;activity\u0026gt;节点中增加 android:MinAspectRatio 属性,声明最小支持比例:

\n
 \u0026lt;activity android:minAspectRatio=\u0026quot;1.0\u0026quot;\u0026gt;\n     ...\n    \u0026lt;/activity\u0026gt;\n
\n

切换显示比例应用不重启适配

\n

应用如何自处理screenSize事件,确保热切换时不重走生命周期。

\n

在 manifest 文件的 \u0026lt;activity\u0026gt; 节点中的 android:configChanges 属性增加 screenSize|orientation|smallestScreenSize字符串,当屏幕比例变化时,系统会回调 Activity 的 onConfigurationChanged() 方法,而避免 Activity 重新启动。

\n
android:configChanges=\u0026quot;screenSize|orientation|smallestScreenSize\u0026quot;\n
\n

应用复写 onConfigurationChanged() 方法,在方法中实现针对不同比例下界面布局的相应调整,如切换布局、调整控件位置和间距等。

\n

调试

\n

模拟调试

\n

如果开发者没有折叠屏手机,可以通过修改屏幕分辨率来模拟调试:

\n

1.主屏(折叠)切全屏(展开)模拟方法:

\n
  • \n
  • 预先将手机设置主屏分辨率:\n
\n

adb shell wm size 1136x2480

\n
  • \n
  • 通过修改手机分辨率为全屏分辨率模拟状态切换:\n
\n

adb shell wm size 2200x2480

\n

2.全屏(展开)切主屏(折叠)模拟方法:

\n
  • \n
  • 预先将手机设置全屏分辨率:\n
\n

adb shell wm size 2200x2480

\n
  • \n
  • 通过修改手机分辨率为主屏分辨率模拟状态切换:\n
\n

adb shell wm size 1136x2480

\n

现在华为官网已经上线预约 Mate X 适配真机测试的活动,有兴趣的开发者可通过此链接了解:

\n

https://developer.huawei.com/consumer/cn/activity/709

\n

更多内容,请关注前端之巅。

\n

\n

会议推荐

\n

2019年6月,GMTC全球大前端技术大会2019即将到来。小程序、Flutter、移动AI、工程化、性能优化…大前端的下一站在哪里?点击下图了解更多详情。

\n

\n

你可能感兴趣的:(华为发布折叠屏官方适配方案)