Android 狀態欄著色實踐

gcep6417 8年前發布 | 6K 次閱讀安卓開發 Android開發移動開發

狀態欄著色，也就是我們經常聽到的沉浸式狀態欄，關于沉浸式的稱呼網上也有很多吐槽的，這里就不做過多討論了，以下我們統稱 狀態欄著色 ，這樣我覺得更加容易理解。

從Android4.4開始，才可以實現狀態欄著色，并且從5.0開始系統更加完善了這一功能，可直接在主題中設置 <item name="colorPrimaryDark">@color/colorPrimaryDark</item> 或者 getWindow().setStatusBarColor(color) 來實現，但畢竟4.4+的機器還有很大的占比，所以就有必要尋求其它的解決方案。

第一種方案：

1、首先將手機手機狀態欄透明化：

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0及以上
 View decorView = getWindow().getDecorView();
intoption = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
 | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
 decorView.setSystemUiVisibility(option);
 getWindow().setStatusBarColor(Color.TRANSPARENT);
 } elseif(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0
 WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
 localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
 }

在相應的Activity或基類執行這段代碼就ok了。

可見在4.4到5.0的系統、5.0及以上系統的處理方式有所不同，除了這種代碼修改額方式外，還可以通過主題來修改，需要在values、values-v19、values-v21目錄下分別創建相應的主題：

//values
<stylename="TranslucentTheme"parent="AppTheme">
</style>

//values-v19
<stylename="TranslucentTheme"parent="Theme.AppCompat.Light.NoActionBar">
<itemname="android:windowTranslucentStatus">true</item>
<itemname="android:windowTranslucentNavigation">false</item>
</style>

//values-v21
<stylename="TranslucentTheme"parent="Theme.AppCompat.Light.NoActionBar">
<itemname="android:windowTranslucentStatus">true</item>
<itemname="android:windowTranslucentNavigation">false</item>
<itemname="android:statusBarColor">@android:color/transparent</item>
</style>

給相應Activity或Application設置該主題就ok了。

兩種方式根據需求選擇就好了，到這里我們就完成了第一步，將狀態欄透明化了。

2、給狀態欄著色

完成了第一步，我們開始給狀態欄加上想要的色彩吧！

將狀態欄透明化后，直接運行項目會發現界面布局直接延伸到狀態欄，針對這種情況首先可以在布局文件使用 android:fitsSystemWindows="true" 屬性讓布局不延伸到狀態欄，接下來添加一個和狀態欄高、寬相同的指定顏色View來覆蓋被透明化的狀態欄，或者使布局的背景顏色為需要的狀態欄顏色。這兩種方式在后邊會說到，這里我們先看另外一種方式，也是個人比較喜歡的。我們分一下幾種場景來討論：

先做一些準備工作，在values、values-v19目錄添加如下尺寸：

//values
<dimenname="padding_top">0dp</dimen>

//values-v19
<dimenname="padding_top">25dp</dimen>

關于25dp，在有些系統上可能有誤差，這里不做討論！

2.1 頁面頂部使用Toolbar（或自定義title）

一般情況狀態欄的顏色和Toolbar的顏色相同，既然狀態欄透明化后，布局頁面延伸到了狀態欄，何不給Toolbar加上一個狀態欄高度的頂部padding呢：

<android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@color/colorPrimary"
 android:paddingTop="@dimen/padding_top"
 android:theme="@style/AppTheme.AppBarOverlay" />

效果如下：

至于自定義title的情況經測試也ok的，圖就不貼了，有興趣可看代碼。

2.2 DrawerLayout + NavigationView + Toolbar

同樣先給Toolbar設置頂部padding，在4.4系統上看下效果：

NavigationView竟然沒延伸到狀態欄，好吧，繼續修改，當系統版本小于5.0時，進行如下設置：

privatevoidnavViewToTop(){
if(Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
 mDrawerLayout.setFitsSystemWindows(true);
 mDrawerLayout.setClipToPadding(false);
 }
 }

再看效果：

2.3、頁面頂部是一張圖片

這種其實是最簡單的，因為狀態欄透明化后，布局已經延伸到狀態，所以不需要其它額外操作：

<?xml version="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@mipmap/top_image"/>
</LinearLayout>

效果如下：

2.4、頁面底部切換Tab + fragment

某些情況下，當我們的頁面采用底部切換Tab + 多個fragment時，可能每個fragment的頂部顏色不一樣。如何實現狀態欄顏色跟隨fragment切換來變化呢？其實原理和2.1類似，這里我們每個fragment采用自定義的Title，先看FragmentOne的布局：

<?xml version="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff9900"
android:paddingTop="@dimen/padding_top">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="fragment one"/>
</LinearLayout>
</LinearLayout>

我們設置Title的背景為橙黃色、同時設置paddingTop，FragmentTwo的布局類似，只是Title的背景為藍色。然后將兩個Fragment添加到Activity中，最后看下切換的效果：

嗯，效果還是不錯的，沒有延遲的情況！可惜沒早點發掘這種方式，以前的方案效果略不理想。

第二種方案

在方案一中，我們沒有使用 android:fitsSystemWindows="true" 屬性，而是將布局延伸到狀態欄來處理，這次我們使用 android:fitsSystemWindows="true" 屬性，不讓布局延伸到狀態欄，這時狀態欄就是透明的，然后添加一個和狀態欄高、寬相同的指定顏色View來覆蓋被透明化的狀態欄。我們一步步來實現。

1、第一步還是先將狀態欄透明化，方法同上。

2、在布局文件中添加 android:fitsSystemWindows="true" 屬性：

<?xml version="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:theme="@style/AppTheme.AppBarOverlay"
app:title="第二種方案"/>
</LinearLayout>

3、創建View并添加到狀態欄：

privatevoidaddStatusBarView(){
 View view = newView(this);
 view.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
 LinearLayout.LayoutParams params=newLinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
 getStatusBarHeight(this));
 ViewGroup decorView = (ViewGroup) findViewById(android.R.id.content);
 decorView.addView(view, params);
 }

原理很簡單，但是要額外寫這些代碼。。。最后看下效果：

第三種方案

和方案二類似，同樣使用 android:fitsSystemWindows="true" 屬性，再修改布局文件的根布局為需要的狀態欄顏色，因根布局的顏色被修改，所以你需要在里邊多嵌套一層布局，來指定界面的主背景色，比如白色等等，否則就和狀態欄顏色一樣了。說起來有點抽象，還是看具體的例子吧：

1、先將狀態欄透明化，方法同上。

2、修改布局文件：

<?xml version="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff9900"
android:fitsSystemWindows="true">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff9900"
android:theme="@style/AppTheme.AppBarOverlay"
app:title="第三種方案"/>
</LinearLayout>
</RelativeLayout>

修改完了，看效果：

如果項目有幾十個界面，這樣的方式修改起來還是挺累的，你還要考慮各種嵌套問題。

后兩種方案的例子相對簡單，有興趣的話你可以嘗試更多的場景！

三種方式如何選擇，相信到這里你應該有答案了吧，我個人更喜歡第一種！

如果你有更好的方案，歡迎指點哦！

這里是測試代碼

來自：http://blog.inching.org/2016/11/05/android-ui-statusbar-color/

本文由用戶 gcep6417 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1478420234515.html

安卓開發 Android開發移動開發

Android 狀態欄著色實踐

第一種方案：

1、首先將手機手機狀態欄透明化：

2、給狀態欄著色

第二種方案

第三種方案

相關經驗

相關資訊

相關文檔

目錄