沉浸式设计以及兼容

什么是沉浸式

可以参考SystemBarTint

状态栏 —— StausBar

通过colorPrimaryDark属性修改状态栏，只适用于5.0以后

你可以通过修改主题下的属性，来改变状态栏的颜色

<style name="AppTheme" parent="Theme.AppCompat.Light.[图片上传中...(windowTranslucentStatus_4.4.png-3332a0-1511580222129-0)]
">
    <item name="colorPrimaryDark">@color/red</item>
</style>
版本 说明 对比
4.3 colorPrimaryDark属性
colorPrimary_4.3.png
4.4 colorPrimaryDark属性
colorPrimary_4.4.png
5.0 colorPrimaryDark属性
colorPrimary_5.0.png

那么如何兼容4.4呢？

通过android:windowTranslucentStatus属性兼容4.4

在v19\styles.xml中给主题添加以下属性

<item name="android:windowTranslucentStatus">true</item>
版本 说明 对比
4.3 android:windowTranslucentStatus属性
windowTranslucentStatus_4.3.png
4.4 android:windowTranslucentStatus属性
windowTranslucentStatus_4.4.png
5.0 android:windowTranslucentStatus属性
windowTranslucentStatus_5.0.png

如果要用此方法兼容4.4版本，则许创建v21\styles.xml，给5.0以后的版本提供以下主题：

<item name="colorPrimaryDark">@color/red</item>

否则，5.0以上会沿用v19\styles.xml中定义的主题属性，效果如下图

bad_5.0.png

如果让主题去掉ActionBar，会是怎么样呢？

NoActionBar

如果设置成NoActionBar的主题风格，把布局改成如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/yellow"
        android:gravity="top|center_horizontal"
        android:text="@string/content" />

</LinearLayout>
版本 说明 对比
4.3 NoActionBar
noActionBar_4.3.png
4.4 NoActionBar
noActionBar_4.4.png
5.0 NoActionBar
noActionBar_5.0.png

从结果可以看出4.4版本界面的内容会覆盖StatusBar，而5.0以上则不会出现，那为什么会出现这种情况？通过setContentView源码分析了解，在5.0版本后，PhoneWindow类的installDecor方法中调用了：

// Set up decor part of UI to ignore fitsSystemWindows if appropriate.
mDecor.makeOptionalFitsSystemWindows();

这个方法是在ViewGroup中实现的：

final int count = mChildrenCount;
final View[] children = mChildren;
for (int i = 0; i < count; i++) {
    children[i].makeOptionalFitsSystemWindows();
}

从这个实现来看，就是遍历DecorView的子类添加fitsSystemWindows标记，这个标记是用来干嘛的呢？

fitsSystemWindow解决内容布局和StatusBar重合

fitsSystemWindow 如果设置为true，就是组件都在屏幕内，但是不包括statusBar。设置成false后，整个屏幕都可以放置组件，没有statusBar和window之分

这样，如果在布局中给根布局加上fitsSystemWindow属性，如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

在4.4系统上会显示成下面这样：

fitsSystemWindows_4.4.png

并没有达到我们想要的效果，虽然能和StatusBar区域分隔开，但是StatusBar的颜色却变为了白色，这是为什么呢？虽然我们通过fitsSystemWindow属性让内容部分与StatusBar隔开一定的间距，但是由于4.4中我们给StatusBar设置成了透明色，所以StatusBar区域显示了根布局的背景颜色。

修改根布局背景颜色达到沉浸式效果

因此修改根布局的背景颜色为黄色，则能达到我们想要的效果：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/yellow"
    android:fitsSystemWindows="true">
final_4.4.png

这样子虽然能达到沉浸式效果，但是背景颜色却固定了，而且每个界面的根布局都得添加fitsSystemWindow属性很麻烦，如何统一有效得兼容4.4以上的系统来达到沉浸式效果呢？

最终兼容方案

针对5.0以上的系统

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().setStatusBarColor(barColor);
}

针对4.4到5.0之间的系统

  1. 将StatusBar设置为透明
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
  1. 获取到根布局mContentRoot，设置mContentRoot的FitsSystemWindows
mContentRoot = findViewById(android.R.id.content);
mContentRoot.setFitsSystemWindows(true);
  1. 创建一个和StatusBar高度一样的帧布局作为假的StatusBar，修改其背景颜色达到沉浸效果
FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
        getStatusBarHeight());
FrameLayout frameLayout = new FrameLayout(context);
frameLayout.setLayoutParams(lp);
frameLayout.setBackgroundColor(barColor);
mContentRoot.addView(frameLayout);
如何获取StatusBar的高度

这个高度是在frameworks/base/core/res/res/values/dimens.xml里面定义的：

<!-- Height of the status bar -->
<dimen name="status_bar_height">25dip</dimen>

这个资源文件是系统的，不会生成在项目的R文件中，所以在项目中通过getDimen是找不到这个资源的，只能在系统编译生成的资源文件中找到这个资源。保存在out/target/common/R/com/android/internal/R.java下，

  1. 可以通过反射拿到想要的资源的值
public int getSystemDimenPx(String field) {
    int result = 0;
    try {
        Class clz = Class.forName("com.android.internal.R$dimen");
        Object obj = clz.newInstance();
        int resourceId = Integer.parseInt(clz.getField(field).get(obj).toString());
        if (resourceId > 0)
            result = getResources().getDimensionPixelSize(resourceId);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return result;
}
  1. 可以通过getIdentifier方法获得系统资源id
int result = 0;
int resourceId = Resources.getSystem().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0)
     result = getResources().getDimensionPixelSize(resourceId);

导航栏 —— NavigationBar

和状态栏的实现类似

最终兼容方案

针对5.0以上的系统

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().setNavigationBarColor(barColor);
}

针对4.4到5.0之间的系统

  1. 将NavagationBar设置为透明
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
  1. 判断是否存在导航栏，有些手机没有导航栏，通过物理屏幕减去内容屏幕的相应宽高判断
    private boolean hasNavigationBar(Activity activity) {
        WindowManager windowManager = activity.getWindowManager();
        Display d = windowManager.getDefaultDisplay();

        // 真实物理屏幕
        DisplayMetrics realDisplayMetrics = new DisplayMetrics();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            d.getRealMetrics(realDisplayMetrics);
        }

        int realHeight = realDisplayMetrics.heightPixels;
        int realWidth = realDisplayMetrics.widthPixels;

        // 屏幕内容高度
        DisplayMetrics displayMetrics = new DisplayMetrics();
        d.getMetrics(displayMetrics);

        int displayHeight = displayMetrics.heightPixels;
        int displayWidth = displayMetrics.widthPixels;

        // 防止横屏，宽高都判断
        return (realWidth - displayWidth) > 0 || (realHeight - displayHeight) > 0;
    }
  1. 如果存在导航栏，则在导航栏对应的位置上创建一个和NavagationBar高度一样的帧布局作为假的NavagationBar，修改其背景颜色达到沉浸效果
FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
        getNavigationBarHeight());
lp.gravity = Gravity.BOTTOM;
FrameLayout frameLayout = new FrameLayout(activity);
frameLayout.setLayoutParams(lp);
frameLayout.setBackgroundColor(barColor);
mContentRoot.addView(frameLayout);

最终效果如图：

final_navigation_4.4.png

扩展 —— 如何实现图片全屏沉浸式效果

结合之前分析的如何实现颜色沉浸是效果，得出：

  1. 将StatusBar和NavagationBar设置为透明
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
  1. 获得根布局mContentRoot，遍历将mContentRoot的子View的FitsSystemWindows设置为false，参考ViewGroup的隐藏方法makeOptionalFitsSystemWindows 
final int count = mContentRoot.getChildCount();
for (int i = 0; i < count; i++) {
    mContentRoot.getChildAt(i).setFitsSystemWindows(false);
}
  1. 给mContentRoot的上内边距置为0，否则图片顶不到StatusBar 
mContentRoot.setPadding(mContentRoot.getPaddingLeft(), 0,
                    mContentRoot.getPaddingRight(), mContentRoot.getPaddingBottom());
  1. 让设置了背景图片的View的上内边距加上StatusBar的高度，否则内容会和状态栏重合
drawableView.setPadding(drawableView.getPaddingLeft(), drawableView.getPaddingTop() + getStatusBarHeight(),
                    drawableView.getPaddingRight(), drawableView.getPaddingBottom());

最后的效果：

版本 对比
4.4
pic_immrison_4.4.png
5.0
pic_immrison_5.0.png

细心的已经发现了5.0的版本的状态栏和4.4的有些不一样，5.0的状态栏是半透明的，为什么会这样呢？在代码中针对4.4和5.0同样设置的状态栏透明标记，显示的效果却不同。让我们来看看源码：

5.0如何实现全屏图片

我们知道FLAG_TRANSLUCENT_STATUS是在Window类中通过addFlags添加的，而它的使用则是在DecorView中，DecorView中通过calculateStatusBarColor方法计算状态栏的颜色

calculateStatusBarColor是如何计算状态栏的颜色的

(flags & FLAG_TRANSLUCENT_STATUS) != 0 ? semiTransparentStatusBarColor
 : (flags & FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS) != 0 ? statusBarColor
 : Color.BLACK;
  1. 首先它会判断是否有FLAG_TRANSLUCENT_STATUS标记，如果有这个标记，则会返回semiTransparentStatusBarColor，这个颜色值是个常量mSemiTransparentStatusBarColor，这个常量是在创建DecorView的时候赋值为R.color.system_bar_background_semi_transparent，可以看到在资源文件中的颜色值是百分之40透明度黑色的值，这就是为什么状态栏在5.0显示半透明的原因 
    <!-- Status bar color for semi transparent mode. -->
    <color name="system_bar_background_semi_transparent">#66000000</color> <!-- 40% black -->
  1. 否则会判断是否有FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS标记，如果有这个标记，则会返回
    statusBarColor，这个颜色是由PhoneWindow的setStatusBarColor方法决定的

修改状态栏半透明的解决方案

可以从calculateStatusBarColor方法的第二个判断条件入手：

  1. 5.0以上移除FLAG_TRANSLUCENT_STATUS标记
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
  1. 添加FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS标记
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
  1. 设置状态栏颜色为透明色
getWindow().setStatusBarColor(Color.TRANSPARENT);

导航栏修改类似，最终代码：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            mContentRoot = (ViewGroup) findViewById(android.R.id.content);
            makeOptionalFitsSystemWindows();
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
                getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
                if (hasNavigationBar(this)) {
                    getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
                }
                int uiFlags = View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
                uiFlags |= View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
                uiFlags |= View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION;
                uiFlags |= View.SYSTEM_UI_FLAG_VISIBLE;
                getWindow().getDecorView().setSystemUiVisibility(
                        uiFlags | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
                getWindow().setStatusBarColor(Color.TRANSPARENT);
                getWindow().setNavigationBarColor(Color.TRANSPARENT);
            }
            mContentRoot.setPadding(mContentRoot.getPaddingLeft(), 0,
                    mContentRoot.getPaddingRight(), mContentRoot.getPaddingBottom());
            drawableView.setPadding(drawableView.getPaddingLeft(), drawableView.getPaddingTop() + getStatusBarHeight(),
                    drawableView.getPaddingRight(), drawableView.getPaddingBottom());
        }

运行后的效果：


final_5.0.png

总结

  1. 对于5.0以上主要通过getWindow().setStatusBarColor(barColor);设置状态栏的颜色；4.4到5.0之间主要在状态栏的位置添加一个FrameLayout作为假状态栏，通过改变这个FrameLayout的背景颜色来改变状态栏的颜色，注意的是状态栏必须设置为透明
  2. 对于图片沉浸式，主要是通过设置状态栏透明，并将布局的FitsSystemWindows设置为false，让statusBar和整个组件都在屏幕内，就可以控制根布局的内边距来实现
  3. FitsSystemWindows属性的作用，设置为true，则组件都在屏幕内，但是不包括statusBar；设置成false后，整个屏幕都可以放置组件，没有statusBar和window之分

参考

与Status Bar和Navigation Bar相关的一些东西
全屏、沉浸式、fitSystemWindow使用及原理分析：全方位控制“沉浸式”的实现

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容