Android 沉浸式狀態欄與隱藏導航欄實例詳解

2019-12-12 02:32:16

字體：大中小

來源：轉載

供稿：網友

1 前言

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

這里寫圖片描述

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

沉浸式狀態欄是指狀態欄與ActionBar顏色相匹配，

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

APP全屏是指將狀態欄與導航欄都隱藏，例如很多游戲界面，都是APP全屏。

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

下面，分別來介紹這三種方式的實現。

2 沉浸式狀態欄

沉浸式狀態欄效果一般如下：

這里寫圖片描述

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

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

/**   * 設置狀態欄的顏色   */  @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) {      //透明狀態欄      activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);      ViewGroup androidContainer = (ViewGroup) activity.findViewById(android.R.id.content);      // 留出高度 setFitsSystemWindows true代表會調整布局，會把狀態欄的高度留出來      View contentView = androidContainer.getChildAt(0);      if (contentView != null) {        contentView.setFitsSystemWindows(true);      }      // 在原來的位置上添加一個狀態欄      View statusBarView = createStatusBarView(activity);      androidContainer.addView(statusBarView, 0);      statusBarView.setBackgroundColor(color);    }  }  /**   * 創建一個需要填充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;  }  /**   * 獲取狀態欄的高度   */  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 隱藏導航欄

隱藏導航欄就是使用了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全屏又分為隱藏狀態欄與ActionBar，與隱藏導航欄，狀態欄。

隱藏狀態欄：

/**   * 設置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);    }  }

效果如下：

這里寫圖片描述

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

隱藏導航欄，狀態欄：

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

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

 /**   * 導航欄，狀態欄隱藏   * @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);    }  }

效果如下：

這里寫圖片描述

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

透明狀態欄,導航欄：

另外，通過設置UI Flag，可以讓導航欄，狀態欄都透明化。

/**   * 導航欄，狀態欄透明   * @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();  }

效果如下：

這里寫圖片描述