1. 程式人生 > >android沉浸式狀態列、變色狀態列、透明狀態列、修改狀態列顏色及透明

android沉浸式狀態列、變色狀態列、透明狀態列、修改狀態列顏色及透明

首先我要區分清楚沉浸式狀態列與變色狀態列。

沉浸式狀態列指的是,狀態列隱藏,在手指做了相關操作後,狀態列顯示出來,例如視訊播放器,在播放視訊時是隱藏狀態列的,但是點選螢幕的時候,狀態列會顯示出來,再例如文字閱讀器,在閱讀的時候是全屏的,然後從螢幕上方下滑或者下方上劃,虛擬鍵和狀態列出現了,但卻是直接覆蓋在程式文字上的,這是所謂的沉浸式狀態列。
那麼大家平時所說的狀態列與導航欄顏色相同,或者透明,指的是變色狀態列,或者透明狀態列。
對於這兩個概念的理解,大家可以參考http://www.androidchina.net/3520.html

v19(4.4)以後開始支援android:windowTranslucentStatus屬性,透明狀態列,而v21(5.0)以後出現變色狀態列,可以自由設定狀態列顏色。
通過這兩個新特性,可以幫助我們快速的實現4.4以後的狀態列與app的導航欄顏色相同。

實現變色導航欄主要是通過styles裡面的theme來實現的:

<resources>

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="BaseAppTheme" parent="AppTheme.Base"
> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <!-- Base application theme. -->
<style name="AppTheme" parent="BaseAppTheme"/> </resources>

首先,在 “values\styles.xml” 中定義一個最基礎的theme,AppTheme.Base,該主題繼承於AppCompat.Light主題,因為本例子中使用了toolbar(谷歌已經建議用toolbar取代actionbar),因此該主題的主要目的是用於隱藏自帶的actionBar,以及設定不顯示title。

<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

接下來定義主題BaseAppTheme,繼承於上面定義的AppTheme.Base主題,該主題定義了三個顏色,分別指定狀態列、toolbar和頁面中重點控制元件的顏色(顏色自己去定義)。

<style name="BaseAppTheme" parent="AppTheme.Base">
    <item name="colorPrimary">@color/colorPrimary</item>    <!-- 狀態列 -->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <!-- toolbar -->
    <item name="colorAccent">@color/colorAccent</item>  <!-- 重點 -->
</style>

對於AppCompat主題中,各個顏色屬性的含義,可以參考下圖

這裡寫圖片描述

然後定義一個AppTheme,繼承於BaseAppTheme,

<style name="AppTheme" parent="BaseAppTheme"/>

在AndroidManifest.xml裡application標籤下設定主題 android:theme="@style/AppTheme"

到此,對於4.4以下的系統,會使用values\styles.xml中的AppTheme主題,那麼在4.4跟5.0這兩個系統下,我們要做以下的處理。

4.4:新建“values-v19\styles.xml”

在裡面定義適用與4.4系統的AppTheme,在4.4系統中提出的是透明狀態列,因此這裡我們定義一個AppTheme繼承於BaseAppTheme,其中只要實現透明狀態列,程式碼如下:

<style name="AppTheme" parent="BaseAppTheme">
    <item name="android:windowTranslucentStatus">true</item>
</style>

5.0:新建“values-v21\styles.xml”

在裡面定義適用與5.0系統的AppTheme,在5.0系統中提出的變色狀態列,因此這裡我們只需定義一個AppTheme繼承於BaseAppTheme程式碼如下:

<style name="AppTheme" parent="BaseAppTheme"/>

注意在佈局檔案中要設定如下屬性,根據其字面意思,理解為,是否適應系統視窗,當設為true的時候,適應系統視窗,佈局時會考慮狀態列的存在;如果設為false,則不考慮狀態列的存在,全屏顯示,狀態列出現在佈局上層,可參考下面效果圖。
android:fitsSystemWindows=”true”

設為true:
這裡寫圖片描述

設為false:
這裡寫圖片描述

完成以上設定以後,就可以達到在4.4系統以上自定義狀態列、導航欄等顏色的目的。

狀態列透明

上面研究的是狀態列與導航欄顏色的設定,那麼如何實現上圖所示的,狀態列、導航欄透明,背景圖片全屏顯示的呢?
按道理想,既然可以設導航欄的顏色,那麼我直接把顏色設成透明色,是不是就可以了呢?
答案是,正解~

不過,還是要處理一些特殊情況。

首先,我們把styles中的顏色設為透明,然後在主頁面根佈局下,設定一個背景圖和設定 android:fitsSystemWindows=”true” 屬性

<style name="BaseAppTheme" parent="AppTheme.Base">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/transparence</item>    <!-- 狀態列 -->
    <item name="colorPrimaryDark">@color/transparence</item> <!-- toolbar -->
    <item name="colorAccent">@color/colorAccent</item>  <!-- 重點 -->
</style>

執行的結果是,在4.4系統上,完全正常顯示,而在5.0上,toolbar正常顯示了透明色,但是狀態列顯示的是灰色透明色
4.4系統:
這裡寫圖片描述

5.0系統:
這裡寫圖片描述
原因應該是,4.4系統支援的就是透明狀態列,所以只需要將狀態列顏色設為透明,即可到達效果。
而5.0支援的是變色狀態列,得到的效果與我們預期不同,特做如下處理:

在程式碼中設定,判斷當sdk大於等於5.0時,執行以下程式碼

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Window window = getWindow();
    window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    window.setStatusBarColor(Color.TRANSPARENT);
}

執行後,在4.4以及5.0系統上都能實現透明效果了,效果圖如下:
這裡寫圖片描述

原始碼下載