前言
本文總結(jié) Android 實(shí)現(xiàn)沉浸式全屏的實(shí)現(xiàn)方式。
實(shí)現(xiàn)沉浸式全屏
在一些需要全屏顯示的場(chǎng)景下，比如玩游戲、看橫屏視頻的時(shí)候，內(nèi)容全屏，占滿(mǎn)窗口的體驗(yàn)會(huì)讓用戶(hù)更加沉浸到對(duì)內(nèi)容的消費(fèi)中，帶來(lái)好的用戶(hù)體驗(yàn)。
沉浸式顯示具體來(lái)說(shuō)就是如狀態(tài)欄和導(dǎo)航欄部分的顯示效果調(diào)整。當(dāng)然，這里對(duì)于不同的產(chǎn)品形態(tài)會(huì)有不同的選擇，狀態(tài)欄文本的顏色、狀態(tài)欄本身的背景色、導(dǎo)航欄的背景色以及是否顯示，通過(guò)這些組合可以呈現(xiàn)出不同的用戶(hù)體驗(yàn)。下面就從這兩個(gè)組件的使用出發(fā)，看看實(shí)現(xiàn)沉浸式狀態(tài)欄的方法。
狀態(tài)欄
狀態(tài)欄背景色
關(guān)于狀態(tài)欄，首先是狀態(tài)欄背景色, 這個(gè)根據(jù)需要設(shè)置就好了，一般情況下設(shè)置為透明比較好適配。
window.statusBarColor = Color.TRANSPARENT
狀態(tài)欄文字顏色
關(guān)于狀態(tài)欄、導(dǎo)航欄的其他操作，我們可以使用系統(tǒng)的 WindowInsetsControllerCompat 這個(gè)類(lèi)，從名字Compat 就可以看到，這是一個(gè)兼容的類(lèi)。關(guān)于沉浸式狀態(tài)欄的實(shí)現(xiàn)，由于 Android 在國(guó)內(nèi)變成了「安卓」，因此早期關(guān)于狀態(tài)各種屬性的適配可以說(shuō)是群魔亂舞，各式各樣的 StatusBarUtils 大行其道?，F(xiàn)在好了，Android 官方終于一統(tǒng)天下，親自下場(chǎng)來(lái)搞了，這下關(guān)于沉浸式的實(shí)現(xiàn)就比較簡(jiǎn)單了。
WindowInsetsControllerCompat 的使用也很簡(jiǎn)單，創(chuàng)建一個(gè)他的實(shí)例即可。
val controller = WindowInsetsControllerCompat(window, window.decorView)
后面的一切使用這個(gè)實(shí)例就可以了，API 很簡(jiǎn)單，命名一目了然。
比如更改狀態(tài)顏色這個(gè)功能。關(guān)于狀態(tài)欄文字的顏色，Android 官方只允許設(shè)置黑色或者白色
controller.isAppearanceLightStatusBars = true // 黑色狀態(tài)欄
// or
controller.isAppearanceLightStatusBars = false // 白色狀態(tài)欄
注意、注意、注意 ，這里的注釋沒(méi)有寫(xiě)錯(cuò)，這個(gè)方法就是這么奇怪，自己一開(kāi)始使用也是被繞暈了。但就是這樣。還有一點(diǎn)需要注意的是，Android 6.0 也就是 Android SDK 23 開(kāi)始，才可以使用這個(gè) feature 。
狀態(tài)欄顯示與隱藏
controller.hide(WindowInsetsCompat.Type.statusBars()) // 狀態(tài)欄隱藏
// or
controller.show(WindowInsetsCompat.Type.statusBars()) // 狀態(tài)欄顯示
這個(gè)就很簡(jiǎn)單了。
導(dǎo)航欄
說(shuō)完了狀態(tài)欄，在來(lái)看導(dǎo)航欄。相比狀態(tài)欄，導(dǎo)航欄上不會(huì)有文字，一般情況下就是一條底部的橫線。因此，我們只需要關(guān)心導(dǎo)航的背景色和可見(jiàn)性即可。
導(dǎo)航欄背景色
window.navigationBarColor = Color.TRANSPARENT
導(dǎo)航欄橫線的顏色
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
window.navigationBarDividerColor = Color.TRANSPARENT
}
從 Android P (28) 也就是 Android 9.0 開(kāi)始，我們甚至可以設(shè)置導(dǎo)航欄橫線的顏色了。
潛在的坑
這里再補(bǔ)充一個(gè)最近遇到的關(guān)于設(shè)置狀態(tài)欄和導(dǎo)航欄顏色的坑。如果當(dāng)前 Activity 的 theme 屬性中包含如下內(nèi)容
<style name="BugTheme" parent="AppTheme">
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
這里的坑就是由這個(gè) Translucent 導(dǎo)致的。Translucent 的意思是半透明，Transparent 的意思才是透明。這兩個(gè)單詞從拼寫(xiě)到發(fā)音都有些相似，理論上說(shuō)二者的效果也是類(lèi)似，無(wú)非就是透明度的值不一樣而已。但就是這細(xì)微的差別，容易導(dǎo)致問(wèn)題。一旦給 Activity 的 theme 設(shè)置了如上的熟悉，那么后續(xù)通過(guò) window.statusBarColor 和 window.navigationBarColor 設(shè)置顏色就不在生效了。
導(dǎo)航欄顯示與隱藏
導(dǎo)航欄顯示與隱藏的方法，和狀態(tài)欄顯示隱藏的方法非常相似，改變一下參數(shù)即可。
controller.hide(WindowInsetsCompat.Type.navigationBars()) // 導(dǎo)航欄隱藏
// or
controller.show(WindowInsetsCompat.Type.navigationBars()) // 導(dǎo)航欄顯示
沉浸式
WindowCompat.setDecorFitsSystemWindows(window, false) // 打開(kāi)沉浸式
// or
WindowCompat.setDecorFitsSystemWindows(window, true) // 關(guān)閉沉浸式
| 沉浸式開(kāi) | 沉浸式關(guān)閉 |
|---|---|
 full_off.png
|
 full_on.png
|
可以看到，使用 WindowInsetsControllerCompat ，沉浸式就是這么簡(jiǎn)單。
適配全面屏
從上面沉浸式的圖，可以看到其實(shí)還是有點(diǎn)問(wèn)題，就是橫屏之后，屏幕左邊并沒(méi)有完全鋪開(kāi)，而是有一段黑邊，看著非常難受了。這其實(shí)是關(guān)于異形屏的適配問(wèn)題。
其實(shí)這段黑邊就是劉海屏的區(qū)域，Android 官方叫做 DisplayCutout area
val params = window.attributes
params.layoutInDisplayCutoutMode =
WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
window.attributes = params
大于等于 Android 9.0 （SDK 28 P）的設(shè)備都支持。關(guān)于 layoutInDisplayCutoutMode 參數(shù)有三種類(lèi)型。
關(guān)于這三個(gè)參數(shù)，還要考慮當(dāng)前屏幕是橫屏還是豎屏。
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
這個(gè)是默認(rèn)參數(shù)。
豎屏狀態(tài)
如果沒(méi)有設(shè)置全屏顯示的屬性，那么內(nèi)容是延伸到 DisplayCutout area 的。這種情況下，如果進(jìn)行全屏和非全屏的切換操作，會(huì)發(fā)現(xiàn)內(nèi)容在整體上下跳動(dòng)。比如在這種情況下，調(diào)用 controller.hide(WindowInsetsCompat.Type.statusBars()) 進(jìn)行狀態(tài)欄的操作，就會(huì)發(fā)現(xiàn)整個(gè)內(nèi)容在上下跳動(dòng)。在上面的動(dòng)圖里很明顯了。
橫屏狀態(tài)
橫屏狀態(tài)下，頂部的狀態(tài)欄就變成左邊或者右邊（這里看屏幕是怎么旋轉(zhuǎn)的，可能是旋轉(zhuǎn)了 -90 度，也可能是 270 度）的黑邊了。內(nèi)容不會(huì)延伸到左右兩邊的 DisplayCutout area 里。
LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
這種情況下，內(nèi)容是默認(rèn)延伸到 DisplayCutout area 的。因此，全屏和非全屏操作的時(shí)候，就不會(huì)有內(nèi)容上下跳動(dòng)或者屏幕上說(shuō)的問(wèn)題。
LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
這種情況，內(nèi)容永遠(yuǎn)不會(huì)延伸到 DisplayCutout area 里面。
關(guān)于 LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT 和 LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES 的區(qū)別，我們用兩張圖比較一下就大概明白了。
| LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT | LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES |
|---|---|
full_on.png
|
 full_full.png
|
可以看到，LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES 模式下，整個(gè)內(nèi)容都撐開(kāi)到劉海的區(qū)域了。屏占比更高了，看著也更舒服了。
總結(jié)
使用官方提供的 WindowInsetsControllerCompat 的系列 API，操作狀態(tài)欄及導(dǎo)航欄，以及沉浸式的實(shí)現(xiàn)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單了，底層處理了各個(gè)版本之間的兼容性。
