Android 實現變色狀態列

標籤：android   沈浸式狀態列   透明狀態列   變色狀態列   著色   

首先我們得瞭解什麼是透明狀態列以及什麼是沈浸式狀態列，以及其區別，國內習慣稱透明狀態列為沈浸式狀態列，但是兩者是有本質區別的。

先來看看什麼是沈浸式模式。

Android 4.4中，沈浸式體驗得到了再次強化，提供了一種“全螢幕模式”(Full-screen Immersive Mode)。全螢幕模式又分兩種，一種叫後撤式 (Lean Back)，另一種叫做沈浸式(Immersive)。後撤式已經在之前的系統中被廣泛使用了——當你在優酷APP中觀看視頻時，大部分時間手指是不會去碰螢幕的。這種情況下，虛擬鍵和狀態列都會自動隱藏，但當你觸控螢幕幕的時候，它們又會出現。而新加入的沈浸式則不太一樣，在沈浸式全屏狀態下，對螢幕的操作並不會喚出系統欄。想要喚出系統欄，你必須從螢幕的上/下邊緣向螢幕內劃入。沈浸式的全屏狀態更適合遊戲和閱讀這樣的應用。

但沉浸模式和普通全屏不同點在於，沉浸模式通過下滑螢幕上方或者下方可以調出虛擬鍵和狀態列。
比如多看閱讀，是在閱讀時沉浸模式下全屏。

然後從螢幕上方下滑或者下方上劃，虛擬鍵和狀態列出現了。但卻是直接覆蓋在程式文字上的。

而沈浸式狀態列的來源就是很多手機用的是實體按鍵，沒有虛擬鍵，於是開了沉浸模式就只有狀態列消失了。於是沉浸模式成了沈浸式狀態列。

Android 4.4 一個很重要的改變就是透明系統欄.。新的系統欄是漸層透明的, 可以最大限度的允許螢幕顯示更多內容, 也可以讓系統欄和 Action Bar 融為一體, 僅僅留下最低限度的背景保護以免通知通知欄內容和 Action Bar 文字/表徵圖難以識別。Google把這種效果稱之為：Translucent Bar。

Translucent Bar 是 Android 對 Edge to Edge 嘗試中的一個, 也是最容易被使用者注意到的. 它的初始目的就是要最大化可視面積和淡化系統介面的存在感。

其實簡單一點就是布局延伸到狀態列，狀態列背景與應用背景相同，這就是*透明狀態列*。最直接的例子就是UC瀏覽器的天氣介面，其布局延伸到狀態列，但是狀態列與應用同背景，

但是這樣有時候會把狀態列顏色變得和應用的背景顏色一樣，但是實際上只是修改了狀態列的顏色，我們稱它為變色狀態列

而現在大家所在用的QQ等軟體，狀態列與軟體顏色融為一體，其實就是變色狀態列。而小米MIUI的內建應用，也都是變色狀態列或者是透明狀態列，而並非是沈浸式狀態列。

這裡我們姑且稱變色狀態列為透明狀態列的一種，本篇文章就是帶大家實現這種透明狀態列。

由於這種效果只有在4.4及以上有效，所以本篇文章的效果只有在4.4及以上有效。

首先應用主題

<resources>    <style name="AppTheme" parent="@style/BaseTheme">    </style>    <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    </style></resources>

然後我們在res下建立一個values-v19的目錄，代表最低API為19，建立一個style.xml，下面的代碼是透明狀態列的關鍵

<resources>    <style name="AppTheme" parent="@style/BaseTheme">        <item name="android:windowTranslucentNavigation">true</item>        <item name="android:windowTranslucentStatus">true</item>    </style></resources>

我們禁用了系統的ActionBar，使用ToolBar代替，布局代碼如下

<LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="?attr/colorPrimary"        android:fitsSystemWindows="true"        ></android.support.v7.widget.Toolbar></LinearLayout>

細心的你會發現在Toolbar中加入了android:fitsSystemWindows=”true”屬性，這就是將布局延伸到狀態列，這時候你運行一下，會發現Toolbar上移到了狀態列的位置。上移的高度剛好是狀態列的高度。

但是我們並不想它移動到上面，只是想它狀態列和Toolbar顏色一樣，要怎麼做的，很簡單，在代碼中通過setSupportActionBar設定到ActionBar的位置即可。

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(mToolbar);

之後的效果就是這樣的。

很明顯的看到，ToolBar就是之前的高度，但是狀態列也變色了。

但是我們又怎麼能滿足於此呢。在Android 5.0上，我們的狀態列的顏色是要比Toolbar的顏色要深的。就像這樣。

我們還要進一步修飾，需要對狀態列著色，這裡需要用到一個開源庫SystemBarTint

加入依賴

  compile ‘com.readystatesoftware.systembartint:systembartint:1.0.3‘

之後再設定布局後加入以下代碼

SystemBarTintManager tintManager=new SystemBarTintManager(this);tintManager.setStatusBarTintResource(R.color.colorPrimaryDark);tintManager.setStatusBarTintEnabled(true);

最終效果就是所示

當然這個庫裡還有很多函數，具體功能自己去琢磨吧，並且其內部源碼也並不複雜，建議還是看下其源碼實現。

本篇文章的源碼簡單，就不上源碼了。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android 實現變色狀態列