Android 透明狀態欄解決方案

Android 透明狀態欄解決方案

前言

一名android二貨的android探索

在android開發過程中看到了像如下圖片中APP的界面。


天氣
天氣
網易云音樂1
QQ音樂

發現這種狀態欄真的好神奇喲~狀態欄和界面完美融合，真的非常的漂亮，于是我本著“刨根問底攔不住”的精神研究了一下，發現其實還不是那么容易實現的，因為需要考慮到android 4.4版本和5.0以上版本的區別

開始說明！！

模式的選擇

上面的示例圖片的效果不太一樣，一種是單一顏色，一種是透明模式，所以在項目中要按照樣式選擇不同的解決方案
有兩種模式：
1.著色模式
2.透明模式

一般來說常用的配置：
通常我們在做狀態欄的時候會在style中設置一些東西

1.先在values文件夾下的styles.xml 文件中設置

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

2.然后在values-v19文件夾下的styles.xml 文件中設置

<style name="AppTheme" parent="@style/BaseAppTheme" >
    <!--狀態欄透明-->
    <item name="android:windowTranslucentStatus">true</item>
</style>

3.然后在相應的Activity中配置上這個Style

android:theme="@style/AppTheme"

一般還會在頂層控件例如toolbar中設置android:fitsSystemWindows="true"這樣會讓出狀態欄的空間
這是最簡單的一種實現方式。
但是這種方式有些小問題
1.在style中設置可能會無效
2.這種方式無法動態的修改顏色和透明度

所以在下面我就是通過代碼來實現

并且在最后會發出我融合了幾種解決方案的工具類源碼

1.著色模式

著色模式就是將狀態欄變色，4.4版本既然普通方法不好實現那就換一種方式，這種方式其實就是在頂部狀態欄添加透明化，并添加一條與狀態欄大小相同的View，并設置它的屬性不就OK啦~
在這里舉一個普通Toolbar大致設置代碼的例子，
具體實現請到博客末尾的源碼中查看-!

style:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/cmn_rl"
    tools:context="com.statusbar_alexleo.alexstatusbarutils.CommonToolbarAct">

    <android.support.v7.widget.Toolbar
        android:id="@+id/cmn_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <include
        android:id="@+id/include"
        layout="@layout/status_control_layout" />

</RelativeLayout>

1.判斷Android版本，并對不同版本進行對應的設置

/**
     * 設置普通toolbar中狀態欄顏色以及明暗度
     *
     * @param activity
     * @param color
     * @param statusBarAlpha
     */
public static void setStatusColor(Activity activity, @ColorInt int color, int statusBarAlpha) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            activity.getWindow().setStatusBarColor(statusColorIntensity(color, statusBarAlpha));
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            setStatusViewToAct(activity, color, statusBarAlpha);
            setRootView(activity);
        }
    }

在Android5.0以上可以直接設置狀態欄顏色，主要的工作還是在兼容4.4版本中
以下是4.4中兼容的代碼

    /**
     * 設置狀態欄view的顏色并添加到界面中，如果找到狀態欄view則直接設置，否則創建一個再設置
     *
     * @param activity
     * @param color
     * @param statusBarAlpha
     */
    private static void setStatusViewToAct(Activity activity, @ColorInt int color, int statusBarAlpha) {
        ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
        View fakeStatusBarView = decorView.findViewById(STATUS_VIEW_ID);
        if (fakeStatusBarView != null) {
            if (fakeStatusBarView.getVisibility() == View.GONE) {
                fakeStatusBarView.setVisibility(View.VISIBLE);
            }
            fakeStatusBarView.setBackgroundColor(statusColorIntensity(color, statusBarAlpha));
        } else {
            decorView.addView(createStatusBarView(activity, color, statusBarAlpha));
        }
    }

    private static View createStatusBarView(Activity activity, @ColorInt int color, int alpha) {
        // 繪制一個和狀態欄一樣高的矩形
        View statusBarView = new View(activity);
        LinearLayout.LayoutParams params =
                new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(activity));
        statusBarView.setLayoutParams(params);
        statusBarView.setBackgroundColor(statusColorIntensity(color, alpha));
        statusBarView.setId(STATUS_VIEW_ID);
        return statusBarView;
    }

效果如下：


普通toolbar狀態欄著色

下面講解一下帶DrawerLayout的狀態欄著色解決方案，在這里我整理了三種，在這里我只說明其中一種，另兩種在源碼中找setDyeDrawerStatus×××（）

public static void setDrawerStatusAlpha(Activity activity, int statusBarAlpha) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            activity.getWindow().setStatusBarColor(Color.argb(statusBarAlpha, 0, 0, 0));
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            ViewGroup contentLayout = (ViewGroup) activity.findViewById(android.R.id.content);
            contentLayout.getChildAt(0).setFitsSystemWindows(false);
            setTranslucentStatusViewToAct(activity, statusBarAlpha);
        }
    }

    private static void setTranslucentStatusViewToAct(Activity activity, int statusBarAlpha) {
        setARGBStatusViewToAct(activity, 0, 0, 0, statusBarAlpha);
    }

    /**
     * 設置狀態欄view的ARGB，如果找到狀態欄view則直接設置，否則創建一個再設置
     *
     * @param activity
     * @param statusBarAlpha
     */
    private static void setARGBStatusViewToAct(Activity activity, int r, int g, int b, int statusBarAlpha) {

        ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
        View fakeStatusBarView = contentView.findViewById(TRANSLUCENT_VIEW_ID);
        if (fakeStatusBarView != null) {
            if (fakeStatusBarView.getVisibility() == View.GONE) {
                fakeStatusBarView.setVisibility(View.VISIBLE);
            }
            fakeStatusBarView.setBackgroundColor(Color.argb(statusBarAlpha, r, g, b));
        } else {
            contentView.addView(createARGBStatusBarView(activity, r, g, b, statusBarAlpha));
        }
    }
    private static View createARGBStatusBarView(Activity activity, int r, int g, int b, int alpha) {
        // 繪制一個和狀態欄一樣高的矩形
        View statusBarView = new View(activity);

        LinearLayout.LayoutParams params =
                new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(activity));
        statusBarView.setLayoutParams(params);
        statusBarView.setBackgroundColor(Color.argb(alpha, r, g, b));
        statusBarView.setId(TRANSLUCENT_VIEW_ID);
        return statusBarView;
    }

這個方法在5.0版本中狀態欄的顏色是根據style中colorPrimaryDark走的，如果想修改，請到style中修改colorPrimaryDark的顏色。

下面的示例的透明度為122
以下是5.0和4.4版本的截圖


4.4_122alpha

5.0_122alpha

2.透明模式

就是文章開頭的網易云音樂和天氣那兩個圖片的樣式

首先透明模式我認為應用最多的就是圖片了，所以下面就以圖片來舉個栗子
先放下代碼啦~~~

/**
     * 設置透明狀態欄版本的狀態欄的ARGB
     * @param activity
     * @param topView
     * @param r
     * @param g
     * @param b
     * @param alpha
     */
    public static void setARGBStatusBar(Activity activity, View topView, int r, int g, int b, int alpha) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
            return;
        }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            activity.getWindow().setStatusBarColor(Color.argb(alpha, r, g, b));
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            setARGBStatusViewToAct(activity, r, g, b, alpha);
        }
        if (topView != null) {
            boolean isSetPadding = topView.getTag(IS_SET_PADDING_KEY) != null;
            if (!isSetPadding) {
                topView.setPadding(topView.getPaddingLeft(), topView.getPaddingTop() + getStatusBarHeight(activity), topView.getPaddingRight(), topView.getPaddingBottom());
                topView.setTag(IS_SET_PADDING_KEY, true);
            }
        }
    }

然后說明一下解決方法：
首先先設置狀態欄

//5.0設置狀態欄樣式
activity.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            activity.getWindow().setStatusBarColor(Color.argb(alpha, r, g, b));

設置完這些在5.0系統就可以調整狀態欄的顏色和透明度了

然后在4.0系統和上面的設置方法差不多，都是使狀態欄透明，然后放一個狀態欄大小的View，并設置它的透明度和顏色等
最后我在下面寫了個topView，就是為了讓頂部的控件讓出狀態欄的高度，設置了頂部padding，下面是圖片模式的效果圖
4.4版本：


5.0及以上版本


還有一種模式就是CollapsingToolbarLayout的圖片標題模式
就是這樣


這種模式的代碼如下

/**
     * CollapsingToolbarLayout狀態欄(可折疊圖片)
     * 5.0縮放到最小之后頂部狀態欄的顏色是根據colorPrimaryDark的顏色走的
     *
     * @param activity
     * @param coordinatorLayout
     * @param appBarLayout
     * @param imageView
     * @param toolbar
     */
    public static void setCollapsingToolbar(Activity activity, CoordinatorLayout coordinatorLayout,
                                            AppBarLayout appBarLayout, ImageView imageView, Toolbar toolbar) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
            return;
        }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            activity.getWindow().setStatusBarColor(Color.argb(0, 0, 0, 0));
            appBarLayout.setFitsSystemWindows(true);
            imageView.setFitsSystemWindows(true);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            coordinatorLayout.setFitsSystemWindows(false);
            appBarLayout.setFitsSystemWindows(false);
            imageView.setFitsSystemWindows(false);
            toolbar.setFitsSystemWindows(true);
            CollapsingToolbarLayout.LayoutParams lp = (CollapsingToolbarLayout.LayoutParams) toolbar.getLayoutParams();
            lp.height = (int) (getStatusBarHeight(activity) +
                    activity.getResources().getDimension(android.support.v7.appcompat.R.dimen.abc_action_bar_default_height_material));
            toolbar.setLayoutParams(lp);

            setTranslucentStatusViewToAct(activity, 0);
        }
    }

這樣就完成了這個效果

效果如下：


4.4
5.0

其余的還有關于fragment的，這個和圖片幾乎一樣，所以我就不貼代碼了，直接貼效果

4.4
5.0

代碼和原理大概就講這么多，其他的效果都在我的源碼中，大家可以到源碼中看一看，下面就分享一下我的源碼吧！！如果覺得好的話請給我個屎蛋兒~（star）
https://github.com/asd7364645/AlexStatusBarUtils

引入lib方式：
1.在項目的Project的gradle配置：

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

2.在AndroidStudio項目的gradle中配置compile 'com.github.asd7364645:AlexStatusBarUtils:1.0'
注：由于這個工具類包含了com.android.support:design，所以在項目中可以去掉這個

如果我寫的有不好的話大家也可以參考一下資料來整理
上面我講解參考的資料有：
1.http://www.lxweimin.com/p/0acc12c29c1b
2.http://jaeger.itscoder.com/android/2016/02/15/status-bar-demo.html
3.http://blog.csdn.net/u013260551/article/details/51150336
4.http://blog.csdn.net/Mtee_Yu/article/details/53033559?locationNum=14&fps=1

我是Alex-蠟筆小劉，一個Android小白~！
有失誤或者錯誤希望有大神能糾正！也希望與其他“小白”共同進步！

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容