Android 沉浸式状态栏的简单实现

最新推荐文章于 2024-08-22 17:46:38 发布

mm860659

最新推荐文章于 2024-08-22 17:46:38 发布

阅读量4k

点赞数 1

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/mm860659/article/details/77983103

版权

Android 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

原则上没有沉浸式状态栏这个概念的，知乎，鸿阳，郭霖大神也在博文中提到过。从字面上讲，沉浸，应该理解为全屏模式，隐藏掉状态栏和导航栏，适合播放视频。
本节我们讨论的沉浸指的是状态栏的优化，和ios状态栏效果类似。
先上两张图：

这里写图片描述

这里写图片描述
注意到两者状态栏的区别了吗。前者状态栏有一个透明度，下面普通蓝色的背景延伸到透明模板下面，造成了蓝色的加深。后者纯粹是在状态栏设置了一个单独颜色。那么两者在具体app会达成什么具体效果？

我们来看看QQ的状态栏：

这里写图片描述

从5.0系统之后，我们可以直接设置状态栏颜色，但也只能设置颜色，纯色而已。为了达到QQ状态栏的这种渐变效果或者是图片，只能使用沉浸式方案。

我们知道现在默认activity的主题是Theme.AppCompat.Light.DarkActionBar，现在修改成
Theme.AppCompat.Light.NoActionBar，同时在我们的布局中使用toolbar。
同样的主题：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowTranslucentStatus">true</item>
</style>

布局方案：
这里写图片描述
预览界面稍有特别，但实机运行正常

好像toolbar外层的relativelayout 可以去掉不影响效果，大家可以试试
划重点，很重要：
在你的activity中得加些代码：

toolbar = findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Camera");

不加没有这个效果
下面是4.4的系统效果，正常使用。
这里写图片描述
5.1的系统：

方案2-普通布局

在上面的基础上修改，之前我们使用的是toolbar，现在来用普通布局来实现，这里使用的是RelativeLayout ，当然其他布局也应该可以的。
首先是设置主题：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowTranslucentStatus">true</item>
</style>

我选择了NoActionBar，因为要使用普通布局来替代actionbar。在这里又添加了一个属性
即android:windowTranslucentStatus = true，意为设置透明状态栏。还有一些windowNoTitle属性等等，根本就不需要写，因为Theme.AppCompat.Light.NoActionBar就自带了这个属性，写了也多余。
在来看看状态栏的布局：

这里写图片描述

这是上面布局的预览界面：
这里写图片描述
在预览时，camera 会跑到状态栏下面，不过实机运行时是正常的。
中间的两个嵌套的Relativelayout就是实现沉浸式状态栏的布局，可能有人会问，这不是明显加深了布局吗？确实是这样，但也没办法。
划重点：
最外层的Relativelayout 的height 属性一定要写成wrap_content ，千万不要写死，同时补上
android:fitsSystemWindows=”true”。内部再嵌套一个relativelayout ，同时设置布局高度，里面在设置具体布局即可。52dp大约是actionbar 的高度。不要在其他布局上也写android:fitsSystemWindows=”true”，例如最顶层的linearlayout ，很重要。这样我们的工作就完成了。
下面状态栏背景换成渐变色试试，即为最外层relativelayout 设置不同的background属性
5.1的系统，大于此系统的也一样的效果
这里写图片描述
4.4的系统

至于4.4之前的用户，已经非常少了，我也不确定有没有副作用。
以上都是渐变色，下面换成图片试试：
这里写图片描述

4.4和5.1以上系统正常，但要特别注意，所用的图片尺寸要合适，不宜太大，也不宜太小。

总结

关于沉浸式的解决方案网上有太多，有好有坏，有的写得较为复杂，例如：

View decorView = 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);

还有的新建一个状态栏高度的view，设置颜色，同时设置activity的主题为全屏，也有人为布局设置一个paddingTop，大小为状态栏高度等等。以上的方案具体哪个好，大家自行判断取舍。
本文采用了较为简单的方案，只需设置一下主题，改下布局即可。理解也容易，仅供大家参考。
以上方案，也在8.0的系统测试过，目前正常。
如果在实际过程中有遇到较低版本，又或者是国内不同的rom的问题，欢迎下面留言提出。