Android沉浸式狀態欄詳解

版權聲明:本文為博主原創文章,未經博主允許不得轉載。

在4.4之前狀態欄一直是黑色的,在4.4中帶來了 windowTranslucentStatus 這一特性,開始引出“沉浸式狀態欄”這個概念。Google 在 Android 4.4 的 API 描述頁面里提到了“Translucent system UI styling”,即透明化的系統UI風格。 “沉浸式狀態欄”準確來說應該是“透明欄”,是 4.4 新定義的設計規范。簡單來說就是在軟件打開的時候通知欄和軟件頂部顏色融為一體,這樣可以使軟件和系統本身更加符合,同時通知欄的顏色不再是白色、黑色簡單的兩種了。

要實現這種效果,需要修改一些配置。從Android 5.0開始,Google推出Material Design,使用Theme.Material(MD主題)或Theme.AppCompat主題并至少設置ColorPrimaryDark屬性就可以實現status bar透明的效果。

image.png

如圖,設定的ColorPrimaryDark屬性的顏色就是要顯示的狀態欄顏色。在Android Studio新建一個Material Design風格的工程,不用做任何改動,在Android 5.0及以上的機型中實驗,可以看出已經實現了半透明式的沉浸式狀態欄。

image.png
image.png
image.png

可以看出在activity中設置了NoActionBar屬性,繼承了AppTheme,因此顯示的顏色就是設置的colorPrimaryDark。
對于Android 4.4到5.0 之間的機型,情況會比較麻煩,因此本文給出的方案都是針對所有4.4及以上版本的機型來說的。 沉浸式狀態欄對于頂部是傳統純色actionbar或者toolbar和頂部是圖片(非純色)是不同的。對于純色的頂部導航欄,狀態欄應當和導航欄顏色一致,而對于圖片來說,應該使圖片背景不狀態欄融為一體,實現透明的導航欄。因此一種方案討論都分成兩部分。

下面給出兼容Android 4.4 (API 19) 及以上版本的沉浸式狀態欄實現方案。

方案一

1.純色toolbar
新建一個針對API 19 的values-v19文件夾,建立一個自定義的style

image.png

<item name="android:windowTranslucentStatus">true</item> 是實現透明狀態欄的屬性
<item name="windowNoTitle">true</item> 可以將狀態欄隱藏不顯示,因此toolbar的顯示會上移

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT <= Build.VERSION_CODES.LOLLIPOP){ 
toolbar.getLayoutParams().height = getAppBarHeight(); 
toolbar.setPadding(toolbar.getPaddingLeft(),getStatusBarHeight(),toolbar.getPaddingRight(),toolbar.getPaddingBottom());
}

此時在onCreate方法加上這段代碼,在代碼中改變高度,注意需要先判斷安卓版本。這段代碼的邏輯是:將toolbar的高度設置成原本toolbar的高度+狀態欄的高度(因為狀態欄已經被隱藏),然后設置toolbar的padding值,將toolbar中的內容限定在原來toolbar的范圍內,因此從視覺上就可以使狀態欄和toolbar顏色一致。在不同版本上的效果如圖:

image.png

2.圖片背景
由于要顯示圖片,因此要將狀態欄的背景設置成圖片的一部分,并且將上述設置toolbar的代碼改變成下述顯示透明狀態欄的代碼(因為在styles v21文件里沒有設置透明)

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
 //透明狀態欄
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); 
//透明導航欄 
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); }

這是在代碼中聲明的方式,顯然第二行代碼和<item name="android:windowTranslucentStatus">true</item>這句話的實現效果是相同的。 在不同版本上的效果如下,可以看出在Android 4.4不5.0以上版本的實現效果有一些差異。

image.png

方案二

方案二實現的思路是,先隱藏狀態欄,然后在原toolbar加上一個和狀態欄的一樣的高的view就可以了,設置的顏色即為狀態欄的顏色。因此這種方法不適合頂部為圖片的情況。
建立一個類StatesBarCompat,用來添加新的view

public class StatusBarCompat { 
private static final int INVALID_VAL = -1; 
private static final int COLOR_DEFAULT = Color.parseColor("#20000000"); 
@TargetApi(Build.VERSION_CODES.LOLLIPOP) 
public static void compat(Activity activity, int statusColor) {
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
    if (statusColor != INVALID_VAL) { 
        activity.getWindow().setStatusBarColor(statusColor); 
    } 
  return; 
  } if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        int color = COLOR_DEFAULT; 
        ViewGroup contentView = (ViewGroup)      
        activity.findViewById(android.R.id.content);
        if (statusColor != INVALID_VAL) { 
              color = statusColor;
         } 
        View statusBarView = contentView.getChildAt(0); 
        //改變顏色時避免重復添加statusBarView 
         if (statusBarView != null && statusBarView.getMeasuredHeight() == getStatusBarHeight(activity)) { 
              statusBarView.setBackgroundColor(color); 
              return; 
         }
         statusBarView = new View(activity); 
         ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(activity)); 
          statusBarView.setBackgroundColor(color);       
          contentView.addView(statusBarView, lp); 
        } 
  } 

public static void compat(Activity activity) { 
    compat(activity, INVALID_VAL);
 }

public static int getStatusBarHeight(Context context) {
     int result = 0;
     int resourceId =  context.getResources().getIdentifier("status_bar_height", "dimen", "android");
     if (resourceId > 0) {
         result = context.getResources().getDimensionPixelSize(resourceId); 
      } 
      return result;
 }

然后在toolbar的跟布局屬性中添加一句android:fitsSystemWindows="true",設置為自適應布局。接下來只要在onCreate方法中調用該方法就可以了
StatusBarCompat.compat(this, Color.RED);
該方法的第二個參數是設置狀態欄的顏色,如果不填,就默認為StatusBarCompat中的COLOR_DEFAULT (#20000000) 。
在不同版本上的效果如圖所示

image.png

方案三

使用github上的第三方開源庫SystemBarTint,可以用簡單的幾行代碼很方便的實現沉浸式狀態欄
添加依賴compile 'com.readystatesoftware.systembartint:systembartint:1.0.3'
具體使用和代碼見地址:
https://github.com/jgilfelt/SystemBarTint

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

推薦閱讀更多精彩內容