美文网首页沉浸式
沉浸式状态栏的探讨

沉浸式状态栏的探讨

作者: MycroftWong | 来源:发表于2019-04-20 15:31 被阅读335次

    沉浸式状态栏的探讨

    1. 常规theme

    <style name="FlagTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!-- 下面这句是默认情况 -->
        <!--<item name="android:windowTranslucentStatus">false</item>-->
    </style>
    
    default.png

    2. windowTranslucentStatus true

    <style name="FlagTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>
    

    可以看出状态栏已经是半透明了

    windowTranslucentStatus.png

    3. android:statusBarColor = @android:color/transparent

    <style name="FlagTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--<item name="android:windowTranslucentStatus">true</item>-->
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
    

    在2的基础上设置状态栏为全透明,注意:这里图片和网页背景冲突,实际上状态栏变成了全白色

    statusBarTransparent.png

    4. 3的解决方案,windowTranslucentNavigation = true

    <style name="FlagTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
    

    可以看出状态栏已经变成了全透明色,不过也可以看见navigation bar变成了半透明色

    excellent.png

    5. 不过设置全透明的navigation bar

    <style name="FlagTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>
    

    并没有任何变化

    transparentNavigation.png

    6. 那尝试设置其他颜色呢?

    <style name="FlagTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:navigationBarColor">@android:color/holo_blue_bright</item>
    </style>
    

    并没有效果,猜测,设置了透明操作栏之后,并不允许再设置操作栏的颜色

    blueNavigation.png

    7. 那回到原点,设置状态栏颜色和操作栏颜色呢

    <style name="FlagTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:statusBarColor">@android:color/holo_blue_dark</item>
        <item name="android:navigationBarColor">@android:color/holo_blue_dark</item>
    </style>
    

    colorPrimaryDark没有效果了,直接设置状态栏的颜色即可

    blueAll.png

    8. 全屏theme, 这个最简单

    <style name="FlagTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowFullscreen">true</item>
    </style>
    

    但是还是有操作栏

    fullscreen.png

    9. 隐藏操作栏

    使用theme是无法实现这个效果的,只有通过代码

    Window window = getWindow();
    window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
    

    根据google的说明,navigation非常重要,只是一个临时的flag, 只要用户有任何操作,都会被清除。

    /**
     * Flag for {@link #setSystemUiVisibility(int)}: View has requested that the
     * system navigation be temporarily hidden.
     *
     * <p>This is an even less obtrusive state than that called for by
     * {@link #SYSTEM_UI_FLAG_LOW_PROFILE}; on devices that draw essential navigation controls
     * (Home, Back, and the like) on screen, <code>SYSTEM_UI_FLAG_HIDE_NAVIGATION</code> will cause
     * those to disappear. This is useful (in conjunction with the
     * {@link android.view.WindowManager.LayoutParams#FLAG_FULLSCREEN FLAG_FULLSCREEN} and
     * {@link android.view.WindowManager.LayoutParams#FLAG_LAYOUT_IN_SCREEN FLAG_LAYOUT_IN_SCREEN}
     * window flags) for displaying content using every last pixel on the display.  
     * 
     * <p>There is a limitation: because navigation controls are so important, the least user
     * interaction will cause them to reappear immediately.  When this happens, both
     * this flag and {@link #SYSTEM_UI_FLAG_FULLSCREEN} will be cleared automatically, 
     * so that both elements reappear at the same time.
     *
     * @see #setSystemUiVisibility(int) 
     */
    public static final int SYSTEM_UI_FLAG_HIDE_NAVIGATION = 0x00000002;
    
    There is a limitation: because navigation controls are so important, the least user 
    interaction will cause them to reappear immediately.  When this happens, both 
    this flag and {@link #SYSTEM_UI_FLAG_FULLSCREEN} will be cleared automatically, 
    so that both elements reappear at the same time.
    

    翻译:

    这存在一个限制,因为操作栏的控制非常重要,所以用户的任何操作都会让它显示出来。
    在这种情况下,当操作栏显示出来之后,这个flag和`SYSTEM_UI_FLAG_FULLSCREEN`将会被自动清除。
    所以,所有的元素将同时出现
    

    参考

    Android9.0 完全隐藏导航栏、状态栏

    Android沉浸式状态栏实现

    Android 5.0 如何实现将布局的内容延伸到状态栏?

    相关文章

      网友评论

        本文标题:沉浸式状态栏的探讨

        本文链接:https://www.haomeiwen.com/subject/ziclgqtx.html