一大波 Android 刘海屏来袭，全网最全适配技巧！

1、序

Hi，你们好，我是承香墨影！

Apple 一直在引领设计的潮流，自从 iPhone X 发布以后，"刘海屏" 就一直存在争议。不过无论你怎样，Android 也要跻入 "刘海屏" 的行列，尤为是 Android P 发布以后，也从系统级支持顶部凹槽屏幕设计。

不少厂商也在逐渐推出 “刘海屏” 设计的手机，在国内比较常见的就是 OPPO R15 和 华为 P20。

屏幕不同了，迎来的就是一些适配上的问题。今天就来聊聊，Android 的 “刘海屏”，以及咱们如何去适配它。

2、刘海屏的背景介绍

2.1 背景介绍

刘海屏的外观，我想你们应该都有概念，不过不一样厂商刘海屏的实现方式也有所不太，这一点须要先有个概念。

就如今市场上的状况来讲，会区分红两类，一类是标准的 Android P Api，另一类就是厂商在 Android P 如下的系统，作的特殊适配。

例如：华为 P20 就是采用的 Android P 标准 Api 的方式，而 OPPO R15 就不同了，它有本身的适配 Api。

2.2 那些须要单独适配

就算是增长了刘海屏，你也能够发现，大部分都是“切割”的状态栏的区域，因此就面临了三种状况。

1. 有状态栏的页面，不会收到刘海屏的影响。
2. 全屏未适配刘海屏的页面，系统会对刘海屏区域进行切割，让总体 UI 页面作下移处理，避开刘海屏的显示。
3. 全屏已适配刘海屏的页面，能够兼容刘海屏，作到真正的全屏显示。

后面会单独讲解这几种方式的区别。

2.3 抢先体验 Android P

在手边没有对应系统的设备的时候，模拟器是一条不错的路，最近 Google 也发布了 Android P 的模拟器，还有一个办法就是找一些支持真机云测的平台，租用一台须要的远程设备，也是一个解决方案。

我这里选择 Android P 的模拟器，有须要本身更新 SDK ，无脑下载更新就好。

刘海的凹槽区域，大部分是为了给摄像头或者其余传感器留出区域。而在没有刘海的设备或者模拟器上，能够经过开发者选项里的 “Simulate a display with a cutout”，开启刘海屏的支持。

若是你把全部的模式都试过一遍，你会发现，其实刘海屏的刘海，在 Android P 上，是有多种样式的，并不是统一的。

2.4 刘海屏的适配

2.2 也讲清楚了，刘海屏的切割区域，都存在于状态栏上，因此在有状态栏的页面上，是无需咱们特殊处理的，系统会帮咱们处理好。

而对于全屏的页面，就须要单独的处理了。我这里，简单作了一个全屏页面，每一个横条都是等宽的这样能看到布局上的差别。

从左至右分别是：关闭刘海屏、开启刘海屏但不支持、适配刘海屏。

一个全屏的页面，当没有支持刘海屏又碰到了刘海屏，会致使 UI 下沉，若是这不是一个列表的布局，底部的控件就会被遮挡。

例以下面这样的状况：

还有一些被刘海遮挡区域的效果，其实主要是依赖 UI 设计师来规避了，不要在可能出现刘海切割的地方，设计可操做的区域，影响用户操做。

3、技术适配刘海屏

说那么多，最终咱们仍是须要用技术的方式来适配刘海屏。Android P 的刘海屏，是有标准的 Api 来进行适配，而对于一些厂商本身的刘海屏设备，例如：OPPO R15，就须要遵循它的开发文档进行单独适配。

Android P 为最新的刘海屏，提供了专门的 Api 来支持：DisplayCutout。

3.1 开启刘海屏

咱们在全屏的页面，须要单独开启支持刘海屏。而 Google 提供的适配方案，能够设置是否在全屏模式下，使用刘海屏的区域。

WindowManager.LayoutParams lp
                =getWindow().getAttributes();
lp.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS;
getWindow().setAttributes(lp);

新的布局属性 layoutInDisplayCutoutMode 包含三种可选的模式，

public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS = 1;
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT = 0;
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER = 2;

3.2 刘海屏的高度

在全屏模式下，咱们须要有办法获取到刘海屏凹槽的高度，才能够作到设计和布局的时候，留出安全距离。

虽然 Google 要求，刘海屏的凹槽，必须和刘海的高度保持一致，而刘海屏又被隐藏在状态栏了，因此有一个思路是直接获取状态栏的高度，来判断刘海以外，可布局的安全区域。

不过 Android P 已经预留出了标准的测量 刘海屏凹槽 的 Api：DisplayCutout。

刘海屏的凹槽，就在屏幕的中间，因此只有 getSafeInsetTop() 方法返回的结果，是咱们须要的，而其余的 getSafeInsetXxx() 方法，直接返回的是 0 。

view.postDelayed(new Runnable() {
    @Override
    public void run() {
        DisplayCutout displayCutout = view.getRootWindowInsets().getDisplayCutout();
        Log.i("cxmyDev", "SafeInsetBottom:" + displayCutout.getSafeInsetBottom());
        Log.i("cxmyDev", "SafeInsetLeft:" + displayCutout.getSafeInsetLeft());
        Log.i("cxmyDev", "SafeInsetRight:" + displayCutout.getSafeInsetRight());
        Log.i("cxmyDev", "SafeInsetTop:" + displayCutout.getSafeInsetTop());
    }
}, 100);

获得的结果，也能够看一下：

I/cxmyDev: SafeInsetBottom:0
I/cxmyDev: SafeInsetLeft:0
I/cxmyDev: SafeInsetRight:0
I/cxmyDev: SafeInsetTop:112

3.3 非标准 Api

像 OPPO 这样的厂商，实现刘海屏的方式，也并非按照 Android P 的标准作的，它彻底是本身修改了刘海屏的实现方式。不过好在，都是会提供完备的适配文档，这就须要咱们直接阅读他们提供的开发文档来进行适配。

oppo 的刘海屏适配文档：

https://open.oppomobile.com/w...

对于 OPPO 而言，它刘海的高度是固定的，就是 80px。

判断当前设备是不是刘海屏，也提供了对应的 Api，能够用如下方法获取。

context.getPackageManager().hasSystemFeature(“com.oppo.feature.screen.heteromorphism”)

返回 true 为刘海屏，可是这种方法只能识别 OPPO 品牌所支持的刘海屏。

4、结语

看完本篇文章，我想你对 Android 的刘海屏也有必定的认识了。这是一个全新的适配技术，如今还不肯定不一样厂商会不会对其微调，因此你要是碰到什么问题，不妨在留言区留言讨论。

今天在公众号后台回复成长『 成长』，将会获得我整理的一些学习资料，也能回复『 加群』，一块儿学习进步。

推荐阅读：

• 漫画：程序员，你能“管理”好你的产品经理吗？
• App 多语言翻译，机器翻译也能快如闪电！
• 2017 最权威区块链报告(内含下载)
• Google 的 Flutter 学习资料！
• 远程控制智能电视，方案已开源！