华为折叠屏应用开发指导

兵子哥666 2019-07-22 07:18:02

文章来源于：华为终端开发者论坛（原创，转载请注明出处）
地址：https://developer.huawei.com/consumer/cn/forum/
论坛简介：华为开发者联盟是华为终端业务的生态服务平台，携手全球开发者共同打造终端消费者的卓越用户体验，构建万物互联的智慧终端生态。目前开发者联盟已经有57万用户，为了更好地帮助开发法者了解华为开放能力及服务，开发者联盟建立华为CBG开发者论坛。

缺少开发技术指导？苦于无人交流？想了解华为最新黑科技？助力开发者沟通华为牛人的技术交流平台—开发者论坛应运而生。开发者可以在这里探索开发实践，获悉业界动态、解决开发疑惑。通过对能力、技术、服务、IDE等进行全面透彻的讲解，实现开发者之间全方位的技术交流！

1. Overview

1.1 折叠屏形态概念

物理屏幕概念：
（1）柔性屏：采用可弯曲、柔韧性佳屏幕，可随意弯曲且不影响使用；
（2）折叠屏：柔性屏的一种，可折叠的屏幕形态，两折，多折等。

1.2 MateX形态概念

1. MateX的物理姿态
（1）折叠态：折叠后的形态；
（2）展开态：完全展开后的形态；
（3）支架态：折叠到完全展开的中间状态，可平稳放置。
2. MateX屏幕的物理切分
展开态下，提供一个完整的大尺寸屏幕：
（1）大屏：展开形态下，最大的屏幕，可正常显示应用内容。
折叠态和支架态下，基于折叠后形成的屏幕几何形态，对屏幕划分为2个屏幕区域：
（1）正面屏幕：折叠常规形态下的主要展示屏幕，可正常显示应用内容；
（2）背面屏幕：折叠常规形态下的次要展示屏幕，可正常显示应用内容。

1.3 适用范围
华为Mate X系列产品。

1.4 使用对象
华为自研及合作三方需要适配折叠屏手机的应用的开发者、UX设计师、测试、系统工程师。

2. UX设计指导

2.1 架构规范

2.1.1 折叠屏典型状态信息架构特点

折叠屏产品，最常用的使用状态分为：折叠状态、展开状态。
用户通过改变手机当前的使用状态，屏幕内的显示会遵从如下信息架构规则进行切换：
（1）当前在屏幕上呈现的应用保持运行，不应该出现应用跳出、进程中断、退出到上一层级、屏幕跳转等体验不连续情况；
（2）由于屏幕尺寸发生变化，应用应采用适当的手段对屏幕上内容布局进行优化调整；
（3）常见的布局调整样式请见下一节的详细论述。
2.1.2 折叠屏展开后的布局变化

1. 虚线分隔左侧：仅信息布局转换（对界面信息架构不造成影响）
（1）纵向布局结构不变；单个元素在行内进行等比缩放；同一行内横向空间延伸，可容纳元素个数增加；
（2）为适应屏幕的可视区变化，进行版面的重新布局，屏幕内可视化元素进行重新分组，各组块位置挪移，最终形成均衡的排版。

2. 虚线分隔右侧：信息架构变化（改变屏幕内信息层级关系和跳转路径）
（1）跨层级，将原来折叠态需要两屏、并通过跳转才能切换的内容，在展开态下的同一屏中进行同时展示；
（2）对交互结构相对复杂、信息形态种类更丰富的应用，借助应用内悬浮态交互元素，在应用内实现更多架构分支上的信息同屏呈现，或完成应用内的快速跳转切换。
2.1.3 典型布局：响应式布局变化

1. 适应场景：
内容呈现型界面，单页面内信息架构扁平，内容元素为单层列表或分组列表结构，如内容门户网站首页面。
2. 适配策略：
保持页面元素和模组的基本结构，基于屏幕宽度的增加，在横向增加单行元素。具体响应式布局的细节方法，可见后续相关章节。
3. 需注意：
首先满足的基本适配要求，如没有视觉元素的过度缩放，界面布局总体保持平衡，同组元素间距均衡合理；
保持对业务需求的满足，例如分类个数，图形元素的素材尺寸和格式限制，内容数量和运营能力等不受到冲击。
4. 响应式布局的样例：华为应用市场

内容门户型网页，符合响应式布局的条件。
优先考虑大屏布局适配展开态界面，保持页面整体架构，保持各分组元素的属性、格式
横向可延伸滚动，同组元素数量可显示更多个。

保持各元素物理尺寸不变，横向可以扩大留白保持视觉均衡，或显示更多同组元素。
从主屏切换到展开态时，通过类似横向延伸的过场动画效果来呈现流畅舒适的过渡。

2.1.4 典型布局：挪移布局变化

1. 适应场景：
应用/页面类型：内容呈现型，单页面内信息架构层级少，如门户网站首页面，内容详情页面等。
2. 适配策略：
保持页面元素和模组的基础上，基于屏幕形态，重新调整布局设计，优化体验。
3. 需注意：
首先满足的基本适配要求，解决在宽度屏幕下的版式不美观，不平衡的问题；
保持对业务需求的满足，保持屏幕内元素的业务主次关系；
利用板式设计的规则和样式进行优化，追求用户体验更好的布局，促成产品体验提升。
4. 挪移布局调整的样例：华为时钟

在普通竖屏下，页面布局为几组内容的纵向连续分布；
在展开态下，将页面内容分组分段挪移，形成相对均衡稳定的新布局形式。

2.1.5 典型布局：分栏布局

1. 适应场景：
信息架构为多层级、树形结构、应用内多任务并行、需要有快速跳转切换、有持续型内容呈现（如媒体播放）、辅助效率工具类等；
例如：列表+详情，跨层级信息呈现，沉浸式内容呈现+辅助信息，同级信息流呈现等。
2. 适配策略：
使用应用内分栏的能力，分隔出屏幕上两个甚至更多的分区，在每个分区内显示应用中不同的内容。
根据应用或场景需要，选择合适的宽度比例关系，可以借助栅格、响应式布局等方法构建分栏和各分区中内容布局定义。

2.1.5.1 举例1：列表+详情（例如：邮件应用）

将信息列表，及打开信息后的详情页面并排放置，两边信息为父子关系。
两边内容可同时上下滚动浏览。
对打开或切换列表中内容元素，只需一次点击即在右侧打开，操作直接快捷。

1. 信息架构优势：
适合于单层内容型元素列表的信息结构；
快速切换内容元素，一步直达；
避免了一级界面到二级界面的跨屏跳转，层级减少，信息直观。
2. 局限性：
对内容元素详情展示不能全屏最大化；
对于列表层级大于两层的树形结构，不能完全发挥优势；
不能同时打开两个内容元素详情进行参考阅读。

2.1.5.2 举例2：列表+视频播放

1. 适应场景：小视频类内容型应用的浏览界面。
左边为瀑布流或宫格形式列表，右边为竖直取景框的视频或图片素材，两边信息为父子关系；
点击左侧列表中内容元素，即在右侧播放或呈现。
2. 信息架构优势：
两边内容可同时分别上下滚动浏览，左侧列表滚动时，不影响右侧的内容播放；
平衡左侧快速浏览与右侧的短时间内容沉浸的体验目标；
层级减少，不需跳转屏幕，信息直观。
3. 局限性：
右侧详情展示不是最大化，在沉浸式的应用中不能达到最大程度的内容沉浸；
要保留左侧列表的结构，因此不能同时打开两个内容元素详情进行同时播放。

2.1.5.3 举例3：视频播放+辅助信息

1. 适应场景：视频播放、直播类型应用。
分为左右或上下分屏结构，两部分之间为主从关系，相互独立不干扰。
针对已经在折叠态全屏播放的视频，在打开变为展开态后，手机显示朝向不要发生改变，这样，用户不需要再将手机姿态做90度转向。
主界面为视频播放或直播图像区，可等比放大至充满屏幕高度或宽度；另一边为视频相关信息或社交互动信息，可自动或用户手动滚动，适合于信息流数据。
2. 信息架构优势：
内容为先，最大程度展示视频内容，视频本身不变形、不遮幅、不剪切；
保持视频内容的长时间沉浸式播放，高质量视频呈现更充分；
同时兼顾图文信息流的持续动态刷新，相互不叠加干扰。
3. 局限性：
与通用的信息叠加显示的样式设计，如弹幕，直播互动等来比较，实时沉浸感有差异。
2.1.6 典型布局：悬浮态

1. 适应场景：应用内的实时多任务运行（如视频窗口化播放、工具助手等）或多任务间快速切换。
用户使用特定的交互手段可完成激活悬浮窗，以及与分栏分屏相互转换；
用户对悬浮态有快速有效易操作的手段进行关闭、移动、调整窗口大小；
限制可以打开悬浮态的具体环境，限制同一时刻悬浮态元素个数，避免操作复杂度上升，体验下降。
2. 信息架构优势：
适合于文字阅读、流媒体，辅助工具等形式的内容的同时展示；
可实现快速切换或展示其他内容窗口，不必再进行目录树的回溯浏览，也避免了当前的体验进程的中断；
屏幕利用合理，用户可操控性强，使用灵活。
3. 局限性：
Android系统有对应用的悬浮窗权限控制，为了不影响其他应用的运行，这里定义的悬浮态只适合于应用内；
悬浮窗会对当前屏幕内其他内容有覆盖；
用户对窗口的操作，如拖动、改变大小、以及转换为分栏样式等的操作相对复杂精细，用户的学习过程会有一定难度。

3. 开发指导

3.1 基本要求

3.1.1 屏幕兼容性

运行 Android 的设备多种多样，尤其是当前已出现或未来可能出现的折叠屏设备，它们有着不同的屏幕尺寸和像素密度，而且在折叠屏设备从展开到折叠的切换过程中，同一个设备可能出现多种屏幕尺寸的使用状态。您在做app设计和开发的时候应该考虑支持不同屏幕尺寸和像素密度，以确保界面能够在各类屏幕上美观地呈现。
本节概述了这些主题以及 Android 上已有的可用功能，以帮助您的应用进行相应调整。

支持不同屏幕尺寸
1. 确保您的应用界面在不同的屏幕尺寸下可以全屏的显示

Fig 在展开时可以全屏显示（图以MateX示例）

Fig 折叠后可以全屏显示（图以MateX示例）
如上图，在应用界面能够不同的屏幕尺寸下铺满全屏显示，且响应布局和操作按键功能正常。我们强烈建议您的应用进行resizeable能力的支持。

您需要根据应用面向的API Level （targetSdkVersion）进行支持resizeable能力的申明。
（1）如果应用程序运行在Android 7.0 (API level 24，或更高)，系统将默认应用支持resizeable能力；
（2）如果应用程序运行在Android 7.0 之前(API level 小于 24)，需要应用在menifest中显式的申明android:resizeableActivity true，才可以支持resizeable能力。
android:resizeableActivity=['true' | 'false']
（3）申明受限屏幕
我们强烈建议您的应用进行resizeable能力支持。但如果您不想您的app 或 activity支持多窗口，可以通过设置 android:resizeableActivity false，这种情况下，应用将不具备分屏等多窗口能力，在不同屏幕下的显示由系统进行控制，依赖于面向的API Level；
（a）情况1：应用程序运行在 Android 8.0 (API level 26 或更高) ，应用依然可以全屏显示，但是不具备多窗口能力；
（b）情况2：应用程序运行在 Android 7.1 (API level 25 或更低), 系统将限制应用显示的比例在 16:9 (大约 1.86). 如果应用运行在一个更大宽高比的设备上将出现黑边。
为了防止情况2的出现，您可以通过安卓受限屏幕的能力来配置您的应用可以支持的屏幕比例范围，结合未来设备可能的形态，我们建议您对屏幕尺寸支持的最小范围为 1:1 到 2.4 之间，这也是安卓目前对应用开发者的建议。申明最大比例
申明最大比例
在您的 <activity> 标记中使用 android:MaxAspectRatio 声明最大比例。以下示例演示了如何声明 2.4 (12:5)的最大长宽比：


<activity android:maxAspectRatio='2.4'>
...
</activity>
在 Android 7.1 或更低的版本, 通过在 < meta-data> 添加 android.max_aspect 申明的方式, 参考示例如下：


<meta-data android:name='android.max_aspect' android:value='2.4' />
Note：虽然安卓提供了申请受限屏幕能力，还是强烈建议您设计resizeable能力，一旦您申明了受限屏幕比例（最大或最小）这意味着，当您的app运行在一个屏幕比例超出了您申明的范围，您的应用程序在屏幕上将出现黑边等现象。

申明最小比例

Google 在Q版本将开放准许应用申明最小比例的API，华为目前已经支持该API的系统生效，所以您可以在Q版本之前采用如下方法进行最小比例的申明
Q之前版本：在 manifest 文件的 <application> 节点中增加 <meta-data> 数据，设置最小支持比例（声明为1.0即表示在展开态大屏下满屏显示）：
< meta-data android:name='android.min_aspect' android:value='1.0' />
Q版本之后支持：在 manifest 文件的 <activity> 节点中增加 android:MinAspectRatio 属性，声明最小支持比例：
<activity android:minAspectRatio='1.0'>
...
</activity>
您也可以参阅Android开发者指南中关于申明受限屏幕的使用说明：https://developer.android.google.cn/guide/practices/screens-distribution.html

2. 应用布局优化

您的应用在经过不同屏幕尺寸支持的设计后，为了确保在折叠屏各个屏幕形态下获取优秀的布局显示效果，例如显示更多更清晰的内容，建议您对布局进行优化。
应用界面正确、美观的布局和显示，包含如下：
（1）确保您的布局能够根据屏幕适当地调整大小；
（2）根据屏幕配置提供合适的 UI 布局；
（3）确保对正确的屏幕应用正确的布局；
（4）提供可正常缩放的位图。
详细信息请参阅Android开发者指南：https://developer.android.google.cn/training/multiscreen/screensizes?

3.1.2 应用连续性

为了保证您的应用程序在展开/折叠过程无缝切换，您需要做应用连续性的设计，以确保您的应用程序任务不中断。以MateX 为例，最佳的体验为，应用在展开切换过程中，不发生应用的重启，且切换之前的任务和应用相关状态得以保存和延续。

折叠展开的动作，会触发对smallestscreensize、screensize和screenlayout的配置更改。每当发生配置更改时，默认情况下会销毁并重新创建整个activity。

推荐您通过注册监听系统configchanges消息，不重启应用的情况下处理配置更改，您需要向manifest中添加android:configchanges属性，其中至少包含以下值：
<activity
Android:name=='.MyActivity'
android:configChanges='screenSize|smallestScreenSize|screenLayout'
/>
您需要复写 onConfigurationChanged() 方法，通过该方法的Configuration参数获得屏幕的分辨率等信息，就可以针对不同比例屏幕下的应用界面布局做相应调整，如切换布局、调整控件位置和间距等。

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
Log.i('test', 'newConfig.screenHeightDp:' + newConfig.screenHeightDp
+ ', newConfig.screenWidthDp' + newConfig.screenWidthDp);
//根据屏幕分辨率信息调整应用的布局
}
如果您的应用必须进行重新走生命周期来以响应屏幕切换，需要进行状态的保存和恢复。
您可以通过OnSaveInstanceState（）和ViewModel对象来进行之前状态保存和后续的恢复。即，在销毁activity之前，通过onSaveInstancesState()存储状态，在onCreate() or onRestoreInstanceState()进行状态的恢复。
Note：不要在OnDestroy（）中调用finish（）或其他自行终止进程。这将导致应用程序在设备折叠或展开时关闭、闪退等问题。
详细信息请参阅Android开发者指南：https://developer.android.com/guide/topics/resources/runtime-changes

3.2 应用分栏开发指导

应用分栏布局适配要求应用开发者进行分栏布局设计，并在应用屏幕切换到适当比例时，触发分栏布局显示。

以Activity为单位，实现应用内分屏显示，并根据应用特征，提供以下适配模式。

1. 列表模式：适用于信息流类应用，如新闻类应用。
（1）单列表：应用以主页列表Activity为中心，提供浏览信息服务。针对此类应用，采取主页始终放置在左侧的方式，帮助用户快速浏览，并且辅以切换全屏浏览的快捷手势，解决在长内容阅读时半屏阅读的不适感。

（2）多列表：应用存在主页、搜索页、推荐页等多列表，且都以不同的Activity承载。针对此类应用，方式与单列表类似，增加分屏下显示双列表的场景。

2. 非列表模式：适用于应用中单产品多维度展示或关联场景，并支持两个商品分屏比较场景。

（1）此类应用以相关Activity同时显示的设计思路进行分屏显示，下图中围绕详情页，相关客服、评论等子页面进行分屏显示；
（2）相同的0级页面，出现一个Activity两个实例情况，分屏显示，典型的是相似商品比较。