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

wnai9891 8年前發布 | 466K 次閱讀 Android開發移動開發

來自： http://laobie.github.io/android/2016/02/15/status-bar-demo.html

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

前言

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

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

可以在知乎上看到關于這個問題的討論：為什么在國內會有很多用戶把「透明欄」（Translucent Bars）稱作「沉浸式頂欄」？

需要解決的問題

4.4及其以上都是可以實現沉浸式狀態欄效果的，5.0及其以上可以直接在主題中設置顏色，或者調用 Window 類中的 setStatusBarColor(int color) 來實現，這兩種方式在5.0上都比較簡單，但是如何兼容到4.4呢？

圖片背景的頁面,怎樣讓狀態欄透明或者半透明（效果如下）？

使用 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;
}</pre></div>

在 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 屬性的設置。
</li>
</ul>
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    xmlns:android="

<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></pre></div>

還有一個需要注意的設置抽屜布局（Drawer）的 FitsSystemWindows 屬性為 false，即上面布局中的 NavigationView。
</ul>
解決方案



DrawerLayout 狀態欄變色

代碼如下：
</li>
</ul>
    /** * 為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 狀態欄透明
</ul>
    /** * 為 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() 之后調用上述解決方案中的方法即可。

在項目中使用

以上代碼我整理成了一個工具類，放在 github 上：StatusBarUtils.java 文件

在項目中推薦這樣使用，在 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));
}


}</pre></div>
當子類 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);
}</pre></div>

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

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

源碼和Demo下載

StatusBarDemo Github 地址

StatusBarUtils.java 文件

Demo apk 下載

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

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

<DIV class=ds-thread data-url="laobie.github.io/android/2016/02/15/status-bar-demo.html" 沉浸式狀態欄解決方案 app data-title="Android" data-thread-key="/android/2016/02/15/status-bar-demo"></div>



                    
                    
                         本文由用戶 wnai9891 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1455584716230.html
                         Android開發 移動開發
                    

                
                
                    
                        相關經驗
                        
  Android App 沉浸式狀態欄解決方案
   另外兩種android沉浸式狀態欄實現思路
   Android沉浸式狀態欄實現
   Android沉浸式狀態欄的實現方案探討
   Android 沉浸式狀態欄及懸浮效果
                         
                    
                    
                        相關資訊
                        
  用 Scheme 語言寫 Android app
   微軟開源 Unity 工具包，支持更加沉浸式的室內體驗
   Google的Android更新問題解決方案
   高效開發 Android App 的 10 個建議
   如何開發一個App（Android）
                         
                    
                    
                        相關文檔
                        
   android中ocr解決方案（tesseract）
    Android 自動化測試解決方案
    Android 錯誤信息解決方案總結
    Android平臺多窗口解決方案
    微軟一站式vdi解決方案
    Android 平臺多窗口解決方案介紹
    Android 常用控件大全
    GoF 23 種設計模式解析附實現源碼(2nd Edition)
                         
                    

                    目錄