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

Ye-Miao發表於2019-01-22

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

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

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

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

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

純色相容狀態列

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));
複製程式碼

漸變色相容狀態列

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

關於漸變顏色的狀態列,實現方法有很多種,比如(反射拿到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傳送門

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

來源:https://juejin.im/post/5c468686e51d452c8e6d52ba

相關文章