Android 实现沉浸式状态栏的效果

Posted 2021-09-27 路宇

什么是状态栏:

是指手机左上最顶上，显示中国移动、安全卫士、电量、网速等等，在手机的顶部。下拉就会出现通知栏。

下面我放一张图带大家认识一下

沉浸式状态栏：:

简单来说就是状态栏会根据手机内容适应性变色，使软件和系统本身更加融为一体，大大提升了用户体验。

下面我来介绍一下

一、标题栏延伸到状态栏

适用于android6.0+

因为我的标题栏是白色，而Android 系统状态栏的字色和图标颜色也为白色，所以这样就会导致状态栏上的内容比如时间，电量等等就看不清楚了。

这个问题在Android 6.0的时候得到了解决。Android 6.0 新添加了一个属性SYSTEM_UI_FLAG_LIGHT_STATUS_BAR

代码如下：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
		    getWindow().setStatusBarColor(getResources().getColor(R.color.white));//设置状态栏颜色
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);//实现状态栏图标和文字颜色为暗色
        }

这样一步就可以实现沉浸式状态栏的效果了。

当然我们也可以在资源文件中实现这个效果：
在res文件下新建一个目录(Directory)名为：values-v21 在该目录下 创建styles.xml文件
里面代码如下：

<!--标题栏延伸到状态栏-->
<style name="MDTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/white</item>
    </style>

之后在java文件中添加如下代码，这样才能使状态栏的字体变成暗色。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
        }

效果如下：

以上两种方法均需要在根布局添加一个属性

android:fitsSystemWindows="true"

该属性就是适应系统窗口，调整此视图的填充为系统窗口留出空间，意思就是说状态栏和标题栏不重合，如果不加此属性，标题栏会到手机的顶部，导致状态栏覆盖标题栏。

二、图片栏延伸到状态栏

同样也是在values-v21目录下的styles.xml文件中实现：

<!--    图片延伸到状态栏-->
<style name="MDTheme_IMAGE" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowTranslucentStatus">true</item>
        <!--设置statusBarColor为透明-->
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

效果图如下：

我们看到这并不是完全的沉浸式，而是半灰的一种效果。

接下来我们实现完全的沉浸式效果。
代码如下：

//这个特性是安卓5.0以后才支持的所以需要对系统版本号做判断
        if (Build.VERSION.SDK_INT>Build.VERSION_CODES.LOLLIPOP){
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            |View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            );
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        }

效果图如图：

以上就是沉浸式实现的方法，如有不当之处，欢迎大家指出，一起努力，共同进步~