写点什么

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

  • 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:0022985

评论

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

软件测试 | 测试开发 | 测试面经 | 从测试螺丝钉到大厂测试开发,三点成长心得和面试经验

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | Web测试方法与技术之CSS讲解

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | 测试面试真题|抖音的广告系统前后台,该如何测试?

测吧(北京)科技有限公司

测试

测试开发面试真题 | 测试老兵进阶突破,成功挑战大厂 P7 Offer!

测吧(北京)科技有限公司

测试

公司内部分享文档应该怎么写?看这篇就够了

Baklib

从融云社交泛娱乐出海白皮书,看「社交+X」的全球攻略

融云 RongCloud

即时通讯 白皮书 泛娱乐社交

数据治理的核心:维度建模下的数仓构建

小鲸数据

数据仓库 维度建模 维度 数仓分层 分层划域

自有APP小程序如何打通微信登陆体系

Geek_99967b

小程序 小程序生态

软件测试 | 测试开发 | 一道大厂测试开发面试真题,你需要几分钟解答?

测吧(北京)科技有限公司

测试

面试凉凉,阿里学长甩我一份24w字Java核心技术面试手册,真香

钟奕礼

Java 架构 后端 java面试

iMazing高效便捷的数据转移功能

淋雨

ios iphone

GitHub获百万推荐的面试涨薪秘籍(Java岗)惨遭封杀?

钟奕礼

Java 后端 java面试 后端架构

一次 Rancher 和 openEuler 的上云之旅

openEuler

Linux 开源 openEuler rancher suse

开源实习 | 毕昇JDK发布国密算法实习任务

openEuler

开源 openEuler 毕昇 JDK

软件测试 | 测试开发 | Web测试方法与技术之JavaScript 讲解

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | Selenium 测试用例编写

测吧(北京)科技有限公司

测试

从规模化平台工程实践,我们学到了什么?

SOFAStack

小程序怎样影响传媒产业的数字化

Geek_99967b

小程序

22年程序员更卷了,金九银十“面试必备小册”最新开源

程序知音

Java 阿里 后端技术 秋招 Java面试题

阿里面试官内部题库,阿里发布2022年Java岗(正式版)面试题

程序知音

Java java面试 后端技术 秋招 Java面试八股文

2021 金三银四面试必备?体系化带你学习:分布式进阶技术手册

钟奕礼

Java 架构 后端 java面试

阿里被转载上100W次的Java面试题教程!已助我拿下9家大厂offer!

钟奕礼

Java 架构 后端 java面试

软件测试 | 测试开发 | WEB 端常见 Bug 解析

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | Web测试方法与技术实战演练

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | Web自动化之Selenium安装

测吧(北京)科技有限公司

测试

小程序容器,组装式应用的一种方案

Geek_99967b

小程序

概述服务网格的优劣势

穿过生命散发芬芳

服务网格 9月月更

Java高手怎样炼成?阿里大牛一份火爆GitHub的1046页笔记帮你解决

钟奕礼

Java 程序员 架构 后端 java面试

八家知名大厂联合手写的Java面试手册刚上线!竟就到达巅峰?

钟奕礼

Java 架构 后端 java面试

iMazing怎么恢复备份?iMazing恢复备份教程分享

淋雨

ios iphone

BATJ互联网月薪38K的Java岗面试题首曝光,掌握这些大厂Offer指定跑不了

程序知音

Java java面试 后端技术 秋招 Java面试八股文

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