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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,431評論 2 378

推薦閱讀更多精彩內容