[[225814]]

 一、序

Hi，大家好，我是承香墨影！

Apple 一直在***設(shè)計(jì)的潮流，自從 iPhone X 發(fā)布之后，"劉海屏" 就一直存在爭(zhēng)議。不過(guò)不管你怎樣，Android 也要躋入 "劉海屏" 的行列，尤其是 Android P 發(fā)布之后，也從系統(tǒng)級(jí)支持頂部凹槽屏幕設(shè)計(jì)。

很多廠商也在逐漸推出 “劉海屏” 設(shè)計(jì)的手機(jī)，在國(guó)內(nèi)比較常見(jiàn)的就是 OPPO x21 和 華為 P20。

屏幕不一樣了，迎來(lái)的就是一些適配上的問(wèn)題。今天就來(lái)聊聊，Android 的 “劉海屏”，以及我們?nèi)绾稳ミm配它。

二、劉海屏的背景介紹

2.1 背景介紹

劉海屏的外觀，我想大家應(yīng)該都有概念，不過(guò)不同廠商劉海屏的實(shí)現(xiàn)方式也有所不太，這一點(diǎn)需要先有個(gè)概念。

就現(xiàn)在市場(chǎng)上的情況來(lái)說(shuō)，會(huì)區(qū)分成兩類(lèi)，一類(lèi)是標(biāo)準(zhǔn)的 Android P Api，另外一類(lèi)就是廠商在 Android P 以下的系統(tǒng)，做的特殊適配。

例如：華為 P20 就是采用的 Android P 標(biāo)準(zhǔn) Api 的方式，而 OPPO x21 就不一樣了，它有自己的適配 Api。

2.2 那些需要單獨(dú)適配

就算是增加了劉海屏，你也可以發(fā)現(xiàn)，大部分都是“切割”的狀態(tài)欄的區(qū)域，所以就面臨了三種情況。

1. 有狀態(tài)欄的頁(yè)面，不會(huì)收到劉海屏的影響。
2. 全屏未適配劉海屏的頁(yè)面，系統(tǒng)會(huì)對(duì)劉海屏區(qū)域進(jìn)行切割，讓整體 UI 頁(yè)面做下移處理，避開(kāi)劉海屏的顯示。
3. 全屏已適配劉海屏的頁(yè)面，可以兼容劉海屏，做到真正的全屏顯示。

后面會(huì)單獨(dú)講解這幾種方式的區(qū)別。

2.3 搶先體驗(yàn) Android P

在手邊沒(méi)有對(duì)應(yīng)系統(tǒng)的設(shè)備的時(shí)候，模擬器是一條不錯(cuò)的路，最近 Google 也發(fā)布了 Android P 的模擬器，還有一個(gè)辦法就是找一些支持真機(jī)云測(cè)的平臺(tái)，租用一臺(tái)需要的遠(yuǎn)程設(shè)備，也是一個(gè)解決方案。

我這里選擇 Android P 的模擬器，有需要自己更新 SDK ，無(wú)腦下載更新就好。

劉海的凹槽區(qū)域，大部分是為了給攝像頭或者其他傳感器留出區(qū)域。而在沒(méi)有劉海的設(shè)備或者模擬器上，可以通過(guò)開(kāi)發(fā)者選項(xiàng)里的 “Simulate a display with a cutout”，開(kāi)啟劉海屏的支持。

如果你把所有的模式都試過(guò)一遍，你會(huì)發(fā)現(xiàn)，其實(shí)劉海屏的劉海，在 Android P 上，是有多種樣式的，并非統(tǒng)一的。

2.4 劉海屏的適配

2.2 也講清楚了，劉海屏的切割區(qū)域，都存在于狀態(tài)欄上，所以在有狀態(tài)欄的頁(yè)面上，是無(wú)需我們特殊處理的，系統(tǒng)會(huì)幫我們處理好。

而對(duì)于全屏的頁(yè)面，就需要單獨(dú)的處理了。我這里，簡(jiǎn)單做了一個(gè)全屏頁(yè)面，每個(gè)橫條都是等寬的這樣能看到布局上的差異。

從左至右分別是：關(guān)閉劉海屏、開(kāi)啟劉海屏但不支持、適配劉海屏。

一個(gè)全屏的頁(yè)面，當(dāng)沒(méi)有支持劉海屏又碰到了劉海屏，會(huì)導(dǎo)致 UI 下沉，如果這不是一個(gè)列表的布局，底部的控件就會(huì)被遮擋。

例如下面這樣的情況：

圖片來(lái)自：華為適配指南

還有一些被劉海遮擋區(qū)域的效果，其實(shí)主要是依賴(lài) UI 設(shè)計(jì)師來(lái)規(guī)避了，不要在可能出現(xiàn)劉海切割的地方，設(shè)計(jì)可操作的區(qū)域，影響用戶(hù)操作。

三、技術(shù)適配劉海屏

說(shuō)那么多，最終我們還是需要用技術(shù)的方式來(lái)適配劉海屏。Android P 的劉海屏，是有標(biāo)準(zhǔn)的 Api 來(lái)進(jìn)行適配，而對(duì)于一些廠商自己的劉海屏設(shè)備，例如：OPPO x21，就需要遵循它的開(kāi)發(fā)文檔進(jìn)行單獨(dú)適配。

Android P 為***的劉海屏，提供了專(zhuān)門(mén)的 Api 來(lái)支持：DisplayCutout。

3.1 開(kāi)啟劉海屏

我們?cè)谌恋捻?yè)面，需要單獨(dú)開(kāi)啟支持劉海屏。而 Google 提供的適配方案，可以設(shè)置是否在全屏模式下，使用劉海屏的區(qū)域。

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 劉海屏的高度

在全屏模式下，我們需要有辦法獲取到劉海屏凹槽的高度，才可以做到設(shè)計(jì)和布局的時(shí)候，留出安全距離。

雖然 Google 要求，劉海屏的凹槽，必須和劉海的高度保持一致，而劉海屏又被隱藏在狀態(tài)欄了，所以有一個(gè)思路是直接獲取狀態(tài)欄的高度，來(lái)判斷劉海之外，可布局的安全區(qū)域。

不過(guò) Android P 已經(jīng)預(yù)留出了標(biāo)準(zhǔn)的測(cè)量 劉海屏凹槽 的 Api：DisplayCutout。

劉海屏的凹槽，就在屏幕的中間，所以只有 getSafeInsetTop() 方法返回的結(jié)果，是我們需要的，而其他的 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); 

得到的結(jié)果，也可以看一下：

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

3.3 非標(biāo)準(zhǔn) Api

像 OPPO 這樣的廠商，實(shí)現(xiàn)劉海屏的方式，也并不是按照 Android P 的標(biāo)準(zhǔn)做的，它完全是自己修改了劉海屏的實(shí)現(xiàn)方式。不過(guò)好在，都是會(huì)提供完備的適配文檔，這就需要我們直接閱讀他們提供的開(kāi)發(fā)文檔來(lái)進(jìn)行適配。

oppo 的劉海屏適配文檔：

• https://open.oppomobile.com/wiki/doc#id=10139

對(duì)于 OPPO 而言，它劉海的高度是固定的，就是 80px。

判斷當(dāng)前設(shè)備是否是劉海屏，也提供了對(duì)應(yīng)的 Api，可以用以下方法獲取。

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

返回 true 為劉海屏，但是這種方法只能識(shí)別 OPPO 品牌所支持的劉海屏。

四、結(jié)語(yǔ)

看完本篇文章，我想你對(duì) Android 的劉海屏也有一定的認(rèn)識(shí)了。這是一個(gè)全新的適配技術(shù)，現(xiàn)在還不確定不同廠商會(huì)不會(huì)對(duì)其微調(diào)，所以你要是碰到什么問(wèn)題，不妨在留言區(qū)留言討論。

【本文為51CTO專(zhuān)欄作者“張旸”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過(guò)微信公眾號(hào)聯(lián)系作者獲取授權(quán)】

戳這里，看該作者更多好文