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

\u003cp\u003e2月底，在西班牙巴塞罗那召开的MWC2019华为终端全球发布会上，华为正式发布了5G折叠屏手机HUAWEI Mate X，同时，华为也宣布这款手机将在今年年中上市，消息一出，瞬间刷爆朋友圈。关于这款手机背后的黑科技，相信大家都已经有所了解，我们就不再展开讨论，对于开发者来说，最关心的莫过于折叠屏的适配问题，对此，我们联系到了华为终端的相关技术专家，为大家获取了折叠屏的官方适配方案，以下全文就是适配文档。\u003c/p\u003e\n\u003ch2\u003e背景和范围\u003c/h2\u003e\n\u003cp\u003e此文档针对华为Mate X 以及后续可能的折叠屏产品，提供应用适配的规格要求描述，以及适配指导。以确保应用在折叠屏显示各种形态下，皆可以布局正确，显示美观，并且屏幕物理形态切换时，应用尽可能做到不重启，不中断当前用户业务。\u003c/p\u003e\n\u003ch3\u003e适用范围\u003c/h3\u003e\n\u003cp\u003e文档适用于Android平台APP相关的设计，开发，测试人员等。\u003c/p\u003e\n\u003ch2\u003e规格描述\u003c/h2\u003e\n\u003ch3\u003eMate X物理形态概述\u003c/h3\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8331d46385d.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e对于通用软件，可能存在如下形态，即：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e展开态，全屏点亮工作；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e折叠主屏态：折叠态，主屏工作；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e折叠副屏态：折叠态：副屏工作。\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003e静态适配需求规格描述\u003c/h3\u003e\n\u003cp\u003e大屏静态显示规格：\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c83325274ead.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e大屏规格定义：应用在大屏展开下，可以撑满全屏显示，且在横竖屏切换形态下，布局和操作按键都正常，不出现任意方向的黑边。\u003c/p\u003e\n\u003cp\u003e如上图，A图为撑满全屏，OK、BCD都是错误的适配规格。\u003c/p\u003e\n\u003ch3\u003e主屏静态显示规格\u003c/h3\u003e\n\u003cp\u003e屏幕比例：19.5 : 9\u003c/p\u003e\n\u003cp\u003e参照下图：\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c83329ba9ef1.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch3\u003e副屏静态显示规格\u003c/h3\u003e\n\u003cp\u003e副屏规格：25 ：9\u003c/p\u003e\n\u003cp\u003e副屏下，默认不以全屏显示，以主屏比例显示，即在副屏下也显示19.5:9居下显示。应用只需要做好19.5:9的适配即可，副屏以19.5:9 在屏幕下方显示由系统统一控制。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8332c4f1064.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch3\u003e动态适配需求规格描述\u003c/h3\u003e\n\u003cp\u003e说明：\u003c/p\u003e\n\u003cp\u003e（1）任意形态下打开一个应用，满足以上静态显示规格；\u003c/p\u003e\n\u003cp\u003e（2）当用户物理形态切换时，应用需要做到不重启应用，并自动在新的设备形态下按照静态规格布局。\u003c/p\u003e\n\u003cp\u003e即：在用户进行展开，折叠等操作， 应用任务不中断，自动适应各种屏幕下的静态布局规格。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8332f97c404.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch2\u003e设计和开发指导\u003c/h2\u003e\n\u003ch3\u003e大屏布局UI设计指导\u003c/h3\u003e\n\u003cp\u003e如下适配建议以及各应用适合适配类型，仅作为推荐性建议，具体由应用根据各自业务特性进行针对性设计。\u003c/p\u003e\n\u003ch3\u003e适配建议一：X轴方向自适应\u003c/h3\u003e\n\u003cp\u003e说明：\u003c/p\u003e\n\u003cp\u003e即，尽量保持Y轴方向上元素不变，X轴方向上自适应。\u003c/p\u003e\n\u003cp\u003e示例：\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c833334dd030.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c833352a333a.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8333769e1c8.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e范围（推荐性）：适用于界面元素相对单一，没有大量列表类、或较多显示元素的页面。\u003c/p\u003e\n\u003ch3\u003e适配建议二：布局内容扩展\u003c/h3\u003e\n\u003cp\u003e说明：参考pad布局显示更多内容，对于区分了手机和pad布局的应用，在展开态优先考虑参考pad的大屏布局适配展开态界面，显示更多内容；尽量保证Y轴方向元素的不变。\u003c/p\u003e\n\u003cp\u003e示例：\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8333c5dfd64.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8333e494ca9.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e范围（推荐性）：一般适用于WEB类应用，页面特征一般为元素多，适配原则以尽量显示较多元素优先。\u003c/p\u003e\n\u003ch3\u003e适配建议三：分栏布局\u003c/h3\u003e\n\u003cp\u003e说明：对于设计过分栏能力的模块，需要在展开态体现分栏布局。\u003c/p\u003e\n\u003cp\u003e示例：\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c83353dd5bd1.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e范围：一般有明显list二级菜单的元素结构比较适合。\u003c/p\u003e\n\u003ch3\u003e适配建议四：横竖屏布局一致\u003c/h3\u003e\n\u003cp\u003e说明：考虑到展开态8:7.1的比例，展开态的横屏和竖屏建议一套布局。横竖一致；不对展开态的横屏特殊处理，挪移布局不用体现。\u003c/p\u003e\n\u003cp\u003e示例：\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8335643279d.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c83357b54ef5.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch2\u003e适配开发指导\u003c/h2\u003e\n\u003ch3\u003e开发约束\u003c/h3\u003e\n\u003cp\u003e说明：具备8:7.1， 19.5:9， 25:9， 三种可能的显示形态。\u003c/p\u003e\n\u003cp\u003e强烈建议应用支持可变比例显示（resizeable），在可预见的屏幕比例范围内，都可以做到良好适配。且在比例切换时，应用能够自己处理 screenSize 变化，不需要重走生命周期。总结来说，即要求应用可以完全支持自适应布局，无论静态还是场景切换下。\u003c/p\u003e\n\u003ch3\u003e适配规格：支持热切换能力\u003c/h3\u003e\n\u003cp\u003e应用适配折叠屏需要做“屏幕比例适配”和“切换显示比例应用不重启适配”。\u003c/p\u003e\n\u003ch3\u003e屏幕比例适配\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e适配方式1：应用支持自适应能力（推荐）\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e应用只要能做到自适应，在任意比例的屏幕都能做到全屏显示。\u003c/p\u003e\n\u003cp\u003e1.应用如何申明自适应\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8335c46fe12.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e2.设置方法：在 manifest 文件的 \u003cactivity\u003e 或 \u003capplication\u003e 节点中设置 android:resizeableActivity 的值为true，可声明应用支持自适应显示，Activity 将能以分屏和 freeform 模式启动。\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003eandroid:resizeableActivity=[\u0026quot;true\u0026quot; | \u0026quot;false\u0026quot;]\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e\u003cstrong\u003e适配方式2：设置应用支持的最大比例和最小比例适配\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e为保证应用在主副屏或者大屏态能保证满屏显示，请尽快确保应用可以支撑较高范围的宽高比，避免后续反复适配，华为建议最高宽高比支持到2.4或者更大（可以确保在主屏、辅屏下满屏显示，如果设置的比例小于2.4可能因为最终屏幕比例与当前规格存在差异引起应用无法全屏显示），最小宽高比为1:1（可以确保在展开态大屏下满屏显示）。\u003c/p\u003e\n\u003cp\u003e最大宽高比申明： maxaspecratio：2.4（2.4表明在主副屏下满屏显示）\u003c/p\u003e\n\u003cp\u003eAndroid 7.1 及以下版本，在 manifest 文件的\u003ccode\u003e\u0026lt;application\u0026gt;\u003c/code\u003e节点中增加 \u003ccode\u003e\u0026lt;meta-data\u0026gt;\u003c/code\u003e数据，设置最大支持比例：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;meta-data android:name=\u0026quot;android.max_aspect\u0026quot; android:value=\u0026quot;2.4\u0026quot; /\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eAndroid 8.0 及以上版本，在 manifest 文件的 \u003ccode\u003e\u0026lt;activity\u0026gt;\u003c/code\u003e 节点中增加 android:MaxAspectRatio 属性，声明最大支持比例：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt; activity android:maxAspectRatio=\u0026quot;2.4\u0026quot;\u0026gt;\n ...\n \u0026lt;/activity\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e最小宽高比申明： minaspectratio：1.0 （App | Activity Level ）\u003c/p\u003e\n\u003cp\u003eQ之前版本：在 manifest 文件的 \u003ccode\u003e\u0026lt;application\u0026gt;\u003c/code\u003e节点中增加 \u003ccode\u003e\u0026lt;meta-data\u0026gt;\u003c/code\u003e数据，设置最小支持比例（声明为1.0即表示在展开态大屏下满屏显示）：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt; meta-data android:name=\u0026quot;android.min_aspect\u0026quot; android:value=\u0026quot;1.0\u0026quot; /\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eQ版本之后支持：在 manifest 文件的 \u003ccode\u003e\u0026lt;activity\u0026gt;\u003c/code\u003e节点中增加 android:MinAspectRatio 属性，声明最小支持比例：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e \u0026lt;activity android:minAspectRatio=\u0026quot;1.0\u0026quot;\u0026gt;\n ...\n \u0026lt;/activity\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003e切换显示比例应用不重启适配\u003c/h3\u003e\n\u003cp\u003e应用如何自处理screenSize事件，确保热切换时不重走生命周期。\u003c/p\u003e\n\u003cp\u003e在 manifest 文件的 \u003ccode\u003e\u0026lt;activity\u0026gt;\u003c/code\u003e 节点中的 android:configChanges 属性增加 screenSize|orientation|smallestScreenSize字符串，当屏幕比例变化时，系统会回调 Activity 的 onConfigurationChanged() 方法，而避免 Activity 重新启动。\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003eandroid:configChanges=\u0026quot;screenSize|orientation|smallestScreenSize\u0026quot;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e应用复写 onConfigurationChanged() 方法，在方法中实现针对不同比例下界面布局的相应调整，如切换布局、调整控件位置和间距等。\u003c/p\u003e\n\u003ch2\u003e调试\u003c/h2\u003e\n\u003ch3\u003e模拟调试\u003c/h3\u003e\n\u003cp\u003e如果开发者没有折叠屏手机，可以通过修改屏幕分辨率来模拟调试：\u003c/p\u003e\n\u003cp\u003e1.主屏（折叠）切全屏（展开）模拟方法：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e预先将手机设置主屏分辨率：\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eadb shell wm size 1136x2480\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e通过修改手机分辨率为全屏分辨率模拟状态切换：\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eadb shell wm size 2200x2480\u003c/p\u003e\n\u003cp\u003e2.全屏（展开）切主屏（折叠）模拟方法：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e预先将手机设置全屏分辨率：\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eadb shell wm size 2200x2480\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e通过修改手机分辨率为主屏分辨率模拟状态切换：\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eadb shell wm size 1136x2480\u003c/p\u003e\n\u003cp\u003e现在华为官网已经上线预约 Mate X 适配真机测试的活动，有兴趣的开发者可通过此链接了解：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://developer.huawei.com/consumer/cn/activity/709\"\u003ehttps://developer.huawei.com/consumer/cn/activity/709\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e更多内容，请关注前端之巅。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8e715dcf231.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e会议推荐\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e2019年6月，GMTC全球大前端技术大会2019即将到来。小程序、Flutter、移动AI、工程化、性能优化…大前端的下一站在哪里？点击下图了解更多详情。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://gmtc.geekbang.org/?utm_source=infoq\u0026amp;utm_medium=bottombanner\"\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c8868e093844.png?imageView2/0/w\" alt=\"\" /\u003e\u003c/a\u003e\u003c/p\u003e\n