Android开发笔记（一百三十六）可折叠工具栏布局CollapsingToolbarLayout

可折叠工具栏布局CollapsingToolbarLayout

上一篇博文《 Android开发笔记（一百三十五）应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动，那反过来，能不能把Toolbar往下拉动呢？这里要明确一点，Toolbar本身是页面顶部的工具栏，其上没有本页面的其它控件了，如果Toolbar被拉下来了，那Toolbar上面的空白该显示什么？所以Toolbar的上部边缘是不可以往下拉的，只有下部边缘才能往下拉，这样的视觉效果好比Toolbar如电影幕布一般缓缓向下展开。


不过，Android在实现展开效果的时候，并非直接让Toolbar展开或收缩，而是另外提供了CollapsingToolbarLayout，通过该布局包裹Toolbar，从而控制标题栏的展开和收缩行为。下面是CollapsingToolbarLayout的属性说明：
app:contentScrim : 指定布局内部未展开时的背景颜色。
app:collapsedTitleTextAppearance : 指定未展开时的标题文字字体。
app:collapsedTitleTextColor : 指定未展开时的标题文字颜色。
app:collapsedTitleGravity : 指定未展开时的标题文字对齐方式。
app:expandedTitleTextAppearance : 指定展开后的标题文字字体。
app:expandedTitleTextColor : 指定展开后的标题文字颜色。
app:expandedTitleGravity : 指定展开后的标题文字对齐方式。
app:expandedTitleMargin : 指定展开后的标题四周间距。
app:expandedTitleMarginStart/app:expandedTitleMarginTop/app:expandedTitleMarginEnd/app:expandedTitleMarginBottom : 指定展开后的标题具体方向的间距。
上述属性在代码中的设置方法如下所示：
setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。
setCollapsedTitleTextAppearance : 设置未展开时的标题文字字体。
setCollapsedTitleTextColor : 设置未展开时的标题文字颜色。
setCollapsedTitleGravity : 设置未展开时的标题文字对齐方式。
setExpandedTitleTextAppearance : 设置展开后的标题文字字体。
setExpandedTitleColor : 设置展开后的标题文字颜色。
setExpandedTitleGravity : 设置展开后的标题文字对齐方式。
setExpandedTitleMargin : 设置展开后的标题四周间距。
setExpandedTitleMarginStart/setExpandedTitleMarginTop/setExpandedTitleMarginEnd/setExpandedTitleMarginBottom : 设置展开后的标题具体方向的间距。


在工程中使用CollapsingToolbarLayout，则需注意以下几点：
1、添加几个库的支持，包括appcompat-v7库（Toolbar需要）、design库（CollapsingToolbarLayout需要）、recyclerview库（主页面的RecyclerView需要）；
2、布局文件的根布局采用android.support.design.widget.CoordinatorLayout，因为design库的动态效果都依赖于该控件；
3、CoordinatorLayout节点要添加命名空间声明xmlns:app="http://schemas.android.com/apk/res-auto"；
4、使用android.support.design.widget.AppBarLayout节点包裹android.support.design.widget.CollapsingToolbarLayout节点，再在CollapsingToolbarLayout节点下添加Toobar；
5、Toobar节点添加滚动属性app:layout_scrollFlags="scroll|enterAlways"，声明工具栏的滚动行为标志；


其实真正运行的时候，Toolbar的高度是固定不变的，变化高度的是CollapsingToolbarLayout。只是许多App把这两者的背景设为一样的，所以看起来像是统一的标题栏在收缩和展开。既然二者原本不是一家，那么就得有新的属性用于区分它们内部的行为，新属性在CollapsingToolbarLayout的子视图节点上声明，说明如下：
app:layout_collapseMode : 指定子视图（通常是Toolbar）的折叠模式。有以下三个取值说明：
--pin : 固定模式，当前视图固定不动，不受CollapsingToolbarLayout的折叠影响。
--parallax : 视差模式，随着CollapsingToolbarLayout的收缩与展开，当前视图也跟着收缩与展开。折叠系数可通过属性app:layout_collapseParallaxMultiplier配置，该属性为1.0时，折叠效果同pin模式即固定不动；该属性为0.0时，折叠效果等同于none模式，即也跟着移动相同距离。
--none : 默认值。CollapsingToolbarLayout折叠多少距离，则当前视图也移动多少距离，通俗地说，就是夫唱妇随。
app:layout_collapseParallaxMultiplier : 指定视差模式时的折叠距离系数，取值在0.0到1.0之间。如不指定该属性则默认为0.5


为了区分这几种模式的差异，还是上几个动图加以说明。下面是Toolbar采用pin模式时的效果图，可以看到红色区域始终不动：



下面是Toolbar采用parallax模式时的效果图，可以看到红色区域会随着滚上去再滚下来。因为折叠系数设置为0.1，所以其效果近似于none模式。



下面是演示折叠模式使用的布局文件例子：

<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/cl_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl_title"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="@color/blue_light" >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="40dp" >

            <android.support.v7.widget.Toolbar
                android:id="@+id/tl_title"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/red"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.1" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

当然，CollapsingToolbarLayout的折叠效果并不仅限于和Toolbar的互动，还包括标题文字的样式渐变（文字大小、颜色、间距等等），连背景图片都可以实现折叠的渐变效果。下面是标题栏在折叠时显示渐变图片的效果图：



要实现图片的折叠渐变，其实很简单，只需在Toolbar节点前面加个ImageView节点的声明即可，下面是演示折叠模式使用的布局文件例子：

<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/cl_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl_title"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="@color/blue_light" >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="#aaffaa"
            app:expandedTitleMarginStart="100dp" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.1"
                android:scaleType="centerCrop"
                android:src="@drawable/top_pic" />
            
            <android.support.v7.widget.Toolbar
                android:id="@+id/tl_title"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways" />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

与CollapsingToolbarLayout有关的滚动标志

上一篇博文《 Android开发笔记（一百三十五）应用栏布局AppBarLayout》说过，AppBarLayout的子控件共有五个滚动标志，同时提到后面三个标志与CollapsingToolbarLayout有关。现在就针对CollapsingToolbarLayout，重新演示看看五种标志分别对应的效果图。

1、scroll : 头部与主体一起滚动。
如果仅仅声明scroll，没有声明其它标志，则滚动效果如下图所示：


2、enterAlways : 头部与主体先一起滚动，头部滚到位后，主体继续向上或者向下滚。
同时声明scroll和enterAlways，滚动效果如下图所示：


3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏，不会完全看不到工具栏。具体的滚动说明如下所示：
向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部固定不动，主体继续向上滚动。
向下滚动：头部固定不动，主体先向下滚动，一直滚到主体全部拉出。然后头部向下展开。
同时声明scroll和exitUntilCollapsed，滚动效果如下图所示：


4、enterAlwaysCollapsed：该标志一般跟enterAlways一起使用，它与enterAlways区别在于有折叠操作，而单独的enterAlways没有折叠。具体的滚动说明如下所示：
向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。
向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。然后主体向下滚动，滚到位后头部继续向下展开。
同时声明scroll、enterAlways和enterAlwaysCollapsed，滚动效果如下图所示：


5、snap : 在用户手指松开时，系统自行判断，接下来是全部向上滚到顶，还是全部向下展开。
同时声明scroll和snap，滚动效果如下图所示：



下面是演示五种标志用到的布局文件例子：

<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/cl_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl_title"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="@color/blue_light" >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="40dp" >

            <android.support.v7.widget.Toolbar
                android:id="@+id/tl_title"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" >

                <Spinner
                    android:id="@+id/sp_flag"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:spinnerMode="dialog" />
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

点击下载本文用到的可折叠工具栏布局的工程代码


点此查看Android开发笔记的完整目录