2.1.4刘海屏幕适配

2.1.4刘海屏幕适配_第1张图片

android studio模拟刘海屏幕的效果,通过设置模拟器


2.1.4刘海屏幕适配_第2张图片

演示非全屏模式,也就是刘海的高度等于状态栏的高度


2.1.4刘海屏幕适配_第3张图片


2.1.4刘海屏幕适配_第4张图片

全面屏幕显示

案例一:点击小图跳转页面查看大图,用全屏展示


2.1.4刘海屏幕适配_第5张图片

如上结论,全屏时候,如果没有适配刘海,系统会对界面做特殊处理,即屏幕向下移动。

查看WindowManager的源码可以知道android9.0之后新增了一个LayoutParam下面一个属性layoutInDisplayCutoutMode

这个属性有三个常量值。


2.1.4刘海屏幕适配_第6张图片

发现状态栏已经变成白色,说明内容区域已经延伸到刘海区域。为什么是白色呢,原因是我们的顶层布局背景是白色。

我们需要做的是将当前界面做成沉浸式


2.1.4刘海屏幕适配_第7张图片

其中


2.1.4刘海屏幕适配_第8张图片

适配效果:


2.1.4刘海屏幕适配_第9张图片

总结:官方android9.0以上系统刘海适配流程:

1.设置全屏--->2.让内容区域延伸进刘海-->3.设置沉浸式


2.1.4刘海屏幕适配_第10张图片

android官方9.0s适配注意:

1.做刘海适配,需要判断手机是否是刘海屏幕。

 2.需要做系统版本判断

如下:需要判断手机是否是刘海屏幕

2.1.4刘海屏幕适配_第11张图片

注意:在模拟器中这个diplayCutout会返回null,真机不会。

2.1.4刘海屏幕适配_第12张图片

如下:添加系统版本判断,官方的适配是在9.0之后。


2.1.4刘海屏幕适配_第13张图片

案例二:前面我们让图片适配到刘海区域,但是如果是按钮呢?


2.1.4刘海屏幕适配_第14张图片

效果:

2.1.4刘海屏幕适配_第15张图片

出现这种情况的解决方案:

1.设计时候,避开这种设计

2.利用代码将按钮向下移动,移动的距离为刘海的高度,接下来就是讲如何获取刘海的高度。


2.1.4刘海屏幕适配_第16张图片


2.1.4刘海屏幕适配_第17张图片
2.1.4刘海屏幕适配_第18张图片

可能会发现button上面有缝隙,其实是button的背景原因。我们来设置一下背景色


2.1.4刘海屏幕适配_第19张图片
2.1.4刘海屏幕适配_第20张图片

其实还可以设置Button父容器的paddingTop实现这个效果


2.1.4刘海屏幕适配_第21张图片


2.1.4刘海屏幕适配_第22张图片

总结:因为现在有很多手机厂商手机有刘海,所以我们的判断流程:

1.判断手机厂商如小米 华为 OPPO  Vivo

2.判断手机是否刘海屏幕

3.设置是否让内容区域延伸到刘海区域

4.设置控件是否避开刘海区域

5.获取刘海的高度


手机厂商的适配


2.1.4刘海屏幕适配_第23张图片

手机厂商工具类:

github源码

你可能感兴趣的:(2.1.4刘海屏幕适配)