Android界面设计5--管理系统UI

系统栏(System bar)包括状态栏和导航栏(Figure 1)，他们一般都是与程序同时显示在屏幕上的。

而照片、视频等这类沉浸式的应用可以临时弱化系统栏图标来创造一个更加专注的体验环境，甚至可以完全隐藏系统Bar。

Figure 1. System bars，包含[1]状态栏，和[2]导航栏。

Figure 1. System bars，包含[1]状态栏，和[2]导航栏。

淡化系统Bar

Figure 1. System bars，包含[1]状态栏，和[2]导航栏。

//淡化状态栏与导航栏
private void unenableSystemBar() {
    View decorView = this.getWindow().getDecorView();
    int uiOptions = View.SYSTEM_UI_FLAG_LOW_PROFILE;
    decorView.setSystemUiVisibility(uiOptions);
}

//不淡化状态栏与导航栏
private void enableSystemBar() {
    View decorView = this.getWindow().getDecorView();
    // Calling setSystemUiVisibility() with a value of 0 clears
    // all flags.
    decorView.setSystemUiVisibility(0);
}

Figure 1. System bars，包含[1]状态栏，和[2]导航栏。

扫描二维码关注公众号，回复： 1886807 查看本文章

全屏沉浸式应用

在上图中：

1. 非沉浸模式 —— 展示了应用进入沉浸模式之前的状态。也展示了设置IMMERSIVE标签后用户滑动展示系统栏的状态。用户滑动后，SYSTEM_UI_FLAG_HIDE_NAVIGATION和SYSTEM_UI_FLAG_FULLSCREEN就会被清除，系统栏就会重新显示并保持可见。 请注意，最好的实践方式就是让所有的UI控件的变化与系统栏的显示隐藏保持同步，这样可以减少屏幕显示所处的状态，同时提供了更无缝平滑的用户体验。因此所有的UI控件跟随系统栏一同显示。一旦应用进入了沉浸模式，相应的UI控件也跟随着系统栏一同隐藏。为了确保UI的可见性与系统栏保持一致，我们需要一个监听器View.OnSystemUiVisibilityChangeListener来监听系统栏的变化。这在下一节中将详细讲解。

2. 提示气泡——第一次进入沉浸模式时，系统将会显示一个提示气泡，提示用户如何再让系统栏显示出来。

   Note：如果为了测试你想强制显示提示气泡，你可以先将应用设为沉浸模式，然后按下电源键进入锁屏模式，并在5秒中之后打开屏幕。

3. 沉浸模式—— 这张图展示了隐藏了系统栏和其他UI控件的状态。你可以设置IMMERSIVE和IMMERSIVE_STICKY来进入这个状态。

4. 粘性标签——这就是你设置了IMMERSIVE_STICKY标签时的UI状态，用户会向内滑动以展示系统栏。半透明的系统栏会临时的进行显示，一段时间后自动隐藏。滑动的操作并不会清空任何标签，也不会触发系统UI可见性的监听器，因为暂时显示的导航栏并不被认为是一种可见性状态的变化。

//沉浸式APP
private void unenableSystemBar1() {
    hideSystemUI();
}

//退出沉浸式APP
private void enableSystemBar1() {
    showSystemUI();
}

private void hideSystemUI() {
    View decorView = getWindow().getDecorView();
    // Set the IMMERSIVE flag.
    // Set the content to appear under the system bars so that the content
    // doesn't resize when the system bars hide and show.
    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 // hide nav bar
                    | View.SYSTEM_UI_FLAG_FULLSCREEN // hide status bar
                    | View.SYSTEM_UI_FLAG_IMMERSIVE);
}

// This snippet shows the system bars. It does this by removing all the flags
// except for the ones that make the content appear under the system bars.
private void showSystemUI() {
    View decorView = getWindow().getDecorView();
    decorView.setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}