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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mm860659/article/details/77983103

前言


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

这里写图片描述

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

我们来看看QQ的状态栏:

这里写图片描述

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


方案1 -toolbar

我们知道现在默认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的问题,欢迎下面留言提出。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页