Android 沉浸式狀態列漸變顏色的實現

Ye-Miao發表於2019-01-22

最近在開發中遇到一種個性化的需求，類似於QQ頂部的漸變狀態列的實現，如下圖

首先我們要了解在Android5.0以後，系統API提供直接設定StatusBar來改變狀態列的顏色，然而在4.4上StatusBar變色的基本原理就是將StatusBar本身設定為透明，然後在StatusBar的位置新增一個相同大小的View並上色。沒辦法，我們要做的漸變顏色狀態列就是要相容上下版本的差異

更多關於沉浸式狀態列的瞭解可參考洪洋大神的文章

Android 沉浸式狀態列攻略讓你的狀態列變色吧

純色相容狀態列

程式碼如下


 /**
     * 設定狀態列顏色
     *
     * @param activity       需要設定的activity
     * @param color          狀態列顏色值
     * @param statusBarAlpha 狀態列透明度
     */
 
    public static void setColor(Activity activity, @ColorInt int color, @IntRange(from = 0, to = 255) int statusBarAlpha) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //5.0以上版本
 
            //設定FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS屬性才能呼叫setStatusBarColor方法來設定狀態列顏色
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            //設定FLAG_TRANSLUCENT_STATUS透明狀態列
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //根據輸入的顏色和透明度顯示
            activity.getWindow().setStatusBarColor(calculateStatusColor(color, statusBarAlpha));
 
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //低版本
 
            //新增透明狀態列
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //獲取頂級檢視
            ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
            //獲取頂部的StatusBarView,自定義StatusBarView的Id(在resources中建立Id)
            View fakeStatusBarView = decorView.findViewById(R.id.statusbarutil_fake_status_bar_view);
            if (fakeStatusBarView != null) {
                if (fakeStatusBarView.getVisibility() == View.GONE) {
                    fakeStatusBarView.setVisibility(View.VISIBLE);
                }
                //設定頂層顏色
                fakeStatusBarView.setBackgroundColor(calculateStatusColor(color, statusBarAlpha));
            } else {
                //上述不符合，則建立一個View新增到頂級檢視中
                decorView.addView(createStatusBarView(activity, color, statusBarAlpha));
            }
            setRootView(activity);
        }
    }
複製程式碼

calculateStatusColor（計算狀態列顏色）

 /**
     * 計算狀態列顏色
     *
     * @param color color值
     * @param alpha alpha值
     * @return 最終的狀態列顏色
     */
    private static int calculateStatusColor(@ColorInt int color, int alpha) {
        if (alpha == 0) {
            return color;
        }
        float a = 1 - alpha / 255f;
        int red = color >> 16 & 0xff;
        int green = color >> 8 & 0xff;
        int blue = color & 0xff;
        red = (int) (red * a + 0.5);
        green = (int) (green * a + 0.5);
        blue = (int) (blue * a + 0.5);
        return 0xff << 24 | red << 16 | green << 8 | blue;
    }
複製程式碼

自定義View狀態列


 /**
     * 自定義View狀態列
     *
     * @param activity 需要設定的activity
     * @param color    狀態列顏色值
     * @param alpha    透明值
     * @return 狀態列矩形條
     */
    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(calculateStatusColor(color, alpha));
        //自定義的StatusBarView的Id
        statusBarView.setId(FAKE_STATUS_BAR_VIEW_ID);
        return statusBarView;
    }
複製程式碼

最後重新規劃佈局

setRootView

/**
     * 設定根佈局引數
     */
    private static void setRootView(Activity activity) {
        //ViewGroup容器存放UI元件
        ViewGroup parent = (ViewGroup) activity.findViewById(android.R.id.content);
        for (int i = 0, count = parent.getChildCount(); i < count; i++) {
            View childView = parent.getChildAt(i);
            if (childView instanceof ViewGroup) {
                childView.setFitsSystemWindows(true);
                ((ViewGroup) childView).setClipToPadding(true);
            }
        }
    }
複製程式碼

由此純色狀態列的基本配置就可以了，只需要建立Utils工具類在Activity中呼叫即可，

 //設定純色狀態列
 StatusBarUtil.setColor(this, AppUtils.getColor(R.color.colorPrimary));
複製程式碼

漸變色相容狀態列

關於漸變顏色的狀態列，實現方法有很多種，比如（反射拿到StatusBar並設定setBackgroundResource將shape漸變顏色新增進來即可，建立View填充狀態列），這裡我們介紹的是第二種方法，建立View填充狀態列（有沒有方法跟上面的方法很類似）

程式碼如下

  /**
     * 為介面設定自定義透明View
     *
     * @param activity       需要設定的activity
     * @param statusBarAlpha 狀態列透明度
     * @param needOffsetView 需要向下偏移的 View
    public static void setTranslucentForWindow(Activity activity, @IntRange(from = 0, to = 255) int statusBarAlpha,
                                                  View needOffsetView) {
        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {
            //5.0以上版本
            setTransparentForWindow(activity);
            addTranslucentView(activity, statusBarAlpha);
            if (needOffsetView != null) {
                Object haveSetOffset = needOffsetView.getTag(TAG_KEY_HAVE_SET_OFFSET);
                if (haveSetOffset != null && (Boolean) haveSetOffset) {
                    return;
                }
                ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) needOffsetView.getLayoutParams();
                layoutParams.setMargins(layoutParams.leftMargin, layoutParams.topMargin + getStatusBarHeight(activity),
                        layoutParams.rightMargin, layoutParams.bottomMargin);
                needOffsetView.setTag(TAG_KEY_HAVE_SET_OFFSET, true);
            }
        } else {
            //低版本
 
            //新增透明狀態列
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //獲取頂級檢視
            ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
            //獲取頂部的StatusBarView,自定義id
            View fakeStatusBarView = decorView.findViewById(FAKE_STATUS_BAR_VIEW_ID);
            if (fakeStatusBarView != null) {
                if (fakeStatusBarView.getVisibility() == View.GONE) {
                    fakeStatusBarView.setVisibility(View.VISIBLE);
                }
                //設定頂層顏色
                fakeStatusBarView.setBackgroundResource(R.drawable.shape_gradient);
            } else {
                //上述不符合，則建立一個View新增到頂級檢視中
                View statusBarView = new View(activity);
                LinearLayout.LayoutParams params =
                        new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(activity));
                statusBarView.setLayoutParams(params);
                fakeStatusBarView.setBackgroundResource(R.drawable.shape_gradient);
                statusBarView.setId(FAKE_STATUS_BAR_VIEW_ID);
                decorView.addView(statusBarView);
            }
            setRootView(activity);
        }
 
    }
複製程式碼

getStatusBarHeight

 /**
     * 獲取狀態列高度
     *
     * @param context context
     * @return 狀態列高度
     */
    public static int getStatusBarHeight(Context context) {
        // 獲得狀態列高度
        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
        return context.getResources().getDimensionPixelSize(resourceId);
    }
複製程式碼

setTransparentForWindow


/**
     * 設定透明
     */
    public static void setTransparentForWindow(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
            activity.getWindow()
                    .getDecorView()
                    .setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            activity.getWindow()
                    .setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
複製程式碼

addTranslucentView


/**
     * 新增半透明矩形條
     *
     * @param activity       需要設定的 activity
     * @param statusBarAlpha 透明值
     */
    private static void addTranslucentView(Activity activity, @IntRange(from = 0, to = 255) int statusBarAlpha) {
        ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);//系統Id
        View fakeTranslucentView = contentView.findViewById(FAKE_TRANSLUCENT_VIEW_ID);
        if (fakeTranslucentView != null) {
            if (fakeTranslucentView.getVisibility() == View.GONE) {
                fakeTranslucentView.setVisibility(View.VISIBLE);
            }
            fakeTranslucentView.setBackgroundColor(Color.argb(statusBarAlpha, 0, 0, 0));
        } else {
            contentView.addView(createTranslucentStatusBarView(activity, statusBarAlpha));
        }
    }
複製程式碼

由此漸變顏色的狀態列設定，只需要將toolbar作為View傳入，呼叫如下

//設定漸變顏色狀態列
StatusBarUtil.setTransparentForWindow(this, mToolbar);
 
 
//佈局如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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="wrap_content">
 
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_gradient"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:elevation="@dimen/dp0">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ToolbarPopupTheme"
            app:title="@string/main_toolbar_title_top"
            app:titleTextColor="@color/colorPrimary">
 
 
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
</LinearLayout>
複製程式碼

Demo傳送門

至此，漸變色狀態列的配置已經介紹完全了

Android 沉浸式狀態列的實現
2019-02-27
Android
Android-沉浸式狀態列的實現
2020-10-13
Android
Flutter改變狀態列字型、狀態列背景顏色、Appbar背景顏色的方式
2020-06-22
FlutterAPP
[譯] Android 實現顏色漸變的一個小 tip
2019-02-25
Android
CSS 實現字型顏色漸變
2024-12-06
CSS
沉浸式狀態列
2018-10-19
css文字顏色漸變的3種實現
2019-01-03
CSS
Android 顏色漸變屬性動畫
2019-04-02
Android動畫
Android的標題欄，狀態列圖示文字顏色及背景動態變化
2018-12-23
Android
一行程式碼使Android狀態列變沉浸式透明化
2021-09-09
行程Android
app直播原始碼，xml實現由上而下的顏色漸變
2022-01-14
APP原始碼XML
MUI——設定沉浸式狀態列
2018-11-08
UI
短視訊直播系統，Android狀態列設定顏色字型
2022-06-10
Android
修改狀態列與導航欄顏色
2018-10-18
css3背景顏色漸變
2020-10-12
CSSS3
直播軟體搭建，修改狀態列、導航條顏色及文字顏色
2022-04-28
Android沉浸式狀態列還能這樣玩—教你玩出新花樣
2019-03-04
Android
直播系統平臺搭建，狀態列透明和程式碼設定漸變色
2021-10-29
搭建自己的直播平臺，更改狀態列的字型顏色
2021-11-15
利用CAGradientLayer自定義顏色漸變view
2018-07-10
View
Android 商品詳情頁懸浮效果以及沉浸式狀態列，無衝突
2018-07-19
Android
Android Studio 沉浸式狀態列（個人手記）—錯誤資訊請批評
2021-09-09
Android
直播軟體搭建，狀態列顏色跟隨裝置系統變化而變化
2022-03-07
iOS兩種顏色的線性漸變 --DDGBannerScrollView
2019-01-21
iOSView
直播系統搭建，設定透明背景（去掉蒙層）狀態列顏色不改變
2023-05-19
線上直播原始碼，單獨修改狀態列顏色
2023-11-01
原始碼
簡易的iOS導航欄顏色漸變方案
2019-01-11
iOS
直播平臺搭建原始碼，Android進度條ProgressBar顏色的漸變設定
2023-03-27
原始碼Android
在LCD螢幕上漸變顯示sRGB所有範圍顏色, 最大可漸變16,581,375種顏色
2024-05-12
CSS3文字顏色漸變效果
2018-05-20
CSSS3
直播小程式原始碼，Swift 獲取漸變色顏色值
2023-03-28
原始碼Swift
Android開發——Java程式碼動態改變顏色字型的方法
2018-11-01
AndroidJava
js計算線性漸變的中間顏色值
2024-03-28
JS
Android 圓形ProgressBar 改變顏色
2018-08-09
Android
使用列舉實現狀態機來優雅你的狀態變更邏輯
2019-08-28
python seaborn畫熱力圖，自定義顏色漸變
2021-01-03
Python
android關鍵字特殊顏色顯示的實現
2018-08-27
Android
線上直播系統原始碼，iOS 根據滑動距離改變狀態列顏色
2021-10-21
原始碼iOS

Android 沉浸式狀態列 漸變顏色的實現