欢迎光临
专注android技术,聚焦行业精粹,我们一直在努力

Android刘海屏适配详细分析和实战经验分享

本文将会从以下3个方面介绍刘海屏适配,先了解刘海屏在android平台的历史背景,然后全面了解国内的差异化适配和Android P 版本出来后的适配,最后通过实战的例子让我们更深刻了解刘海屏的适配过程。

  • 历史背景
  • 如何适配刘海屏
  • 接入实战和难点设计

1、历史背景

刘海屏对于android平台的影响我认为分为2个阶段:

  1. ios最早提出的刘海屏的概念,并发布首台带刘海屏的手机。国产手机厂商已经等不及google对刘海屏的支持更新,纷纷推出了自己的刘海屏手机,并提出了很多的概念:刘海屏,水滴屏等。
  2. 而google已经发现这个趋势已不能避免,开始在Android P(即9.0版本)开始提供获取刘海缺口(cutout)尺寸的接口了。国内的四大厂商也都明确的表明自己在Android9.0版本将遵循google的接口协议,而对于8.0版本中各大厂商自定义的获取刘海尺寸的接口,有的厂商表示在9.0版本不再兼容(例如:小米),有的则表示也会继续兼容。

划重点就是:

  1. 国内很多大厂商(例如:Oppo, Vivio, 华为,小米)在android8.0提供了各自的刘海屏相关的接口,出现了不统一的问题
  2. Android9.0版本统一了刘海屏相关的接口,解决了不统一的问题

 

2、如何适配刘海屏

2.1、适配的建议

适配的建议内容部分需要避开凹槽区域,由背景填充凹槽区域。刘海区域是被遮挡的区域,这一块区域我们称为“危险区域”,那么与它相邻的两个区域我们形象的称之为“耳朵区”,那么原则就是即便我们拿到了“耳朵区”的位置和尺寸,我们还是建议不要把关键的内容或者按钮放在这块区域,更不能放在“危险区域”。

2.2、各大厂商在8.0的处理思路

我整理完国内四大厂商对刘海屏的各自的接口协议,他们对刘海屏的处理主要包含2个部分:

1)提供刘海区域的宽高信息(通常它们都是居中的,所以位置需要自己去计算)。提供的方式包括:系统属性,反射,或者告诉你屏幕的高宽比对应的刘海区域的固定尺寸这3种方式

2)设置使用“耳朵区”的方式。也包括两种方式:

  • 可以在manifest针对app, activity或者代码里面通过window flag方式,分别在全局应用级别,activity级别,单个window级别设置是否使用耳朵区
  • 或者在系统设置里面针对某个app设置是否使用耳朵区

3)获取是否有刘海,和提供刘海区的宽高信息的方式类似,提供了反射,固定宽高比对应固定刘海尺寸,系统资源常量这3种方式

2.3、如何适配耳朵区

这是这篇文章的第一个重点,分为两个部分:

  1. 国内主流厂商的android8.0系统版本适配
  2. android9.0适配

2.3.1、适配前准备

不管哪个系统版本的手机,它们有一个默认统一的共性是(不包括三星的挖孔屏):

  • 刘海在手机顶部水平居中
  • 刘海的高度略小于系统状态栏的高度
  • 默认不使用“耳朵区”,需要手动设置

记住这3个点,对我们接下来具体实现会有帮助。这里也引申出一个点是应用要想使用“耳朵区”那么它首先得是全屏显示的。那么如何设置app全屏显示呢,可以这样做:

View.SYSTEM_UI_FLAG_FULLSCREEN

> 隐藏状态栏,点击屏幕区域不会出现,需要从状态栏位置下拉才会出现。

View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

> 将布局内容拓展到状态栏(status bar)的后面。

 

2.3.2、国内主流厂商 android 8.0 系统版本适配

首先写这篇文章的时候是2019年3月19日,此时Android已经除了Q(10.0)版本的beta版,相信此时即使这四大厂商再出8.0版本的新刘海屏手机可能性也是非常小的。

先来一张图,有个整体的认识

2.3.2.1、华为

华为刘海屏手机安卓O版本适配指导

设置使用耳朵区

使用新增的Meta-data属性android.notch_support,在应用的AndroidManifest.xml中增加meta-data属性,此属性不仅可以针对Application生效,也可以对Activity配置生效。

1. 具体方式如下所示:

其它的更详细的方式,请参考上面贴出的官方详细文档

判断是否有刘海屏

华为有3个接口获取刘海的信息:是否有刘海,刘海的尺寸,设置里面是否开启使用刘海区域

华为的刘海屏处理特性:系统设置里面的开关为总开关,即便你在manifest里面申明了需要使用耳朵区,但如果在系统设置里面设置了关闭使用耳朵区,则应用顶部会被刘海挤下去,留出一条刘海高度的黑边。

获取刘海的尺寸

2.3.2.2、 ViVO

全面屏应用适配指南

设置使用耳朵区

应用级别无法设置是否使用耳朵区,需要用户在设置>显示与亮度>第三方应用显示比例(VIVO X21)中对这个应用开启才行,如下图所示勾选全屏显示

如果想要让应用在VIVO手机默认勾选“全屏显示”,我咨询过VIVO的技术同学,他们这么回复:

适配好刘海屏机型的包上传商店时,备注:已适配刘海屏机型,请验证

如果商店测试通过,会通知相关人员开启默认全屏,开启的时间需要走单,所以要等

判断是否有刘海屏

需要特别注意的是VIVO有圆角的概念,它的影响和刘海屏是一样的。我们适配时也需要一起考虑。VIVO提供了判断手机设备是否有圆角和刘海屏的接口:

获取刘海的尺寸

vivo的刘海尺寸是固定的:

屏幕高宽占比:19:9
屏幕圆角:24dp
凹槽区域:宽100dp, 高27dp
状态栏高度:32dp

2.3.2.3、OPPO

OPPO凹形屏适配说明

设置使用耳朵区

按照Oppo官方描述:目前在设置 — 显示 — 应用全屏显示 — 凹形区域显示控制,里面有关闭凹形区域开关,用户可通过这个关闭凹形区域避免遮挡

判断是否有刘海屏

获取刘海的尺寸

Oppo刘海的尺寸也是固定的,它的规则为:

采用宽度为1080px,  高度为2280px的圆弧显示屏。 屏幕顶部凹形区域不能显示内容,宽度为324px,  高度为80px

所以我们可以这样获取:

2.3.2.4、小米

小米刘海屏水滴屏 Android O 适配
设置使用耳朵区

和华为的处理方式类似,可以在application和window级别设置使用“耳朵区”的方式。例如在application级别设置的方式如下:

详细请参考官方文档。

判断是否有刘海屏

通过反射获取

小米刘海设置的特性:和华为相反,虽然小米的系统设置里面可以可以控制应用是否使用刘海屏,一旦开发者声明了meta-data,系统就会优先遵从开发者的声明。

获取刘海的尺寸

从系统的res资源中获取

 

2.3.3、android 9.0 适配

官方文档

总结来说Android 官方提供了国内厂商自定义的所有方式:

举个例子:

 

2.3.4、其它机型

目前国内市场上4大厂商的手机占了65%左右,再排除掉8.0版本,剩下的手机占比会比较小。如果需要继续适配还是有一些空间的,例如:三星的挖孔屏,魅族的新款刘海屏手机等。如果简单做的话,我们的兜底处理是将状态栏的高度认为是刘海的高度,屏幕在竖屏情况下的宽度视为刘海的宽度。要记住这些是有前提的,首先应用是全屏,且是8.0系统版本,不是4大厂商。

 

3、接入实战和难点设计

通过上面的分析我们已经非常细的了解了刘海屏的现状,可以完整梳理整个刘海屏尺寸的获取流程如下:

从图中我们可以看出,除了机型和系统版本的适配,我们还需要考虑:是否全屏屏幕方向处理

3.1、是否全屏

判断应用是否全屏并没有想象中那么简单,如上面提到的对于刘海屏一些手机厂商默认是不让你的应用内容延伸到“耳朵区”的,也就是说即便你的应用设置了全屏,而用户在设置里面关闭了全面屏使用,系统也会把你的应用界面挤在刘海区域以下,而上面留出一条包含刘海高度黑色的边。如下图所示:

所以我们需要另一种判断全屏的方式,我提供一种方法,如果不妥的地方欢迎大家留言:

 

3.2、屏幕方向

另一个难点是屏幕方向,我们知道当手机横竖屏切换时宽变成了高,高变成了宽,系统会自动帮我们转换。而刘海区域就不同了,它固定在手机的顶部,随着用户360度旋转会出现在不同的方向上,而应用界面仍然会以正确的方向面向用户。这意味着刘海的区域会遮挡住应用左边,上边,右边,下面的内容。我们在返回刘海的位置和尺寸的时候需要特别考虑这种情况。

一种思路是:首先正确的获取当前手机旋转的方向,然后可以知道当前刘海在哪个方位(还得考虑有上下两个危险区域的情况,例如VIVO的圆角适配),这样就可以根据刘海的尺寸和国内刘海普遍居中这样一个特性得出刘海的具体位置和尺寸信息了。

具体实现思路:先判断当前应用是否固定设置了屏幕方向,如果有则直接使用。如果无则根据屏幕旋转的角度判断具体的旋转方向。

手机有四个旋转方位:

代码示例:

根据方向计算刘海的位置:

 

 

3.3、判断手机厂商

收集了4个手机厂商以及他们旗下品牌手机的参数:

特别注意标红标粗字符串的大小写不能改变,因为这些都是各个厂商自己约定且保证不会改变的。

华为mate: BRAND: HUAWEI, manufacturer: HUAWEI
华为荣耀:BRAND:HONOR, manufacturer: HUAWEI
OPPO: BRAND: OPPO, manufacturer: OPPO
VIVO : BRAND: vivo, manufacturer: vivo
小米:brand: xiaomi, manufacturer: Xiaomi

4、结束语

总揽了一下,这篇文章应该是目前全网最良心的了,喜欢的朋友欢迎讨论和点赞

赞(2) 打赏
未经允许不得转载:花花鞋 » Android刘海屏适配详细分析和实战经验分享
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

国内精品Android技术社区

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏