關(guān)于“沉浸式狀態(tài)欄”這種叫法，有的朋友可能會(huì)覺得不妥。但是目前網(wǎng)上大部分講到“沉浸式狀態(tài)欄”基本都是指“透明狀態(tài)欄”，所以這里就不討論其對(duì)錯(cuò)了(其實(shí)有時(shí)候錯(cuò)的多了，也就成了對(duì)的了)，大家知道是說(shuō)的“透明狀態(tài)欄”就行了，下文都是稱這種效果為“沉浸式狀態(tài)欄”。

在Android 4.4之前，所有應(yīng)用都是無(wú)法設(shè)置狀態(tài)欄的背景顏色的，都是跟著系統(tǒng)來(lái)的(黑色背景狀態(tài)欄)，一塊黑色的狀態(tài)欄和應(yīng)用非常不搭調(diào)。為了提供更好的交互效果，Google在Android 4.4之后提供了設(shè)置沉浸式狀態(tài)欄的方法。支持沉浸式狀態(tài)欄的App的界面顯得逼格更高一點(diǎn)，因此隨手記Android客戶端也在年初的時(shí)候也支持了沉浸式狀態(tài)欄。在實(shí)現(xiàn)沉浸式狀態(tài)欄效果的過(guò)程中踩了不少的坑，特此記錄下來(lái)。 下圖為隨手記Android客戶端設(shè)置沉浸式狀態(tài)欄前后的效果對(duì)比圖：

對(duì)比兩種效果，很明顯下面設(shè)置了沉浸式狀態(tài)欄的看上去更協(xié)調(diào)、更美觀一點(diǎn)。

2-如何實(shí)現(xiàn)沉浸式狀態(tài)欄

2.1-Android 4.4以上實(shí)現(xiàn)方式

由于沉浸式狀態(tài)欄設(shè)置是在Android 4.4之后才提供的，所以我們需要對(duì)Android 4.4以上的系統(tǒng)做適配。Android 4.4有兩種方式可以實(shí)現(xiàn)沉浸式狀態(tài)欄，一種是在資源文件中設(shè)置，一種是在代碼中設(shè)置。

2.1.1-資源文件中設(shè)置沉浸式狀態(tài)欄

首先，我們要修改values/styles.xml，在里面添加一個(gè)空的style，繼承自BaseTheme。

然后在values-v19目錄下的styles.xml文件(如果項(xiàng)目中沒有就新建一個(gè)，在4.4以上的系統(tǒng)就會(huì)讀取該目錄下的資源文件)添加如下代碼：

然后將App的主題設(shè)置為AppTheme即可。 注：android:windowTranslucentStatus這個(gè)屬性是v19開始引入的。

2.1.2-在代碼中設(shè)置

在代碼中實(shí)現(xiàn)更為方便一點(diǎn)，我們只需要在BaseActivity中添加一個(gè)FLAG TRANSLUCENT STATUS的flag即可。

通過(guò)上述兩種方法設(shè)置之后，效果圖如下：

我們會(huì)發(fā)現(xiàn)，僅僅通過(guò)上述設(shè)置Toolbar會(huì)頂?shù)綘顟B(tài)欄里面去。通常大家會(huì)想到使用fitsSystemWindows屬性來(lái)解決此問(wèn)題。

fitSystemWindows官方描述：Boolean internal attribute to adjust view layout based on system windows such as the status bar. If true, adjusts the padding of this view to leave space for the system windows. Will only take effect if this view is in a non-embedded activity. 簡(jiǎn)單描述：這個(gè)屬性的作用是讓view可以根據(jù)系統(tǒng)窗口(如status bar)來(lái)調(diào)整自己的布局，如果值為true，就會(huì)調(diào)整view的paingding屬性來(lái)給system windows留出空間(即給view添加一個(gè)值為狀態(tài)欄高度的top padding)。

我們?cè)囍oToolbar設(shè)置一下fitsSystemWindows屬性為true。布局代碼如下：

上面代碼在Android 4.4和Android 5.0+上面對(duì)比效果圖如下：

由上面對(duì)比圖我們可以看出來(lái)，在Android 4.4上面狀態(tài)欄是全透明的，而在Android 5.0+上面狀態(tài)欄是半透明的。

注：有些4.4的系統(tǒng)上面狀態(tài)欄并不是全透明的，而是漸變的。

2.2-Android 5.0以上實(shí)現(xiàn)方式

上面已經(jīng)實(shí)現(xiàn)了沉浸式狀態(tài)欄的效果了，但是如果運(yùn)行在Android 5.0以上的機(jī)器上面，會(huì)發(fā)現(xiàn)大部分手機(jī)會(huì)出現(xiàn)狀態(tài)欄是半透明的。

也有些App在Android 5.0以上就是這種狀態(tài)欄半透明的效果，比如QQ。但是有些產(chǎn)品和設(shè)計(jì)就是想統(tǒng)一風(fēng)格，全部都實(shí)現(xiàn)全透明的狀態(tài)欄。那怎么辦呢?Android自5.0起，又為我們提供了設(shè)置狀態(tài)欄顏色的API，我們可以自己設(shè)置狀態(tài)欄的顏色。

添加上述代碼后再在Android 5.0+上運(yùn)行看效果，狀態(tài)欄已經(jīng)變成全透明了，和上圖Android 4.4效果一樣的，這里就不再附圖了。

2.3-Android 6.0以上設(shè)置狀態(tài)欄字體顏色

大部分手機(jī)默認(rèn)狀態(tài)欄字體顏色是白色的，如果Toolbar或者界面頭部的顏色較淺，那么狀態(tài)欄上白色的字看不怎么清楚。 Android 6.0以后，我們可以使用代碼將狀態(tài)欄字體的顏色設(shè)置為黑色了，代碼如下：

3-踩過(guò)的坑

本以為上面基本已經(jīng)完美實(shí)現(xiàn)了沉浸式狀態(tài)欄了，沒想到測(cè)試的時(shí)候還是發(fā)現(xiàn)了一系列的坑。

3.1-軟鍵盤彈出時(shí)Toolbar被頂上去了

如果在界面中有EditText或者其他輸入框的話，會(huì)發(fā)現(xiàn)當(dāng)軟件盤彈出的時(shí)候Toolbar里面的內(nèi)容都被頂上去了，如下圖所示：

這是為什么呢?經(jīng)研究發(fā)現(xiàn)原來(lái)是fitsSystemWindows屬性搞的鬼。哪個(gè)View設(shè)置了fitsSystemWindows=true，這個(gè)View就會(huì)被軟件盤頂上去。所以說(shuō)，fitsSystemWindows不能亂用，會(huì)有意想不到的坑。 那能不能不用fitsSystemWindows呢?當(dāng)然可以。前面也說(shuō)了，fitsSystemWindows=true的作用是給View增加值為狀態(tài)欄高度的padding，那我們何不自己手動(dòng)給Toolbar添加padding呢? 我們?nèi)サ鬞oolbar上的fitsSystemWindows屬性，并設(shè)置一下Toolbar的padding，代碼如下：

去掉Toolbar的fitsSystemWindows屬性，并加上上面的代碼，軟鍵盤彈出時(shí)Toolbar正常了。 目前隨手記Android項(xiàng)目中就是使用代碼添加padding的方式替代fitsSystemWindows屬性的。

3.2-軟鍵盤彈出時(shí)EditText等輸入框會(huì)被軟件盤覆蓋掉

上面軟件盤將Toolbar頂上去的示例圖中，我們還會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，就是軟鍵盤彈出時(shí)EditText并沒有跟著彈出來(lái)而是被軟鍵盤覆蓋掉了。

上面說(shuō)Toolbar加了fitsSystemWindows屬性之后會(huì)被軟鍵盤頂上去，那么我們給輸入框加一個(gè)fitsSystemWindows屬性是否剛好就能解決輸入框被覆蓋的問(wèn)題呢?果斷試一下!

試了之后發(fā)現(xiàn)，果然可以，但是輸入框的高度變了，其實(shí)是輸入框的padding增加了狀態(tài)欄的高度。很顯然，這并不是一個(gè)很好的解決方式。 后來(lái)在stackoverflow上找到了一個(gè)解決方法：解決FLAG TRANSLUCENT STATUS導(dǎo)致輸入框被軟鍵盤覆蓋的解決方案

我們對(duì)其做了點(diǎn)調(diào)整，代碼如下：

添加上面的類，然后在Activity的onCreate方法中的setContentView后面加上如下代碼：

然后運(yùn)行，輸入框能夠正常被頂上去，而且輸入框的布局又沒有受到影響。

該方案的原理是，給界面的根布局設(shè)置一個(gè)監(jiān)聽器，當(dāng)界面大小有變化的時(shí)候，如鍵盤彈出的時(shí)候，重新設(shè)置一下根布局的高度，再調(diào)用requestLayout對(duì)界面進(jìn)行重繪。

目前隨手記Android就是使用這個(gè)方案，截止到目前也沒有發(fā)現(xiàn)這種方案會(huì)帶來(lái)其他什么問(wèn)題。

3.3-華為EMUI3.1上的坑

將上面的沉浸式代碼放在EMUI3.1系統(tǒng)的手機(jī)(如華為榮耀7)上面跑，會(huì)發(fā)現(xiàn)根本沒有沉浸式效果，狀態(tài)欄是透明的，顯示的是桌面上的顏色，如下圖：

經(jīng)驗(yàn)證，原來(lái)是EMUI3.1系統(tǒng)的原因，很多App也是在EMUI3.0上有沉浸式的效果，到了EMUI3.1卻沒有效果了。在EMUI3.1沒有沉浸式效果如果和4.4以前一樣是黑的也就算了，這樣透明的顯示桌面顏色實(shí)在難看。 后來(lái)發(fā)現(xiàn)去掉下面這句代碼，可以讓其有沉浸式的效果。

效果如下：

不過(guò)它的狀態(tài)欄不是全透明的，而是像某些4.4的系統(tǒng)一樣是漸變的，不過(guò)總比顯示桌面顏色的效果好。 這里我們加一個(gè)判斷，判斷如果不是EMUI3.1的系統(tǒng)，才調(diào)用clearFlags清除掉FLAG TRANSLUCENT STATUS。 具體代碼如下：

3.4-CoordinatorLayout+AppBarLayout滾動(dòng)隱藏導(dǎo)航欄遇到沉浸式狀態(tài)欄的坑

這個(gè)坑主要是在做理財(cái)頭條需求的時(shí)候碰到的。

需求背景：頭條功能需要實(shí)現(xiàn)二級(jí)TabLayout導(dǎo)航，第一級(jí)是Toolbar(頭條、產(chǎn)品和發(fā)現(xiàn))，第二級(jí)是是頭條里面各個(gè)欄目切換的TabLayout。需要實(shí)現(xiàn)的效果是，在頭條Fragment中，滑動(dòng)帖子列表可以隱藏和顯示一級(jí)導(dǎo)航Toolbar。一級(jí)導(dǎo)航Toolbar顯示的時(shí)候，左右滑動(dòng)是切換一級(jí)導(dǎo)航的Tab(即頭條、發(fā)現(xiàn)和產(chǎn)品)。當(dāng)在頭條Fragment中上滑滾動(dòng)帖子列表隱藏一級(jí)導(dǎo)航Toolbar后，左右滑動(dòng)是切換二級(jí)導(dǎo)航的tab(即頭條各個(gè)欄目)。效果見下圖。

滾動(dòng)列表隱藏和顯示Toolbar，首先肯定是想到CoordinatorLayout+AppBarLayout?；陧?xiàng)目中已實(shí)現(xiàn)的沉浸式效果，添加修改Activity中的布局：

布局是在Toolbar中添加一個(gè)TabLayout作為一級(jí)導(dǎo)航的tab。然后使用一個(gè)ViewPager，給該ViewPager添加了三個(gè)Fragment，分別是頭條、產(chǎn)品和發(fā)現(xiàn)的Fragment。其中，頭條Fragment中又嵌套了TabLayout和ViewPager。 基于沉浸式的實(shí)現(xiàn)方案，在代碼中給AppBarLayout添加一個(gè)狀態(tài)欄高度的padding。本以為可以大功告成了，結(jié)果發(fā)現(xiàn)運(yùn)行之后，在上滑隱藏AppBarLayout之后再下拉，會(huì)超出下拉范圍，也就是下拉的時(shí)候會(huì)多出一條狀態(tài)欄高度的空白，效果如下圖頂部：

經(jīng)過(guò)不斷嘗試和探索，發(fā)現(xiàn)給Activity添加如下flag即可:

嗯，不錯(cuò)，滑動(dòng)問(wèn)題解決了。但心里總是不安，總感覺有坑。后面發(fā)現(xiàn)確實(shí)有坑，添加了這個(gè)flag后，部分帶虛擬按鍵的華為手機(jī)出現(xiàn)虛擬按鍵擋住底部布局的問(wèn)題，經(jīng)驗(yàn)證只有EMUI3.1才有這個(gè)問(wèn)題(又是EMUI3.1，已無(wú)力吐槽)。 最后百般周折，終于找到有效解決CoordinatorLayout+AppBarLayout并給AppBarLayout設(shè)置paddingtop之后的滑動(dòng)問(wèn)題的方法了。

本以為上面解決方案已經(jīng)完美沒有任何問(wèn)題了，沒想到還是有坑。不久后測(cè)試發(fā)現(xiàn)一個(gè)現(xiàn)網(wǎng)問(wèn)題：當(dāng)WebView中的輸入框獲取焦點(diǎn)軟鍵盤彈出后，退出界面時(shí)底部布局出現(xiàn)軟鍵盤大小的黑塊。如下圖所示:

經(jīng)排查，此問(wèn)題就是由于上面那段代碼引起的。 沒辦法，只能去掉上面那段代碼，尋找另外的解決方案來(lái)處理CoordinatorLayout+AppBarLayout并給AppBarLayout設(shè)置paddingtop的滑動(dòng)問(wèn)題了。 后來(lái)在發(fā)現(xiàn)在Activity的onCreate方法中加上下面一段代碼就可以完美解決這個(gè)問(wèn)題。

4-總結(jié)

上面就是隨手記Android項(xiàng)目中沉浸式狀態(tài)欄實(shí)現(xiàn)過(guò)程中遇到的坑以及解決方案。最終隨手記Android實(shí)現(xiàn)狀態(tài)欄效果后在不同機(jī)型上面效果圖如下：

經(jīng)過(guò)沉浸式狀態(tài)欄的開發(fā)，發(fā)現(xiàn)幾個(gè)容易踩的坑需要注意： 1.fitsSystemWindows=true要慎用，很多坑。比如WebView中輸入框獲取焦點(diǎn)彈出軟鍵盤時(shí)出現(xiàn)抖動(dòng)，還有哪個(gè)View設(shè)置了fitsSystemWindows=true軟鍵盤彈出時(shí)哪個(gè)View就會(huì)被頂上去; 2.WindowManager.LayoutParams.FLAG LAYOUT NO_LIMITS不要用，會(huì)導(dǎo)致EMUI3.1的系統(tǒng)下面虛擬按鍵擋住布局。