全面屏适配,参考华为文档

华为全面屏适配技术指导

1. 全面屏介绍

1.1 全面屏定义

普通屏:纵横比为16:9,如1080x1920、1440x2560等,其比值为1.78,全面屏手机出现之前,Android中默认的最大屏幕纵横比(maximum aspect ratio)为1.86,即能够兼容16:9的屏幕。

全面屏:屏幕比例超过1.86的屏幕,比如:17:9、18:9、19:9、19.5:9 等这些比例的屏幕都是全面屏。

1.2 全面屏机型

机型 屏幕纵横比 ratio_float
Mate10 pro 18:9 2.0
LG G6    18:9 2.0
Samsung Galaxy S8 18.5:9 2.06
Essential Phone 19:10 1.9
小米MIX    17:9 1.89
iPhone X 19.5:9 2.17

2. 全面屏问题

应用全屏时显示区间通常为下图绿色区间。

1. 当显示导航栏时此区间是整个屏幕区间减去导航栏的区间,当隐藏导航栏时就是整个屏幕的区间。按Google的要求如果应用未做相应适配此区间纵横比必须是在1.3333和1.86之间。

全面屏适配,参考华为文档_第1张图片

全面屏显示导航栏                          全面屏去导航栏    

2. 当设备屏幕足够大时,如华为Mate10Pro、三星S8,除去导航栏应用显示尺寸的纵横比还是大于1.86的,为了满足Google CDD的要求,应用就无法按之前的全屏进行显示,就会出现黑边。

全面屏适配,参考华为文档_第2张图片

3. 应用非全屏和全屏显示效果对比:

全面屏适配,参考华为文档_第3张图片            全面屏适配,参考华为文档_第4张图片

应用非全屏显示                                                   应用全屏显示

3. 适配方案

目前国内TOP1000三方应用中,已经有35%的应用跟随Google建议,完成了全面屏适配。其中部分应用能够自适应各种比例,另一部分在18.9:9及以下比例屏幕的手机上可以全屏显示。

但是随着iPhoneX(屏幕比例19.5:9)手机发布,Android平台也会出现类似比例屏幕,未来还会出现超宽屏(屏幕比例21:9),应用在更大比例屏幕上显示可能又会出现问题。因此,建议应用采用更灵活的方案,一次适配好,避免反复修改。

3.1 可选适配方案介绍

方案1:
AndroidManifest.xml 文件添加属性:
应用适配建议采用meta-data的方式,具体可以参考:https://developer.android.com/guide/practices/screens-distribution.html#MaxAspectRatio

方案2:
添加 android:resizeableActivity =“true”
此设置只针对Activity生效,且增加了此属性该activity也会支持分屏显示。

方案3:
修改AndroidManifest.xml文件,设置targetSdkVersion>=26,就是应用升级到O版本,不需要设置其他任何属性,默认在任何纵横比的屏幕都能全屏显示。(备注:有一种例外情况需要注意,应用如果已经适配到O版本,并且通过meta-data属性android.max_aspect或者是android:MaxAspectRatio属性设置了页面支持的最大纵横比,同时又通过android:resizeableActivity=“false”设置了页面不支持分屏,这个时候系统会按照应用自己设置的最大纵横比决定该页面是否能全屏显示,如果应用设置的最大纵横比比手机屏幕比例小,那应用还是无法全屏显示。)

3.2 华为建议方案

华为建议首选方案3,将应用的API级别升级到O版本(targetSdkVersion>=26),这样在不同比例屏幕下,应用都能自适应全屏显示。但此方案对界面设计的要求也比较高,需保证界面拉伸到不同比例(16:9、18:9、18.9:9、19.5:9、21:9)时,都能正常显示。同时API级别升级到O版本,应用依赖的部分API功能升级,要做兼容性处理。

如果采用方案3的代价过大,建议采用方案1,将最大支持的纵横比设为2.4。这样可以兼容超宽屏产品,一次做好适配。

4. UI适配

通过增加上面适配方案提到的配置,应用在全面屏手机上就能够默认全屏显示了,但是为了避免出现UI异常的问题,还是需要应用自己做一些额外的UI适配工作:

1. 对于列表形式的应用,如:微信、网易新闻等,只是显示的内容变多,基本无影响。

2. 对于整屏的应用,应用为了保证多种屏幕的适配,需遵循Google的适配建议,可以参考Google官网页面中的最佳做法章节进行修改适配。

3. 对于使用整幅图片作为背景时需注意图片的填充方式,否则可能会无法填充整个屏幕。如:使用背景是用ImageView建议将其scaleType设置为CENTER_CROP,其意义是:按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽)。

5. 验证方法

5.1. 远程调试

5.1.1 新用户注册

新用户如需申请使用华为终端开放实验室的云测功能,需加入安卓绿色联盟,成为会员。然后通过以下步骤申请:

1. 登录DevEco平台。

2. 使用所在公司尾缀的邮箱进行帐号注册。

3. 将您新申请的帐号、所在公司、个人姓名及电话、负责的应用名称发送至[email protected],申请成为安卓绿色联盟会员,通过审核后,将为您开通使用权限。

5.1.2 进行远程调试

1. 用注册好的帐号登录。

2. 选择全面屏手机:nova 3e 屏幕纵横比:2.11。

全面屏适配,参考华为文档_第5张图片

3. 点击“立即体验”,上传APK进行调试。

全面屏适配,参考华为文档_第6张图片

5.2 模拟验证

如果没有对应比例屏幕的真机,可使用其他非全面屏手机或者全面屏手机进行模拟验证,通过adb连接手机,执行以下命令,将屏幕显示比例设置为19.5:9比例,验证适配效果:
adb shell wm size 360dpx780dp

全面屏适配,参考华为文档_第7张图片

恢复显示执行以下命令:
adb shell wm size reset

全面屏适配,参考华为文档_第8张图片

你可能感兴趣的:(全面屏适配,参考华为文档)