CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现渐变透明的状态栏

在之前的一篇博文里面我已经说明了CoordinatorLayout使用过程中遇到的问题，之后又发现结合CollapsingToolbarLayout使用时的另一个问题。CollapsingToolbarLayout里面的ImageView为背景并不能将状态栏覆盖。在网上查的方法感觉比较费劲，自己试了多次之后发现下面的这种处理算是最简单的了。
大概的思想是：

1.给Activity界面设置主题为透明状态栏的主题，因为5.0系统的限制即使设置透明状态栏之后状态栏上面仍然有一层浅灰色的背景，所以增加values-21的处理。

2.给CollapsingToolbarLayout里面的布局设置marginTop为-15dp目的是为了让进入界面 之后，布局的背景能够向上覆盖到状态栏（可以是背景图片或者背景布局）。

fitsSystemWindows属性是为了让状态栏的颜色和该布局的颜色相同

----上面的-15dp的处理。是因为即使设置透明状态栏，刚进入界面的时候状态栏的颜色也是没有的，因为CollapsingToolbarLayout里面的背景图没有被拉上去。

3.给CollapsingToolbarLayout设置正常显示时状态栏的颜色

关键的代码：

1.给CollapsingToolbarLayout添加如下属性：

app:contentScrim="?attr/colorPrimary"

app:statusBarScrim="?attr/colorPrimary"

2.给CollapsingToolbarLayout里面的第一个child布局设置如下属性：

android:layout_marginTop="-15dp"
android:fitsSystemWindows="true"

3.为当前Activity设置主题：

android:theme="@style/FullTheme"

3.1在values的styles.xml里面配置

<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>
</style>
<style name="FullTheme" parent="AppTheme">
<item name="android:windowNoTitle">true</item>
<!--<item name="android:windowFullscreen">true</item>-->
</style>

3.2在values-v21的styles.xml里面配置

<style name="FullTheme" parent="AppTheme">
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">true</item>
<!--Android 5.x开始需要把颜色设置透明，否则导航栏会呈现系统默认的浅灰色-->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>

效果如下



具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--CoordinatorLayout是新添加的一个增强型的FrameLayout，通过它可以实现很多东西：-->
<!--例如：-->
<!--1.界面向上滚动逐渐隐藏Toolbar；-->
<!--2.在其中可以放置浮动的View，就像Floating Action Button-->

<!--AppBarLayout跟它的名字一样，把容器类的组件全部作为AppBar。-->
<!--将AppBarLayout放在CoordinatorLayout中，就可以实现滚动效果。-->
<!--本例中，TabLayout在界面滚动时，随着Toolbar的逐渐隐藏，将占据Toolbar的位置，-->
<!--达到节省屏幕空间，界面动画效果的目的。-->

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="210dp"
android:fitsSystemWindows="true">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="?attr/colorPrimary"
app:titleEnabled="false">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-15dp"
android:fitsSystemWindows="true">

<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/bj"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="20dp"
android:orientation="vertical">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="张三的龙虎山之旅"
android:textSize="@dimen/txs1" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="悠闲 朋友 经典"
android:textSize="@dimen/txs0" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1天"
android:textColor="@color/gray_tv"
android:textSize="@dimen/txs1" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="8个景点"
android:textColor="@color/gray_tv"
android:textSize="@dimen/txs1" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:text="在地图中查看 >"
android:textSize="@dimen/txs1" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

<!--//属性解析：-->
<!--// app:theme：指定Toolbar的样式，包括ActionbarToggle和popupMenu的指示图标颜色-->
<!--// app:popupTheme：指定popupMenu溢出后的样式-->
<!--// app:title: 指定Toolbar中主Title的内容-->
<!--// app:layout_scrollFlags的意思是：-->

<!--设置的layout_scrollFlags有如下几种选项：-->
<!--scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。-->
<!--enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。-->
<!--enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。-->
<!--exitUntilCollapsed: 当视图会在滚动时，它一直滚动到设置的minHeight时完全隐藏。-->

<!--// 需要注意的是，后面两种模式基本只有在CollapsingToolbarLayout才有用，-->
<!--// 而前面两种模式基本是需要一起使用的，也就是说，这些flag的使用场景，基本已经固定了。-->

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:title="@null">

<RelativeLayout
android:id="@+id/ib_back_layout"
android:layout_width="@dimen/item_h_50dp"
android:layout_height="match_parent">

<ImageView
android:id="@+id/ib_back"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/m_10dp"
android:scaleType="fitCenter"
android:src="@mipmap/back" />
</RelativeLayout>

<TextView
android:id="@+id/toolbar_titletv"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:ellipsize="end"
android:gravity="center"
android:lines="1"
android:scrollHorizontally="true"
android:text=""
android:textColor="@android:color/white" />

<RelativeLayout
android:id="@+id/ib_right_layout"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_gravity="right">

<ImageView
android:id="@+id/ib_right"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerInParent="true"
android:scaleType="fitCenter"
android:src="@mipmap/ib_add" />
</RelativeLayout>

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

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<!--//app:layout_behavior 属性，没错，--><!--// 如果你使用CoordinatorLayout来实现Toolbar滚动渐变消失动画效果，那就必须在它下面的那个控件中加入这个属性，并且下面的这个控件必须是可滚动的。--><!--// 当设置了layout_behavior的控件滑动时，就会触发设置了layout_scrollFlags的控件发生状态的改变。-->

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
style="@style/linlayout_h2_style"
android:layout_margin="@dimen/m_10dp">

<TextView
style="@style/tv_item_title_style"
android:text="2017-11-21"
android:textSize="@dimen/txs2" />

<TextView
style="@style/tv_item_title_style"
android:layout_marginLeft="@dimen/m_10dp"
android:text="09:11"
android:textSize="@dimen/txs2" />

</LinearLayout>

<android.support.v7.widget.RecyclerView
android:id="@+id/travel_plan_rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false" />
</LinearLayout>

</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

参考文章：

Android 状态栏全透明策略

android状态栏一体化(沉浸式状态栏)

android状态栏颜色修改