前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >笔记53 | 管理系统UI(一)

笔记53 | 管理系统UI(一)

作者头像
项勇
发布2018-06-19 15:47:17
1.4K0
发布2018-06-19 15:47:17
举报
文章被收录于专栏:项勇项勇

淡化状态栏和系统栏

如果要淡化状态和通知栏,在版本为4.0以上的Android系统上,你可以像如下使用 SYSTEM_UI_FLAG_LOW_PROFILE这个标签。

代码语言:javascript
复制
// This example uses decor view, but you can use any visible view.
View decorView = getActivity().getWindow().getDecorView();
int uiOptions = View.SYSTEM_UI_FLAG_LOW_PROFILE;
decorView.setSystemUiVisibility(uiOptions);

一旦用户触摸到了状态栏或者是系统栏,这个标签就会被清除,使系统栏重新显现(无透明度)。在标签被清除的情况下,如果你想重新淡化系统栏就必须重新设定这个标签。

图1展示了一个图库中的图片,界面的系统栏都已被淡化(需要注意的是图库应用完全隐藏状态栏,而不是淡化它);注意导航栏(图片的右侧)上变暗的白色的小点,他们代表了被隐藏的导航操作。

图1.淡化的系统栏

图2展示的是同一张图片,系统栏处于显示的状态。

图2.显示的系统栏

显示状态栏与导航栏

如果你想动态的清除显示标签,你可以使用 setSystemUiVisibility()方法:

代码语言:javascript
复制
View decorView = getActivity().getWindow().getDecorView();
// Calling setSystemUiVisibility() with a value of 0 clears
// all flags.
decorView.setSystemUiVisibility(0);

隐藏状态栏

这节课将教您

  1. 在4.0及以下版本中隐藏状态栏
  2. 在4.1及以上版本中隐藏状态栏
  3. 在4.4及以上版本中隐藏状态栏
  4. 让内容显示在状态栏之后
  5. 同步状态栏与Action Bar的变化

同时您应该阅读

  • Action Bar API 指南
  • Android Design Guide

本课程将教您如何在不同版本的Android下隐藏状态栏。隐藏状态栏(或者是导航栏)可以让内容得到更多的展示空间,从而提供一个更加沉浸式的用户体验。

图1展示了显示状态栏的界面

图1. 显示状态栏.

图2展示了隐藏状态栏的界面。请注意,Action Bar这个时候也被隐藏了。请永远不要在隐藏状态栏的时候显示Action Bar。

图2. 隐藏状态栏.

在4.0及以下版本中隐藏状态栏

在Android 4.0及更低的版本中,你可以通过设置 WindowManager来隐藏状态栏。你可以动态的隐藏,也可以在你的manifest文件中设置Activity的主题。如果你的应用的状态栏在运行过程中会一直隐藏,那么推荐你使用改写manifest设定主题的方法(严格上来讲,即便设置了manifest你也可以动态的改变界面主题)。

代码语言:javascript
复制
<application
    ...
    android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" >
    ...
</application>

设置主题的优势是:

  • 易于维护,且不像动态设置标签那样容易出错
  • 有更流畅的UI转换,因为在初始化你的Activity之前,系统已经得到了需要渲染UI的信息

另一方面我们可以选择使用 WindowManager来动态隐藏状态栏。这个方法可以更简单的在用户与App进行交互式展示与隐藏状态栏。

代码语言:javascript
复制
public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // If the Android version is lower than Jellybean, use this call to hide
        // the status bar.
        if (Build.VERSION.SDK_INT < 16) {
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                    WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
        setContentView(R.layout.activity_main);
    }
    ...
}

当你设置 WindowManager标签之后(无论是通过Activity主题还是动态设置),这个标签都会一直生效直到你清除它。

设置了 FLAG_LAYOUT_IN_SCREEN之后,你可以拥有与启用 FLAG_FULLSCREEN后相同的屏幕区域。这个方法防止了状态栏隐藏和展示的时候内容区域的大小变化。

在4.1及以上版本中隐藏状态栏

在Android 4.1(API level 16)以及更高的版本中,你可以使用setSystemUiVisibility()来进行动态隐藏。 setSystemUiVisibility()在View层面设置了UI的标签,然后这些设置被整合到了Window层面。 setSystemUiVisibility()给了你一个比设置 WindowManager标签更加粒度化的操作。下面这段代码隐藏了状态栏:

代码语言:javascript
复制
View decorView = getWindow().getDecorView();
// Hide the status bar.
int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(uiOptions);
// Remember that you should never show the action bar if the
// status bar is hidden, so hide that too if necessary.
ActionBar actionBar = getActionBar();
actionBar.hide();

注意以下几点:

  • 一旦UI标签被清除(比如跳转到另一个Activity),如果你还想隐藏状态栏你就必须再次设定它。详细可以看第五节如何监听并响应UI可见性的变化。
  • 在不同的地方设置UI标签是有所区别的。如果你在Activity的onCreate()方法中隐藏系统栏,当用户按下home键系统栏就会重新显示。当用户再重新打开Activity的时候,onCreate()不会被调用,所以系统栏还会保持可见。如果你想让在不同Activity之间切换时,系统UI保持不变,你需要在onResume()与onWindowFocusChaned()里设定UI标签。
  • setSystemUiVisibility()仅仅在被调用的View显示的时候才会生效。
  • 当从View导航到别的地方时,用setSystemUiVisibility()设置的标签会被清除。

让内容显示在状态栏之后

在Android 4.1及以上版本,你可以将应用的内容显示在状态栏之后,这样当状态栏显示与隐藏的时候,内容区域的大小就不会发生变化。要做到这个效果,我们需要用到 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN这个标志。同时,你也有可能需要 SYSTEM_UI_FLAG_LAYOUT_STABLE这个标志来帮助你的应用维持一个稳定的布局。

当使用这种方法的时候,你就需要来确保应用中特定区域不会被系统栏掩盖(比如地图应用中一些自带的操作区域)。如果被覆盖了,应用可能就会无法使用。在大多数的情况下,你可以在布局文件中添加 android:fitsSystemWindows标签,设置它为true。它会调整父ViewGroup使它留出特定区域给系统栏,对于大多数应用这种方法就足够了。

在一些情况下,你可能需要修改默认的padding大小来获取合适的布局。为了控制内容区域的布局相对系统栏(它占据了一个叫做“内容嵌入” content insets的区域)的位置,你可以重写 fitSystemWindows(Rectinsets)方法。当窗口的内容嵌入区域发生变化时, fitSystemWindows()方法会被view的hierarchy调用,让View做出相应的调整适应。重写这个方法你就可以按你的意愿处理嵌入区域与应用的布局。

同步状态栏与Action Bar的变化

在Android 4.1及以上的版本,为了防止在Action Bar隐藏和显示的时候布局发生变化,你可以使用Action Bar的overlay模式。在Overlay模式中,Activity的布局占据了所有可能的空间,好像Action Bar不存在一样,系统会在布局的上方绘制Aciton Bar。虽然这会遮盖住上方的一些布局,但是当Action Bar显示或者隐藏的时候,系统就不需要重新改变布局区域的大小,使之无缝的变化。

要启用Action Bar的overlay模式,你需要创建一个继承自Action Bar主题的自定义主题,将 android:windowActionBarOverlay属性设置为true。要了解详细信息,请参考添加Action Bar课程中的Action Bar的覆盖层叠。

设置 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN来让你的activity使用的屏幕区域与设置 SYSTEM_UI_FLAG_FULLSCREEN时的区域相同。当你需要隐藏系统UI时,使用 SYSTEM_UI_FLAG_FULLSCREEN。这个操作也同时隐藏了Action Bar(因为 windowActionBarOverlay="true"),当同时显示与隐藏ActionBar与状态栏的时候,使用一个动画来让他们相互协调。

隐藏导航栏

这节课将教您

  1. 在4.0及以上版本中隐藏导航栏
  2. 让内容显示在导航栏之后

本节课程将教您如何对导航栏进行隐藏,这个特性是Android 4.0()版本中引入的。

即便本小节仅关注如何隐藏导航栏,但是在实际的开发中,你最好让状态栏与导航栏同时消失。在保证导航栏易于再次访问的情况下,隐藏导航栏与状态栏使内容区域占据了整个显示空间,因此可以提供一个更加沉浸式的用户体验。

图1. 导航栏.

在4.0及以上版本中隐藏导航栏

你可以在Android 4.0以及以上版本,使用 SYSTEM_UI_FLAG_HIDE_NAVIGATION标志来隐藏导航栏。这段代码同时隐藏了导航栏和系统栏:

代码语言:javascript
复制
View decorView = getWindow().getDecorView();
// Hide both the navigation bar and the status bar.
// SYSTEM_UI_FLAG_FULLSCREEN is only available on Android 4.1 and higher, but as
// a general rule, you should design your app to hide the status bar whenever you
// hide the navigation bar.
int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
              | View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(uiOptions);

注意以下几点

  • 使用这个方法时,触摸屏幕的任何一个区域都会使导航栏(与状态栏)重新显示。用户的交互会使这个标签 SYSTEM_UI_FLAG_HIDE_NAVIGATION被清除。
  • 一旦这个标签被清除了,如果你想再次隐藏导航栏,你就需要重新对这个标签进行设定。在下一节响应UI可见性的变化中,将详细讲解应用监听系统UI变化来做出相应的调整操作。
  • 在不同的地方设置UI标签是有所区别的。如果你在Activity的onCreate()方法中隐藏系统栏,当用户按下home键系统栏就会重新显示。当用户再重新打开activity的时候,onCreate()不会被调用,所以系统栏还会保持可见。如果你想让在不同Activity之间切换时,系统UI保持不变,你需要在onReasume()与onWindowFocusChaned()里设定UI标签。
  • setSystemUiVisibility()仅仅在被调用的View显示的时候才会生效。
  • 当从View导航到别的地方时,用setSystemUiVisibility()设置的标签会被清除。

2)让内容显示在导航栏之后

在Android 4.1与更高的版本中,你可以让应用的内容显示在导航栏的后面,这样当导航栏展示或隐藏的时候内容区域就不会发生布局大小的变化。可以使用 SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION标签来做到这个效果。同时,你也有可能需要 SYSTEM_UI_FLAG_LAYOUT_STABLE这个标签来帮助你的应用维持一个稳定的布局。

当你使用这种方法的时候,就需要你来确保应用中特定区域不会被系统栏掩盖。更详细的信息可以浏览隐藏状态栏一节。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-12-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 项勇 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 淡化状态栏和系统栏
  • 显示状态栏与导航栏
  • 隐藏状态栏
    • 在4.0及以下版本中隐藏状态栏
      • 在4.1及以上版本中隐藏状态栏
        • 让内容显示在状态栏之后
          • 同步状态栏与Action Bar的变化
          • 隐藏导航栏
            • 在4.0及以上版本中隐藏导航栏
              • 2)让内容显示在导航栏之后
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档