写点什么

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

  • 2019-03-18
  • 本文字数:2674 字

    阅读完需:约 9 分钟

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

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

背景和范围

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

适用范围

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

规格描述

Mate X 物理形态概述


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


  • 展开态,全屏点亮工作;

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

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

静态适配需求规格描述

大屏静态显示规格:



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


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

主屏静态显示规格

屏幕比例:19.5 : 9


参照下图:


副屏静态显示规格

副屏规格:25 :9


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


动态适配需求规格描述

说明:


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


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


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


设计和开发指导

大屏布局 UI 设计指导

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

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

说明:


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


示例:





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

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

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


示例:




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

适配建议三:分栏布局

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


示例:



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

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

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


示例:



适配开发指导

开发约束

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


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

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

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

屏幕比例适配

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


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


1.应用如何申明自适应



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


android:resizeableActivity=["true" | "false"]
复制代码


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


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


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


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


<meta-data android:name="android.max_aspect" android:value="2.4" />
复制代码


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


< activity android:maxAspectRatio="2.4">     ...    </activity>
复制代码


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


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>
复制代码

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

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


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


android:configChanges="screenSize|orientation|smallestScreenSize"
复制代码


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

调试

模拟调试

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


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


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


adb shell wm size 1136x2480


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


adb shell wm size 2200x2480


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


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


adb shell wm size 2200x2480


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


adb shell wm size 1136x2480


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


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


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



2019-03-18 08:0023346

评论

发布
暂无评论
发现更多内容

5. JsonFactory工厂而已,还蛮有料,这是我没想到的

YourBatman

Jackson Fastjson JSON库 JsonFactory

LeetCode题解:11. 盛最多水的容器,双循环暴力法,JavaScript,详细注释

Lee Chen

大前端 LeetCode

MySQL视图介绍

Simon

MySQL

python自动生成一整月的排班表

不会写诗的王维

Python

暴雪员工抗议薪酬不公,部分员工称甚至难以维持生计

程序员生活志

职场

他被称为"中国第一程序员",一人之力单挑微软!真牛!

程序员生活志

史上最强DIY,手工制作一只会说话的机器狗

华为云开发者联盟

聊天机器人 nlp 华为云 语言识别 语言合成

基于Ambari的大数据平台搭建

数据社

大数据 hadoop ambari

MySQL-长事务详解

Simon

MySQL mysql事务

Linux Page Cache调优在Kafka中的应用

vivo互联网技术

大数据 kafka

Spring-技术专题-Bean的生命周期简介

码界西柚

spring

性能优化-技术专题-top和jstack分析高CPU问题

码界西柚

JVM

揭秘MySQL主从数据不一致

Simon

MySQL 主从复制

90后程序员小姐姐在线征婚!年薪70w!拥有五套房!她却担心自己因为年龄大嫁不出去!

程序员生活志

程序员

[8.20]leetcode每日一题,

一起搞稽

算法 DFS

LeetCode题解:66. 加一,倒序遍历+可中途退出,JavaScript,详细注释

Lee Chen

大前端 LeetCode

影响音视频延迟的关键因素(二): 采集、前处理、编解码

ZEGO即构

H264 API 3A算法

卡丁车的后轴是如何做到差速的?

TGP大跨步

科普 卡丁车 TGP 大跨步 素材

更改用户host留下的坑

Simon

MySQL

关于自增id 你可能还不知道

Simon

MySQL MySQL自增ID

PM2 管理node.js开机自启动(非root用户)

不会写诗的王维

node.js

如何选择一台打印机

别把虾米不当海鲜

哥尼斯堡七桥问题

NashSP

IOTA架构下的数据采集

易观大数据

【数据结构与算法】用动图解说数组、链表、跳表原理与实现

三钻

数组 链表 数据结构与算法 跳表

因为套用这个模板,我成了公司最佳员工

华为云开发者联盟

网站架构 华为云 网站搭建 匀速建站 SEO

PHP中的错误和异常

书旅

php 异常 常见错误

通过波士顿矩阵模型做产品定位

GuOjixIE

数据分析 产品定位 波士顿矩阵模型

一行错误代码:5 亿美元没了。。。项目关闭。。。

程序员生活志

芯片破壁者(十三):台湾地区半导体的古史新证

脑极体

设计模式-技术专题-建造者模式(Builder)

码界西柚

Java 设计模式

华为发布折叠屏官方适配方案_大前端_华为开发者联盟_InfoQ精选文章