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


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

前言

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

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

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

需要解決的問題

  1. 4.4及其以上都是可以實現沉浸式狀態欄效果的,5.0及其以上可以直接在主題中設置顏色,或者調用 Window 類中的 setStatusBarColor(int color) 來實現,這兩種方式在5.0上都比較簡單,但是如何兼容到4.4呢?
  2. 圖片背景的頁面,怎樣讓狀態欄透明或者半透明(效果如下)?
  3. 使用 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;
}

在 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 屬性的設置。

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
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="match_parent">

<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>
  • 還有一個需要注意的設置抽屜布局(Drawer)的 FitsSystemWindows 屬性為 false,即上面布局中的 NavigationView

解決方案

  • DrawerLayout 狀態欄變色

    代碼如下:

    /**
* 為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 狀態欄透明
    /**
* 為 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) 方法,新建一個 setStatusBar()方法,全局設置狀態欄顏色,因為一般 App 大部分界面狀態欄都是主題色。


public class BaseActivity extends AppCompatActivity {

@Override
public void setContentView(int layoutResID) {
super.setContentView(layoutResID);
setStatusBar();
}

protected void setStatusBar() {
StatusBarUtils.setColor(this, getResources().getColor(R.color.colorPrimary));
}

}

當子類 Activity 的狀態欄需要特殊處理時,比如設置不同的顏色,或者設置圖片為背景時,重寫父類的 setStatusBar() 方法即可,例如:

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);
}

對 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 下載

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

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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com