2. 程式人生 > >Android App 沉浸式狀態列解決方案

Android App 沉浸式狀態列解決方案

阿新 • • 發佈：2019-01-09

伴隨著 Android 5.0 釋出的 Material Design，讓 Android 應用告別了以前的工程師審美，迎來了全新的介面，靈動的互動，也讓越來越多的 App 開始遵從 material design 設計原則，不再是以前拿著iOS設計稿，做著Android開發。本文就其中的沉浸式狀態列這一特性，描述其相容到4.4的實現，以及一些使用中的小細節。

前言

在4.4之前狀態列一直是黑色的，在4.4中帶來了 windowTranslucentStatus 這一特性，因此可以實現給狀態列設定顏色，如下圖所示，狀態列顏色不再是黑色，而是可以定製的顏色。

國內將狀態列變色叫做沉浸式狀態列，時間久了，叫的人多了，大家就不再深究，默認了這種叫法。

需要解決的問題

  1. 4.4及其以上都是可以實現沉浸式狀態列效果的，5.0及其以上可以直接在主題中設定顏色，或者呼叫 Window 類中的 setStatusBarColor(int color) 來實現，這兩種方式在5.0上都比較簡單，但是如何相容到4.4呢？
  2. 圖片背景的頁面,怎樣讓狀態列透明或者半透明（效果如下）？ 
  3. 使用 DrawerLayout 時，主介面實現沉浸狀態列同時，怎樣保證抽屜檢視也能延伸到狀態列（如下圖所示），且相容到4.4？ 

以上就是本文要解決的問題，下面給出解決方案。

解決方案

1. 給狀態列設定顏色

思路是：

  • 先設定狀態列透明屬性；
  • 給根佈局加上一個和狀態列一樣大小的矩形View（色塊），新增到頂上；
  • 然後設定根佈局的 FitsSystemWindows 屬性為 true,此時根佈局會延伸到狀態列，處在狀態列位置的就是之前新增的色塊，這樣就給狀態列設定上顏色了。

程式碼如下：

    /** * 設定狀態列顏色 * * @param activity 需要設定的activity * @param color 狀態列顏色值 */
    public static void setColor(Activity activity, int color) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            // 設定狀態列透明
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            // 生成一個狀態列大小的矩形
            View statusView = createStatusView(activity, color);
            // 新增 statusView 到佈局中
            ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
            decorView.addView(statusView);
            // 設定根佈局的引數
            ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
            rootView.setFitsSystemWindows(true);
            rootView.setClipToPadding(true);
        }
    }

其中生成狀態列一樣大小的矩形色塊的程式碼如下：

    /** * 生成一個和狀態列大小相同的矩形條 * * @param activity 需要設定的activity * @param color 狀態列顏色值 * @return 狀態列矩形條 */
    private static View createStatusView(Activity activity, int color) {
        // 獲得狀態列高度
        int resourceId = activity.getResources().getIdentifier("status_bar_height", "dimen", "android");
        int statusBarHeight = activity.getResources().getDimensionPixelSize(resourceId);

        // 繪製一個和狀態列一樣高的矩形
        View statusView = new View(activity);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                statusBarHeight);
        statusView.setLayoutParams(params);
        statusView.setBackgroundColor(color);
        return statusView;
    }

在 setContentView() 之後呼叫 setColor(Activity activity, int color) 方法即可。

2. 圖片作背景時，狀態列透明

這個實現比較簡單，根佈局背景設定為圖片，然後新增狀態列透明 Flag， 然後設定根佈局的FitsSystemWindows 屬性為 true 即可。程式碼如下：

    /** * 使狀態列透明 * <p> * 適用於圖片作為背景的介面,此時需要圖片填充到狀態列 * * @param activity 需要設定的activity */
    public static void setTranslucent(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            // 設定狀態列透明
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            // 設定根佈局的引數
            ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
            rootView.setFitsSystemWindows(true);
            rootView.setClipToPadding(true);
        }
    }

同樣的，在 setContentView() 之後呼叫 setTranslucent(Activity activity) 方法即可。

3. 使用 DrawerLayout 時的特殊處理

注意點：

  • 使用 DrawerLayout 時，此時不能再對根佈局，即 DrawerLayout 進行設定，而要針對 DrawerLayout 的內容佈局進行設定，即抽屜之外的另一個佈局。

    如下是一個典型的 DrawerLayout 的佈局，其內容佈局即 FrameLayout,我們需要對FrameLayout 進行仿狀態列色塊的新增、FitsSystemWindows 屬性的設定。

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    xmlns: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">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/main"
            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="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
        </LinearLayout>
    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/activity_main_drawer"/>

</android.support.v4.widget.DrawerLayout>
  • 還有一個需要注意的設定抽屜佈局（Drawer）的 FitsSystemWindows 屬性為 false，即上面佈局中的 NavigationView。

解決方案

  • DrawerLayout 狀態列變色

    程式碼如下：

    /** * 為DrawerLayout 佈局設定狀態列變色 * * @param activity 需要設定的activity * @param drawerLayout DrawerLayout * @param color 狀態列顏色值 */
    public static void setColorForDrawerLayout(Activity activity, DrawerLayout drawerLayout, int color) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            // 生成一個狀態列大小的矩形
            View statusBarView = createStatusBarView(activity, color);
            // 新增 statusBarView 到佈局中
            ViewGroup contentLayout = (ViewGroup) drawerLayout.getChildAt(0);
            contentLayout.addView(statusBarView, 0);
            // 內容佈局不是 LinearLayout 時,設定padding top
            if (!(contentLayout instanceof LinearLayout) && contentLayout.getChildAt(1) != null) {
                contentLayout.getChildAt(1).setPadding(0, getStatusBarHeight(activity), 0, 0);
            }
            // 設定屬性
            ViewGroup drawer = (ViewGroup) drawerLayout.getChildAt(1);
            drawerLayout.setFitsSystemWindows(false);
            contentLayout.setFitsSystemWindows(false);
            contentLayout.setClipToPadding(true);
            drawer.setFitsSystemWindows(false);
        }
    }

需要注意的是，DrawerLayout 的佈局只能包含兩個直接子佈局，一個是內容佈局，一個是抽屜佈局，結構如前面的示例佈局所示，如果內容佈局的根佈局如果不是 LinearLayout 需要對其子佈局設定padding top值，否則仿狀態列色塊會被遮擋在最下面，佈局內容延伸到狀態列，如下圖所示：

（ps：就上圖中的問題，目前的解決方案感覺並不是很好，如果你有更好的解決方案，請告訴我~）

  • DrawerLayout 狀態列透明
    /** * 為 DrawerLayout 佈局設定狀態列透明 * * @param activity 需要設定的activity * @param drawerLayout DrawerLayout */
    public static void setTranslucentForDrawerLayout(Activity activity, DrawerLayout drawerLayout) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            // 設定狀態列透明
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            // 設定內容佈局屬性
            ViewGroup contentLayout = (ViewGroup) drawerLayout.getChildAt(0);
            contentLayout.setFitsSystemWindows(true);
            contentLayout.setClipToPadding(true);
            // 設定抽屜佈局屬性
            ViewGroup vg = (ViewGroup) drawerLayout.getChildAt(1);
            vg.setFitsSystemWindows(false);
            // 設定 DrawerLayout 屬性
            drawerLayout.setFitsSystemWindows(false);
        }
    }

同樣的，在 setContentView() 之後呼叫上述解決方案中的方法即可。

在專案中使用

在專案中推薦這樣使用，在 BaseActivity 中重寫 setContentView(int layoutResID) 方法，新建一個 setStatusBarColor()方法，全域性設定狀態列顏色，因為一般 App 大部分介面狀態列都是主題色。

public class BaseActivity extends AppCompatActivity {

    @Override
    public void setContentView(int layoutResID) {
        super.setContentView(layoutResID);
        setStatusBarColor();
    }

    protected void setStatusBar() {
        StatusBarUtils.setColor(this, getResources().getColor(R.color.colorPrimary));
    }

}

當子類 Activity 的狀態列需要特殊處理時，比如設定不同的顏色，或者設定圖片為背景時，重寫父類的 setStatusBarColor() 方法即可，例如：

public class ImageStatusBarActivity extends BaseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_status_bar);
        
    }

    @Override
    protected void setStatusBar() {
        StatusBarUtils.setTranslucent(this);
    }

對 DrawerLayout 佈局使用時，需要注意一點，因為方法是在 setContentView() 之後立即呼叫的，所以傳進來的 DrawerLayout 要通過 findViewById() 傳進來。如果傳入在setContentView() 之後通過 findViewById() 得到的 DrawerLayout， 則會造成空指標異常。

 StatusBarUtils.setColorForDrawerLayout(this, (DrawerLayout) findViewById(R.id.drawer_layout), getResources()
                .getColor(R.color.colorPrimary));

原始碼和Demo下載

效果在前文中都有截圖，就不多放了。

如文章中有疏漏的地方，請聯絡我或在評論裡告知。

相關推薦

Android App 沉浸式狀態列解決方案

伴隨著 Android 5.0 釋出的 Material Design，讓 Android 應用告別了以前的工程師審美，迎來了全新的介面，靈動的互動，也讓越來越多的 App 開始遵從 material design 設計原則，不再是以前拿著iOS設計稿，做著Androi

Android中沉浸式狀態列，改變狀態列顏色類似QQ樣式

1、使用該功能需要使用到第三方庫SystemBarTint 下載地址:https://github.com/jgilfelt/SystemBarTint 2、需要在AndroidMainfest檔案中Application設定樣式 android:the

Android—設定沉浸式狀態列

public class MainActivity extends AppCompatActivity { private ViewGroup title_bar; @Override protected void onCreate(Bundle s

Android實現沉浸式狀態列及標題欄滑動變色

1. 沉浸式狀態列的實現 沉浸式狀態列實現的方式有很多，可自行百度谷歌 此處沉浸式狀態列實現採用第三方開源庫 ImmersionBar,整合方式可直接檢視官方文件，這裡只做演示 1.1 匯入包 implementation 'com.gyf.immersi

Android 實現沉浸式狀態列

上一篇文章將Android 實現變色狀態列我們實現了變色的狀態列，也介紹了沉浸式狀態列和透明狀態列的區別，這篇文章我們實現沉浸式狀態列。 沉浸式狀態列的來源就是很多手機用的是實體按鍵，沒有虛擬鍵，於是開了沉浸模式就只有狀態列消失了。於是沉浸模式成了沉浸式

Android設定沉浸式狀態列和Material主題

1.設定沉浸式狀態列的方法 /** * true 進入全屏模式，狀態列不顯示 * false 顯示狀態列 */ public static void setSystemUiVisibility(Activity activity,

Android實現沉浸式狀態列的那些坑

最近專案需要實現沉浸式的狀態列，其實我在之前就瞭解過Android的沉浸式，發現有些棘手就放棄了，但是此次是公司的專案需要的，就花了幾天把這個問題搞定了，在此記錄一下，並mark幾個坑。 首先，沉浸式是Android 4.4及以上才有的，在後續的5.0及6.0

Android中沉浸式狀態列詳解

前言 地上斷了翅的蝶，霧散之後的滿月，原來愛跟心碎，都可以很細節。 簡介 這兩天時間比較充裕，所以實現了專案裡的沉浸式狀態列效果，這樣可以使得我們的app主題顯得更加統一。所以今天就帶領大家實現下不同情況下的狀態列效果顯示。 一 狀態列顏色改變

Android 沉浸式狀態列完美解決方案

現在搜尋Android 沉浸式狀態列，真的是一堆一堆，寫的特別多，但是真正用的舒服的真沒有，在這裡自己整理一下開發記錄   注意，在使用這個步驟過程之前，請把之前設定的程式碼註釋一下 把佈局帶有android:fitsSystemWindows註釋掉 style檔案中凡是在style.xml

Android 系統狀態列沉浸式/透明化完整解決方案

前言 網上已經有很多有關於系統狀態列的解決方案,這篇文章也不會有什麼新奇的解決方案,都是本人經過自己試驗,統計提煉出來的相對靠譜的一套解決方案.   關於術語 網上有很多爭論: 你這狀態列是變色龍狀態列,不是沉浸式的 這應該是沉浸式的狀態列吧,系統欄與actionb

android全屏／沉浸式狀態列下，各種鍵盤擋住輸入框解決辦法

*本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 在開發中，經常會遇到鍵盤擋住輸入框的情況，比如登入介面或註冊介面，彈出的軟鍵盤把登

沉浸式狀態列之Toolbar解決方案

1.style檔案中 去Title 狀態列透明 <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.N

(解決)android不同版本的【沉浸式狀態列】（4.4/5.0/5.1/6.0）

介紹： 各個版本有略微的區別，下面我就根據自己的測試和除錯寫出對應的方法： 4.4以上（API>=19）的前提下，任選以下方法： 1.法1：只要呼叫一個方法,setContentView前: getWindow().addFlags(Win

vue專案 使用Hbuilder打包app 設定沉浸式狀態列

使用 Hbuilder新建好移動app專案後，mainfest.json這個檔案裡的 plus裡設定 statusbar ..... "plus": { "statusbar": { "immersed": true },

android 沉浸式狀態列(像ios那樣的狀態列與應用統一顏色樣式)

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

android系統版本6.0及以上設定沉浸式狀態列

系統版本6.0及以上設定沉浸式狀態列程式碼。   requestWindowFeature(Window.FEATURE_NO_TITLE); //系統版本6.0及以上設定沉浸式狀態列 if (RomUtil.hasM()) { int flag = getWindow().get

Android 沉浸式狀態列3

之前寫過兩種方式的沉浸式狀態列 https://blog.csdn.net/QiY6010/article/details/72883287；https://blog.csdn.net/QiY6010/article/details/78678911 今天介紹的是一個狀態列庫barlibra

QMUI Android的學習——（1）引入庫配置主題，並實現沉浸式狀態列效果

最近進行安卓方面的學習，其中用到了騰訊開源的Android UI框架——QMUI Android，這是一個封裝完善的Android UI元件庫，可以給專案的開發提高了很高的工作效率，但是官方的API文件並不是很詳細，所以需要花費時間通過對官方給出的QMUIDEMO進行學習。 這是官方網站：htt

Android沉浸式狀態列

之前一直沒怎麼去研究這方面的，最近有個專案，讓我在沉浸式裡面真的沉浸死了，雖然學習了很多，但是還是個沉浸式菜鳥，這裡也就記錄一些遇到的問題和分享下相關經驗吧 需求： 這裡是一個側滑頁面和主頁面，這個佈局必須是佔滿全屏的 另外一種 需要實現這樣的效果，也就是不會頂上去

android狀態列一體化 沉浸式狀態列

Android 沉浸式狀態列、狀態列一體化、透明狀態列、仿ios透明狀態列  http://blog.csdn.net/jdsjlzx/article/details/50437779 注：狀態列的字型顏色位白色， 如果狀態列背景為白色，上面的部落格已經解決了。