最近在開發中遇到一種個性化的需求,類似於QQ頂部的漸變狀態列的實現,如下圖
首先我們要了解在Android5.0以後,系統API提供直接設定StatusBar來改變狀態列的顏色,然而在4.4上StatusBar變色的基本原理就是將StatusBar本身設定為透明,然後在StatusBar的位置新增一個相同大小的View並上色。沒辦法,我們要做的漸變顏色狀態列就是要相容上下版本的差異
更多關於沉浸式狀態列的瞭解可參考洪洋大神的文章
純色相容狀態列
程式碼如下
/** * 設定狀態列顏色 * * @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>
複製程式碼
至此,漸變色狀態列的配置已經介紹完全了