Material Design 组件之 CollapsingToolbarLayout

CollapsingToolbarLayout 主要用于实现一个可折叠的标题栏，一般作为 AppBarLayout 的子 View 来使用，下面总结一下 CollapsingToolbarLayout 的使用：

常用属性

1  //是否显示标题
2  app:titleEnabled="true"
3  //标题内容
4  app:title="CollapsingToolbarLayout"
5  //扩展后Title的位置
6  app:expandedTitleGravity="left|bottom"
7  //收缩后Title的位置
8  app:collapsedTitleGravity="left"
9  //CollapsingToolbarLayout收缩后Toolbar的背景颜色
10  app:contentScrim ="@color/colorPrimary"
11  //CollapsingToolbarLayout收缩时颜色变化的持续时间
12  app:scrimAnimationDuration="1200"
13  //颜色从可见高度的什么位置开始变化
14  app:scrimVisibleHeightTrigger="150dp"
15  //状态颜色变化（Android 5.0）
16  app:statusBarScrim="@color/colorAccent"
17  //设置滑动组件与手势之间的关系
18  app:layout_scrollFlags="scroll|exitUntilCollapsed"

对于 Title 当折叠布局完全可见时 Title 变大，可折叠布局随着向上滑动可见范围变小 Title 也变小，可以通过如下方式设置 Title 的颜色，具体如下：

1  //设置标题
2  ctlCollapsingLayout.setTitle("CollapsingToolbarLayout");
3  //设置CollapsingToolbarLayout扩展时的颜色
4  ctlCollapsingLayout.setExpandedTitleColor(Color.parseColor("#ffffff"));
5  //设置CollapsingToolbarLayout收缩时的颜色
6  ctlCollapsingLayout.setCollapsedTitleTextColor(Color.parseColor("#46eada"));

这个 Title 的颜色渐变过程由 CollapsingToolbarLayout 完成，当然其他部分属性也可以在代码中设置。

两个标志位

单独在说一下两个重要属性，可以作为一个标志位来记：

1. layout_scrollFlags

2. layout_collapseMode

layout_scrollFlags：一般使用 CoordinatorLayout、AppBarLayout等这些组件构成的界面，一般都有一个滚动视图，如 NestedScrollView，滚动视图一般设置了系统默认的 Behavior，具体如下：

1  //设置layout_behavior属性
2  <android.support.v4.widget.NestedScrollView
3      android:layout_width="match_parent"
4      android:layout_height="match_parent"
5 app:layout_behavior="@string/appbar_scrolling_view_behavior">
6      ...
7  /android.support.v4.widget.NestedScrollView>

要随着滚动视图移动的组件，如 ToolBar、CollapsingToolbarLayout 等需要设置 layout_scrollFlags 属性来指定不同的动作，关于 layout_scrollFlags 值的具体含义请参考之前的一篇文章： Material Design 组件之 AppBarLayout 。

layout_collapseMode：layout_collapseMode 有两个值可以选择，如果设置了 pin 的 View 会随着页面向上滚动固定到顶部，如果设置了 parallax 的 View 会随着页面的滚动而滚动，此时可以结合另一个属性 layout_collapseParallaxMultiplier 形成视差滚动的效果。

CollapsingToolbarLayout 的介绍就到此为止，没有案例当然是不可以，下面是一个简单的使用案列，布局如下：

1  <?xml version="1.0" encoding="utf-8"?>
2  <android.support.design.widget.CoordinatorLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    xmlns:tools="http://schemas.android.com/tools"
6    android:layout_width="match_parent"
7    android:layout_height="match_parent"
8    tools:context="com.manu.materialdesignsamples.samples.SampleCollapsingToolbarLayoutActivity">
9
10    <android.support.design.widget.AppBarLayout
11        android:layout_width="match_parent"
12        android:layout_height="200dp">
13        <android.support.design.widget.CollapsingToolbarLayout
14            android:id="@+id/ctlCollapsingLayout"
15            android:layout_width="match_parent"
16            android:layout_height="match_parent"
17            app:titleEnabled="true"
18            app:title="CollapsingToolbarLayout"
19            app:expandedTitleGravity="left|bottom"
20            app:collapsedTitleGravity="left"
21            app:contentScrim ="@color/colorPrimary"
22            app:scrimAnimationDuration="1200"
23            app:scrimVisibleHeightTrigger="150dp"
24            app:statusBarScrim="@color/colorAccent"
25            app:layout_scrollFlags="scroll|exitUntilCollapsed">
26            <ImageView
27                android:layout_width="match_parent"
28                android:layout_height="wrap_content"
29                app:layout_collapseMode="parallax"
30                app:layout_collapseParallaxMultiplier="0.6"
31                android:background="@drawable/ic_collapsing_title"/>
32            <android.support.v7.widget.Toolbar
33                android:id="@+id/toolbar"
34                android:layout_width="match_parent"
35                android:layout_height="70dp"
36                android:minHeight="?attr/actionBarSize"
37                app:layout_collapseMode="pin">
38            </android.support.v7.widget.Toolbar>
39        </android.support.design.widget.CollapsingToolbarLayout>
40    </android.support.design.widget.AppBarLayout>
41
42    <android.support.v4.widget.NestedScrollView
43        android:layout_width="match_parent"
44        android:layout_height="match_parent"
45        app:layout_behavior="@string/appbar_scrolling_view_behavior">
46        <android.support.v7.widget.RecyclerView
47            android:id="@+id/rvCollapsing"
48            android:layout_width="match_parent"
49            android:layout_height="match_parent"/>
50    </android.support.v4.widget.NestedScrollView>
51  </android.support.design.widget.CoordinatorLayout>

显示效果

下面是显示效果，具体如下：

CollapsingToolbarLayout

推荐阅读: