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

2019-11-08 00:23:45

字体：大中小

来源：转载

供稿：网友

可折叠工具栏布局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开发笔记的完整目录