快捷導(dǎo)航

Android 4.4以上"沉浸式"狀態(tài)欄效果的實(shí)現(xiàn)方法

更新時間：2016年09月26日 11:33:39 投稿：daisy

Android與ios效果互仿早已不是什么稀奇的事，我猜大概這個效果來自ios吧，有爭議說這種效果不能叫做沉浸式，叫透明狀態(tài)欄更合適，我也感覺這和沉浸式的含義不太一致。但是大家都這么叫了，那就這樣唄。下面來一起看看關(guān)于Android 4.4以上"沉浸式"效果的實(shí)現(xiàn)方法。

什么是沉浸式狀態(tài)欄？

沉浸式狀態(tài)欄意思指狀態(tài)欄的顏色隨著軟件顏色而改變，使?fàn)顟B(tài)欄和軟件顏色保持一致，沉浸其中！當(dāng)我們打開應(yīng)用程序時，不會再因?yàn)榭吹綉?yīng)用程序和狀態(tài)欄的黑邊相隔開而感到十分難看。沉浸式狀態(tài)欄由于其能給用戶群體帶來極佳的用戶體驗(yàn)，已經(jīng)在越來越多的應(yīng)用上得到了體現(xiàn)。

實(shí)現(xiàn)原理

從4.4后系統(tǒng)增加了透明狀態(tài)欄的特性WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS一旦添加上這個屬性后，那么布局中的內(nèi)容DecorView就會自動填充到狀態(tài)欄。所有的實(shí)現(xiàn)都是基于這個特性，就相當(dāng)于這個時候狀態(tài)欄會默認(rèn)空出來，然后開發(fā)者可以自定義view來填充這個高度的.

實(shí)現(xiàn)的過程中可能還要用到android:fitsSystemWindows="true" ,這個屬性很重要。其含義：view可以根據(jù)系統(tǒng)窗口(如status bar，軟鍵盤)來調(diào)整自己的布局，如果值為true,就會調(diào)整view的paingding屬性來給system windows留出空間....

那么現(xiàn)在來看看具體實(shí)現(xiàn)方式吧

一般頁面都是自己定義個類標(biāo)題欄

實(shí)現(xiàn)

從實(shí)現(xiàn)效果上，這里大致分為兩種

1、單獨(dú)給狀態(tài)欄著色

使用這個開源庫SystemBarTint

 /**
  * 狀態(tài)欄顏色設(shè)置方法
  * @param context
  * @param color
  */
 public static void smartTintManager(Activity context, int color){
   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
     Window window = context.getWindow();
     window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
     // 創(chuàng)建狀態(tài)欄的管理實(shí)例
     SystemBarTintManager tintManager = new SystemBarTintManager(context);
     // 激活狀態(tài)欄設(shè)置
     tintManager.setStatusBarTintEnabled(true);
     tintManager.setStatusBarTintColor(color);
   }
 }

在對應(yīng)的頁面的根布局中添加android:fitsSystemWindows="true" ,且根布局中不能設(shè)置整體的大背景色，否則狀態(tài)欄著色就會被覆蓋

調(diào)用上面方法設(shè)置具體的顏色（依據(jù)開源庫，其中就一個核心類，可以直接把那個類拷貝到項(xiàng)目中）

這里主要講一下具體的實(shí)現(xiàn)原理

 private void setupStatusBarView(Context context, ViewGroup decorViewGroup) {
   mStatusBarTintView = new View(context);
   LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, mConfig.getStatusBarHeight());
   params.gravity = Gravity.TOP;
   if (mNavBarAvailable && !mConfig.isNavigationAtBottom()) {
     params.rightMargin = mConfig.getNavigationBarWidth();
   }
   mStatusBarTintView.setLayoutParams(params);
   mStatusBarTintView.setBackgroundColor(DEFAULT_TINT_COLOR);
   mStatusBarTintView.setVisibility(View.GONE);
   decorViewGroup.addView(mStatusBarTintView);
 }

通過這段代碼，很容易看出，通過動態(tài)生成一個view，然后這個view寬是MATCH_PARENT , 高度是系統(tǒng)狀態(tài)欄的高度；然后為這個動態(tài)生成的view設(shè)置一個背景顏色；最后將這個view添加到decorViewGroup這個view容器中，那再看看這個view到底是誰

 /**
  * Constructor. Call this in the host activity onCreate method after its
  * content view has been set. You should always create new instances when
  * the host activity is recreated.
  *
  * @param activity The host activity.
  */
 @TargetApi(19)
 public SystemBarTintManager(Activity activity) {

   Window win = activity.getWindow();
   //獲得DecorView根布局容器
   ViewGroup decorViewGroup = (ViewGroup) win.getDecorView(); 
   ..... 
   if (mStatusBarAvailable) {
     // 這個view容器是decorViewGroup
     setupStatusBarView(activity, decorViewGroup);
   }
   if (mNavBarAvailable) {
     setupNavBarView(activity, decorViewGroup);
   }

 }

注意看上面兩個我手動添加的注釋，可見，這種做法思想就是狀態(tài)欄透明后，向根布局decorViewGroup中添加一個和狀態(tài)欄等高度的view。至于你讓這個view是什么顏色，那就隨你心情了。

2、用標(biāo)題欄的背景色來填充狀態(tài)欄

將狀態(tài)欄設(shè)置為半透明的，此時出現(xiàn)的問題是下面的內(nèi)容會占據(jù)了狀態(tài)欄。

如果我們在activity的根布局添加 android:fitsSystemWindows="true"

那么此時狀態(tài)欄還是可以看見的，并沒有占據(jù)。那這個屬性的作用就在此了。

此時我們借助狀態(tài)欄的高度，為下面的內(nèi)容設(shè)置一個padding-top距離（因?yàn)闋顟B(tài)欄半透明后，下面的內(nèi)容會占據(jù)原有的狀態(tài)欄，那么將其設(shè)置一個padding的狀態(tài)欄高度即可）這樣設(shè)置后，在這個view的背景的padding下，原有的狀態(tài)欄高度填充了同樣的背景色，那么這樣的話就貌似所謂的沉浸式了

這種方式說白了，就是狀態(tài)欄半透明后，用下面的內(nèi)容來合適的填充（因?yàn)槟J(rèn)半透明會是被占據(jù)）

代碼如下：

@SuppressLint("InlinedApi")
public static void setImmerseLayout(Activity context, View view) {
  if (context == null || view == null) {
    return;
  }
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    Window window = context.getWindow();
    window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
        WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    int statusBarHeight = getStatusBarHeight(context.getBaseContext());
    view.setPadding(0, statusBarHeight, 0, 0);
  }
}

/**
 * 用于獲取狀態(tài)欄的高度。 使用Resource對象獲?。ㄍ扑]這種方式）
 *
 * @return 返回狀態(tài)欄高度的像素值。
 */
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;
}

對這個view設(shè)置一個padding_top，而這個padding的距離剛好是狀態(tài)欄的高度，那么這個view的背景就填充到了狀態(tài)欄了。

值得注意的是：這個標(biāo)題欄的高度一定要是wrap_content,因?yàn)槿绻蔷唧w的高度，然后在設(shè)置個paddingtop的話，那么就會把部分標(biāo)題欄的內(nèi)容擠出去了，不完整了。

所以通常的做法是將原有的標(biāo)題欄外面在嵌套一個<FrameLayout /> ，然后將標(biāo)題欄背景設(shè)置成<FrameLayout />的背景色

 <FrameLayout
   android:id="@+id/title"
   android:layout_width="match_parent"
   android:background="@color/common_theme_color"
   android:layout_height="wrap_content">

總結(jié)

關(guān)于沉浸式效果的實(shí)現(xiàn)方式就到這了，希望這篇文章的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家也可以留言交流。

您可能感興趣的文章: