高大上的Android沉浸式状态栏？

Posted 2021-05-15 Jason_Lee155

背景

之前做过android沉浸式状态栏的相关需求，但是一直忙于工作，没时间系统的整理下沉浸式相关的知识，所以今天抽出时间，写一篇 Android沉浸式状态栏的文章。

何为沉浸式

沉浸式就是要给用户提供完全沉浸的体验，使用户有一种置身于虚拟世界之中的感觉。
沉浸式模式就是整个屏幕中显示都是应用的内容，没有状态栏也没有导航栏，用户不会被一些系统的界面元素所打扰。
Android沉浸式模式的本质就是全屏化，但这可能并不是我们想要的，我们还是来实现下网上传的沸沸扬扬的Android沉浸式状态栏

沉浸式状态栏的兼容情况

Android版本	透明状态栏
<4.4	×
4.4-5.0	✓
>=5.0	✓

Android版本	黑白字符状态栏
<6.0	×
>=6.0	✓

fitsSystemWindows

在讲沉浸式状态栏之前，我们先来认识一个属性——fitsSystemWindows，这个属性在沉浸式状态中扮演着非常重要的角色。

• 官方描述

Boolean internal attribute to adjust view layout based on system
windows such as the status bar. If true, adjusts the padding of this view to leave space for the system windows. Will only take effect if this view is in a non-embedded activity.

• 中文描述

Boolean内部属性是基于系统窗口（如status bar）调整视图布局。如果为true，将调整视图padding为系统窗口预留出空间。Will only take effect if this view is in a non-embedded activity.
这句话的意思是view不在非嵌入式的activity才会生效。
嵌入式activity是托管在父activity中的活动。常见的例子是TabHost / TabActivity设计。特别是，嵌入式Acitvities位于主机中 LocalActivityManager，这在概念上类似于 FragmentManager 它允许您在另一个内部显示一个Activity。

根据这个定义，很容易理解为什么只有主机（非嵌入式）Activity才能支持 fitsSystemWindows 属性，因为任何嵌入的活动都限制在其主机定义的区域内。

• 注意：

fitsSystemWindows只作用在sdk>=19的系统上就是高于4.4的系统，android:fitsSystemWindows默认值为false，并且在哪个控件设置android:fitsSystemWindows="true"会有不一样的效果

android:fitsSystemWindows=“true”，这个属性可以给任何view设置,只要设置了这个属性此view的所有padding属性失效.只有在设置了透明状态栏(StatusBar)或者导航栏(NavigationBar)此属性才会生效

当设置了透明状态栏(StatusBar)时:

当为此activity设置了：

<item name="android:windowTranslucentStatus">true</item>
或者
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
   getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

如果有以上两种情况之一,我们的状态栏(StatusBar)就会变成透明,并且布局会扩展到StatusBar的位置同时,所有设置了android:fitsSystemWindows="true"属性的view会自动添加一个值等于状态栏高度的paddingTop

当设置了透明导航栏(NavigationBar)时:

当为此activity设置了：

<item name="android:windowTranslucentNavigation">true</item>
或者
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}

如果有以上两种情况之一,我们的导航栏(NavigationBar)就会变成透明,并且布局会扩展到NavigationBar的位置。同时,所有设置了android:fitsSystemWindows="true"属性的view会自动添加一个值等于导航栏高度的paddingBottom。

沉浸式状态栏实现的一般思路

• 4.4以下版本： 我们可以对StatusBar和 NavigationBar进行显示和隐藏操作，但无法实现沉浸式状态栏。

• Android4.4（API 19） - Android 5.0（API 21)： 通过FLAG_TRANSLUCENT_STATUS设置状态栏为透明并且为全屏模式，然后通过添加一个与StatusBar 一样大小的View，将View 的 background 设置为我们想要的颜色，从而来实现沉浸式。

• Android 5.0（API 21）以上版本： 在Android 5.0的时候，加入了一个重要的属性和方法 android:statusBarColor （对应方法为 setStatusBarColor），通过这个方法我们就可以轻松实现沉浸式。也就是说，从Android5.0开始，系统才真正的支持沉浸式。

• Android 6.0（API 23）以上版本： Android6.0以上的实现方式和Android 5.0 +是一样，但从Android 6.0（API 23）开始，我们可以改状态栏的绘制模式，可以显示白色或浅黑色的内容和图标（除了魅族手机，魅族自家有做源码更改，6.0以下就能实现）

Android4.4（API 19） - Android 5.0（API 21）实现沉浸式的方式

Android 4.4 为什么能够实现沉浸式的效果呢？因为在Android 4.4 新增了一个重要的属性：FLAG_TRANSLUCENT_STATUS

 /**
         * Window flag: request a translucent status bar with minimal system-provided
         * background protection.
         *
         * <p>This flag can be controlled in your theme through the
         * {@link android.R.attr#windowTranslucentStatus} attribute; this attribute
         * is automatically set for you in the standard translucent decor themes
         * such as
         * {@link android.R.style#Theme_Holo_NoActionBar_TranslucentDecor},
         * {@link android.R.style#Theme_Holo_Light_NoActionBar_TranslucentDecor},
         * {@link android.R.style#Theme_DeviceDefault_NoActionBar_TranslucentDecor}, and
         * {@link android.R.style#Theme_DeviceDefault_Light_NoActionBar_TranslucentDecor}.</p>
         *
         * <p>When this flag is enabled for a window, it automatically sets
         * the system UI visibility flags {@link View#SYSTEM_UI_FLAG_LAYOUT_STABLE} and
         * {@link View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}.</p>
         */
        public static final int FLAG_TRANSLUCENT_STATUS = 0x04000000;

解释：设置状态栏透明，并且变为全屏模式。上面的解释已经说得很清楚了，当window的这个属性有效的时候，会自动设置 system ui visibility的标志SYSTEM_UI_FLAG_LAYOUT_STABLE和SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN.

有两种方式实现这个属性：

可以在代码中设置，如下：

activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

当然也可以在theme 中设置属性windowTranslucentStatus,如下：

android:windowTranslucentStatus

效果如下：

效果如上图，可以看出，沉浸式的效果是出来了，但是也有一个问题，我们的标题栏和状态栏重叠了，相当于整个布局上移了StatusBar 的高度。为了让标题栏回到原来的位置，我们在标题栏的上方添加一个大小和StatusBar大小一样的View,View 的BackgroundColor 为标题栏一样的颜色，这个View起到一个占位的作用。这个时候，标题栏就会下移StatusBar的高度，回到正常的位置。
添加如下代码：

       //获取windowphone下的decorView
        ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
        int       count     = decorView.getChildCount();
        //判断是否已经添加了statusBarView
        if (count > 0 && decorView.getChildAt(count - 1) instanceof StatusBarView) {
            decorView.getChildAt(count - 1).setBackgroundColor(calculateStatusColor(color, statusBarAlpha));
        } else {
            //新建一个和状态栏高宽的view
            StatusBarView statusView = createStatusBarView(activity, color, statusBarAlpha);
            decorView.addView(statusView);
        }
        ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
        //rootview不会为状态栏留出状态栏空间
        ViewCompat.setFitsSystemWindows(rootView,true);
        rootView.setClipToPadding(true);

创建和status bar 一样大小的View的代码如下：

 private static StatusBarView createStatusBarView(Activity activity, int color, int alpha) {
        // 绘制一个和状态栏一样高的矩形
        StatusBarView statusBarView = new StatusBarView(activity);
        LinearLayout.LayoutParams params =
                new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(activity));
        statusBarView.setLayoutParams(params);
        statusBarView.setBackgroundColor(calculateStatusColor(color, alpha));
        return statusBarView;
    }

其中StatusBarView 就是一个普通的View。

添加上述代码后，效果如下：

通过以上就可以实现Android 4.4 上的沉浸式状态栏。

另外，如果是一张图片延伸到状态栏的话，直接设置FLAG_TRANSLUCENT_STATUS就可以了，如下：

小结：Android4.4上实现沉浸式状态栏的套路是：为window添加FLAG_TRANSLUCENT_STATUS Flag,然后添加一个和status bar 一样大小的View 站位，从而让让标题栏不会与status bar重叠。而图片延伸到状态栏只需要设置FLAG_TRANSLUCENT_STATUS就OK。

沉浸式在Android4.4 - Android5.0 之间的版本表现得不是很好，从上面贴的几张图就可以看出，状态栏的顶部有一个渐变，会显示出黑色的阴影（底部的导航栏也是一样的效果），在Android 5.0 版本已经被修复了。

Android 5.0（API 21）以上实现沉浸式的方式

Android 5.0 是一个里程碑式的版本，从Android 5.0开始，Google 推出了全新的设计规范 Material Design,并且原生控件就可以实现一些炫酷的UI动效。从这个版本开始，google 加入了一个比较重要的方法setStatusBarColor (对应属性：android:statusBarColor),通过这个方法，可以很轻松地实现沉浸式状态栏。方法如下：

 /**
     * Sets the color of the status bar to {@code color}.
     *
     * For this to take effect,
     * the window must be drawing the system bar backgrounds with
     * {@link android.view.WindowManager.LayoutParams#FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS} and
     * {@link android.view.WindowManager.LayoutParams#FLAG_TRANSLUCENT_STATUS} must not be set.
     *
     * If {@code color} is not opaque, consider setting
     * {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} and
     * {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}.
     * <p>
     * The transitionName for the view background will be "android:status:background".
     * </p>
     */
    public abstract void setStatusBarColor(@ColorInt int color);

注意看这个方法的注释，想要这个方法生效，必须还要配合一个Flag一起使用，必须设置FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS ,并且不能设置FLAG_TRANSLUCENT_STATUS(Android 4.4才用这个).

看一下FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS这个flag:

可以看到，这个flag 也是在Android 5.0添加的，它的作用是什么呢？

解释：设置了FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS,表明会Window负责系统bar的background 绘制，绘制透明背景的系统bar（状态栏和导航栏），然后用getStatusBarColor()和getNavigationBarColor()的颜色填充相应的区域。这就是Android 5.0 以上实现沉浸式导航栏的原理。

实现沉浸式添加如下代码：

getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
//注意要清除 FLAG_TRANSLUCENT_STATUS flag
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().setStatusBarColor(getResources().getColor(android.R.color.holo_red_light));

效果如下：

当然也可以直接在Theme中使用，在values-v21文件夹下添加如下主题：

<style name="MDTheme" parent="Theme.Design.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/holo_red_light</item>
    </style>

效果和上面代码中添加的效果一样。

图片延伸到状态栏

在Android 5.0使图片延伸到状态栏，只需设置windowTranslucentStatus,将 statusBarColor 设置为透明即可：

<style name="ImageTranslucentTheme" 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>

效果如下：

代码实现方式中通过版本号的判断兼容 Android5.0以下和Android 5.0以上：

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            activity.getWindow().setStatusBarColor(calculateStatusColor(color, statusBarAlpha));
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
            int count = decorView.getChildCount();
            if (count > 0 && decorView.getChildAt(count - 1) instanceof StatusBarView) {
                decorView.getChildAt(count - 1).setBackgroundColor(calculateStatusColor(color, statusBarAlpha));
            } else {
                StatusBarView statusView = createStatusBarView(activity, color, statusBarAlpha);
                decorView.addView(statusView);
            }

            ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
            rootView.setFitsSystemWindows(true);
            rootView.setClipToPadding(true);
            setRootView(activity);
}

Android 6.0 + 实现状态栏字色和图标浅黑色

使用沉浸式的时候会遇到一个问题，那就是Android 系统状态栏的字色和图标颜色为白色，当我的主题色或者图片接近白色或者为浅色的时候，状态栏上的内容就看不清了。 这个问题在Android 6.0的时候得到了解决。Android 6.0 新添加了一个属性SYSTEM_UI_FLAG_LIGHT_STATUS_BAR

解释：为setSystemUiVisibility(int)方法添加的Flag,请求status bar
绘制模式，它可以兼容亮色背景的status bar 。要在设置了FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDSflag
,同时清除了FLAG_TRANSLUCENT_STATUSflag 才会生效。

添加如下代码：

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);
}

效果如下：

除了在代码中添加以外，还可以直接在主题中使用属性：

 <style name="MDTheme" parent="Theme.Design.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/holo_red_light</item>
        <!-- Android 6.0以上 状态栏字色和图标为浅黑色-->
        <item name="android:windowLightStatusBar">true</item>
    </style>

注意：主题要放在values-v23文件夹下。