华为全面屏适配技术指导

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之间。

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

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

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

           

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

3. 适配方案

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

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

3.1 可选适配方案介绍

方案1:
AndroidManifest.xml 文件添加属性: <meta-data android:name="android.max_aspect" android:value="2.4" />
应用适配建议采用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. 将您新申请的帐号、所在公司、个人姓名及电话、负责的应用名称发送至deveco@huawei.com,申请成为安卓绿色联盟会员,通过审核后,将为您开通使用权限。

5.1.2 进行远程调试

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

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

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

5.2 模拟验证

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

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

全面屏适配,参考华为文档相关推荐

  1. Android全面屏适配

    什么是全面屏 概念 很多人可能把全面屏跟曲面屏混淆,其实这是两个不同的概念. 一般手机的屏幕纵横比为16:9,如1080x1920.1440x2560等,其比值为1.777777--,全面屏手机出现之 ...

  2. 全面屏适配方案,终极版,华为隐藏导航栏解决方案

    全面屏适配方案,终极版,华为隐藏导航栏解决方案 参考文章: (1)全面屏适配方案,终极版,华为隐藏导航栏解决方案 (2)https://www.cnblogs.com/lizhanqi/p/93371 ...

  3. Android全面屏适配问题:华为p40

    华为p40,android 全面屏适配问题: 解决方案: AndroidManifest.xml里面如下几处修改: <?xml version="1.0" encoding= ...

  4. python壁纸超清全面屏_iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案

    iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案 前言 全面屏刚出时,网上有说反人类.但过去这么久了,趋于技术的进步或看久了,大家也都慢慢习惯了(只是笔者还是买不起全面屏).官方适配中文版文档也 ...

  5. Android刘海屏、水滴屏全面屏适配

    现在,市面上的屏幕尺寸和全面屏方案五花八门.这里我使用了小米的图来说明: 上述两种屏幕都可以统称为刘海屏,不过对于右侧较小的刘海,业界一般称为水滴屏或美人尖.为便于说明,后文提到的「刘海屏」「刘海区」 ...

  6. Android刘海屏、水滴屏全面屏适配详解

    现在,市面上的屏幕尺寸和全面屏方案五花八门.这里我使用了小米的图来说明: 上述两种屏幕都可以统称为刘海屏,不过对于右侧较小的刘海,业界一般称为水滴屏或美人尖.为便于说明,后文提到的「刘海屏」「刘海区」 ...

  7. Android刘海屏、水滴屏全面屏适配。

    现在,市面上的屏幕尺寸和全面屏方案五花八门.这里我使用了小米的图来说明:上述两种屏幕都可以统称为刘海屏,不过对于右侧较小的刘海,业界一般称为水滴屏或美人尖.为便于说明,后文提到的「刘海屏」「刘海区」都 ...

  8. 一些可以参考的文档集合10

    之前的文章集合: 一些可以参考文章集合1_xuejianxinokok的博客-CSDN博客 一些可以参考文章集合2_xuejianxinokok的博客-CSDN博客 一些可以参考的文档集合3_xuej ...

  9. 一些可以参考的文档集合9

    之前的文章集合: 一些可以参考文章集合1_xuejianxinokok的博客-CSDN博客 一些可以参考文章集合2_xuejianxinokok的博客-CSDN博客 一些可以参考的文档集合3_xuej ...

最新文章

  1. 使用mysql内连接查询年龄_Mysql的连表查询
  2. xilinx FPGA的远程更新(动态加载)详解(Using a Microprocessor to Configure 7 Series FPGAs)
  3. Java Web学习总结(12)——使用Session防止表单重复提交
  4. web Server支持 perl
  5. YOLOV5+Deepsort行人跟踪初探
  6. python c/s模式下的内存监控模拟代码
  7. 为什么visio输出图片俩边有留白_Microsoft Office Visio导出图片添加边界的操作教程...
  8. MQTT-mosquitto学习笔记
  9. 仿今日头条项目——首页(文章搜索)
  10. 遇到“服务器内部错误http500怎么办?
  11. 一键迁移知乎文章到CSDN
  12. 高中信息技术html语言,高中信息技术《Python语言》模块试卷
  13. 采用 bsdiff 开源库 Android 的增量更新,差分更新 服务器端客户端
  14. 数据输出延迟时长测试方案
  15. 利用CCA进行故障检测
  16. awt绘图应用--桌上弹球
  17. 【转】Numpy 数学函数及代数运算
  18. 谷歌浏览器播放百度云视频倍速方法
  19. python selenium批量在豆瓣租房上 发帖子
  20. 如何做好新项目的需求调研?(一)

热门文章

  1. Live Wallpaper HD for Mac(高清桌面动态壁纸)
  2. 乐学成语——第一部分
  3. 如果高考考Python,这些题目你会做吗?
  4. 日系无缝背景_无缝重复背景的20种模式教程
  5. 东华OJ基础题76 字符串排序
  6. 东华oj-进阶题第66题-字符串统计
  7. 基于STM32单片机远程浇花花盆GSM短信浇水补光设计原理图程序
  8. 网格搜索GridSearchCV方法的参数parm_grid设置
  9. web前端开发入门视频教程 前端架构师课程
  10. vue2到vue3中插槽slot变化详解---从slot,slot-scope到v-slot的变化