fitsSystemWindows的理解与沉浸式状态栏实现

参考

android中fitsSystemWindows的用处
我们为什么要用fitsSystemWindows?
全屏、沉浸式、fitSystemWindow使用及原理分析：全方位控制“沉浸式”的实现
Android开发：Translucent System Bar 的最佳实践
Android 沉浸式状态栏攻略 让你的状态栏变色吧

背景

在实现沉浸式状态栏时，我们会用到android:fitsSystemWindows="true"这个属性，对于该属性网上给出的解释实在有些模糊，这里我先描述我对这个属性的理解，理解后再来实现沉浸式状态栏效果。

个人理解

在设置了透明状态栏(StatusBar)或者导航栏(NavigationBar)之后，activity的内容会延伸至对应的区域，使得该区域出现重叠现象，这对内容包含交互控件的情况影响尤其巨大，为了解决这个情况，fitsSystemWindows属性出现了，我们可以为任何view添加此属性，设置了该属性的view的所有padding属性将失效，并且系统会根据情况给该view添加paddingTop和paddingBottom（当设置透明状态栏时，系统会为该view添加一个值等于状态栏高度的paddingTop，当设置了透明导航栏时，系统会为该view添加一个值等于导航栏高度的paddingBottom）。

在默认情况下，多个view设置该属性时，只有最外层的view才会起作用；我们也可以通过覆写自定义view的一些方法来决定自身的处理，及子view是否有机会截断并对fitsSystemWindows做出自己的反应，如DrawerLayout、CoordinatorLayout和CollapsingToolbarLayout就使用了自定义fitsSystemWindow（难怪给drawerLayout设置该属性时和我们理解的行为不一致）。

有了以上的理解，我们可以来动手实现沉浸式状态栏了。

沉浸式状态栏

我们要实现的效果有以下两种：

1. 背景图片填满了整个屏幕。
2. 状态栏和actionBar颜色一致。

第一种效果：

我们只需要把内容延伸至状态栏和导航栏，然后给根布局设置图片背景，若需要内容不出现在状态栏和导航栏区域则再添加android:fitsSystemWindows="true"既可。

1. 在values、values-v19、values-v21的style.xml都设置一个 Translucent System Bar 风格的Theme。

values/style.xml

<style name="AppTheme.Image" parent="AppTheme"/>

values-v19/style.xml和values-v21/style.xml

<style name="AppTheme.Image" parent="AppTheme">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

2. 给activity设置theme。

<activity android:name=".ImageActivity"
    android:theme="@style/AppTheme.Image"/>

3. 布局添加背景图片和android:fitsSystemWindows="true"。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@drawable/image"
    tools:context="com.example.myfitwindowsystems.ImageActivity">

</RelativeLayout>

5.0效果：

image.png

4.4效果：

image.png

若想要去掉5.0系统的半透明状态栏，我们可以设置状态栏颜色为透明，想要设置状态栏，那么就不能隐藏掉状态栏了，因此设置如下：

values-v21/style.xml

<style name="AppTheme.Image" parent="AppTheme">
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

第二种效果

别管兼容4.4了~~ 现在都8.1了~~ 直接修改statusBar颜色不就美滋滋了~~

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
    getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimary));
}

或者修改values-v21/style.xml

<style name="AppTheme.Color" parent="AppTheme">
    <item name="android:statusBarColor">@color/colorPrimary</item>
</style>

算了，还是写一下兼容写法吧

1. 添加theme

values-v19/style.xml

<style name="AppTheme.Color" parent="AppTheme">
    <item name="android:windowTranslucentStatus">true</item>
</style>

values-v21/style.xml

<style name="AppTheme.Color" parent="AppTheme">
    <item name="android:statusBarColor">@color/colorPrimary</item>
</style>

2. 设置theme

<activity android:name=".ColorActivity"
    android:theme="@style/AppTheme.Color">

3. 修改布局文件
   在toolbar添加android:fitsSystemWindows="true"，记得高度为wrap_content。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.myfitwindowsystems.ColorActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:background="@color/colorPrimary">

    </android.support.v7.widget.Toolbar>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello world!"/>

</LinearLayout>

4. activity中设置toolbar

Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        setSupportActionBar(toolbar);

5.0效果：

image.png

4.4效果：

image.png

代码：https://github.com/aqianglala/SystemUiTraining