快捷導(dǎo)航

Android 沉浸式狀態(tài)欄與隱藏導(dǎo)航欄實例詳解

更新時間：2017年07月05日 16:40:31 作者：帶你裝逼帶你飛的程序猿

沉浸式狀態(tài)欄是指狀態(tài)欄與ActionBar顏色相匹配，隱藏導(dǎo)航欄，就是將導(dǎo)航欄隱藏，去掉下面的黑條。下面通過實例給大家詳解android沉浸式狀態(tài)欄與隱藏導(dǎo)航欄，感興趣的朋友一起看看

1 前言

一般我們在Android的APP開發(fā)中，APP的界面如下：

這里寫圖片描述

可以看到，有狀態(tài)欄、ActionBar(ToolBar)、導(dǎo)航欄等,一般來說，APP實現(xiàn)沉浸式有三種需求：沉浸式狀態(tài)欄，隱藏導(dǎo)航欄，APP全屏

沉浸式狀態(tài)欄是指狀態(tài)欄與ActionBar顏色相匹配，

隱藏導(dǎo)航欄不用多說，就是將導(dǎo)航欄隱藏，去掉下面的黑條。

APP全屏是指將狀態(tài)欄與導(dǎo)航欄都隱藏，例如很多游戲界面，都是APP全屏。

所以，在做這一步時，關(guān)鍵要問清楚產(chǎn)品狗的需求，免得白費功夫。

下面，分別來介紹這三種方式的實現(xiàn)。

2 沉浸式狀態(tài)欄

沉浸式狀態(tài)欄效果一般如下：

這里寫圖片描述

關(guān)于沉浸式狀態(tài)欄網(wǎng)上的方案很多，比如android 5.0 以上的MD設(shè)計，或者修改activiyty的window的setStatusBarColor()方法，設(shè)置顏色。需要說明一點的時，沉浸式狀態(tài)欄只對API19以上有效。

這里我依然采用的是設(shè)置Activity的Window設(shè)置setStatusBarColor()的方法。代碼如下：

/**
   * 設(shè)置狀態(tài)欄的顏色
   */
  @TargetApi(Build.VERSION_CODES.KITKAT)
  public static void statusBarTintColor(Activity activity, int color) {
    // 代表 5.0 及以上
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      activity.getWindow().setStatusBarColor(color);
      return;
    }
    // versionCode > 4.4 and versionCode < 5.0
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
      //透明狀態(tài)欄
      activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
      ViewGroup androidContainer = (ViewGroup) activity.findViewById(android.R.id.content);
      // 留出高度 setFitsSystemWindows true代表會調(diào)整布局，會把狀態(tài)欄的高度留出來
      View contentView = androidContainer.getChildAt(0);
      if (contentView != null) {
        contentView.setFitsSystemWindows(true);
      }
      // 在原來的位置上添加一個狀態(tài)欄
      View statusBarView = createStatusBarView(activity);
      androidContainer.addView(statusBarView, 0);
      statusBarView.setBackgroundColor(color);
    }
  }
  /**
   * 創(chuàng)建一個需要填充statusBarView
   */
  private static View createStatusBarView(Activity activity) {
    View statusBarView = new View(activity);
    ViewGroup.LayoutParams statusBarParams = new ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(activity));
    statusBarView.setLayoutParams(statusBarParams);
    return statusBarView;
  }
  /**
   * 獲取狀態(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;
  }

3 隱藏導(dǎo)航欄

隱藏導(dǎo)航欄就是使用了UI Flag

/**
   *
   * @param activity
   * @param
   */
  public static void setNavigationBar(Activity activity,int visible){
    View decorView = activity.getWindow().getDecorView();
    //顯示NavigationBar
    if (View.GONE == visible){
      int option = SYSTEM_UI_FLAG_HIDE_NAVIGATION;
      decorView.setSystemUiVisibility(option);
    }
  }

4 APP全屏

這里的APP全屏又分為隱藏狀態(tài)欄與ActionBar，與隱藏導(dǎo)航欄，狀態(tài)欄。

隱藏狀態(tài)欄：

/**
   * 設(shè)置Activity的statusBar隱藏
   * @param activity
   */
  public static void statusBarHide(Activity activity){
    // 代表 5.0 及以上
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      View decorView = activity.getWindow().getDecorView();
      int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
      decorView.setSystemUiVisibility(option);
      activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
      ActionBar actionBar = activity.getActionBar();
      actionBar.hide();
      return;
    }
    // versionCode > 4.4 and versionCode < 5.0
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
      activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }
  }

效果如下：

這里寫圖片描述

這里先調(diào)用getWindow().getDecorView()方法獲取到了當前界面的DecorView，然后調(diào)用它的setSystemUiVisibility()方法來設(shè)置系統(tǒng)UI元素的可見性。其中，SYSTEM_UI_FLAG_FULLSCREEN表示全屏的意思，也就是會將狀態(tài)欄隱藏。另外，根據(jù)Android的設(shè)計建議，ActionBar是不應(yīng)該獨立于狀態(tài)欄而單獨顯示的，因此狀態(tài)欄如果隱藏了，我們同時也需要調(diào)用ActionBar的hide()方法將ActionBar也進行隱藏。

隱藏導(dǎo)航欄，狀態(tài)欄：

一般游戲需要這種界面，代碼如下：

在Activity的onWindowFocusChanged（）中去設(shè)置界面完全全屏。

 /**
   * 導(dǎo)航欄，狀態(tài)欄隱藏
   * @param activity
   */
  public static void NavigationBarStatusBar(Activity activity,boolean hasFocus){
    if (hasFocus && Build.VERSION.SDK_INT >= 19) {
      View decorView = activity.getWindow().getDecorView();
      decorView.setSystemUiVisibility(
          View.SYSTEM_UI_FLAG_LAYOUT_STABLE
              | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
              | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
              | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
              | View.SYSTEM_UI_FLAG_FULLSCREEN
              | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
    }
  }

效果如下：

這里寫圖片描述

可以看到，界面默認情況下是全屏的，狀態(tài)欄和導(dǎo)航欄都不會顯示。而當我們需要用到狀態(tài)欄或?qū)Ш綑跁r，只需要在屏幕頂部向下拉，或者在屏幕右側(cè)向左拉，狀態(tài)欄和導(dǎo)航欄就會顯示出來，此時界面上任何元素的顯示或大小都不會受影響。過一段時間后如果沒有任何操作，狀態(tài)欄和導(dǎo)航欄又會自動隱藏起來，重新回到全屏狀態(tài)。

透明狀態(tài)欄,導(dǎo)航欄：

另外，通過設(shè)置UI Flag，可以讓導(dǎo)航欄，狀態(tài)欄都透明化。

/**
   * 導(dǎo)航欄，狀態(tài)欄透明
   * @param activity
   */
  public static void setNavigationBarStatusBarTranslucent(Activity activity){
    if (Build.VERSION.SDK_INT >= 21) {
      View decorView = activity.getWindow().getDecorView();
      int option = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
          | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
          | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
      decorView.setSystemUiVisibility(option);
      activity.getWindow().setNavigationBarColor(Color.TRANSPARENT);
      activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
    }
    ActionBar actionBar = activity.getActionBar();
    actionBar.hide();
  }

效果如下：

這里寫圖片描述