可折叠工具栏布局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.AppBarLayoutandroid:id="@+id/abl_title"android:layout_width="match_parent"android:layout_height="160dp"android:background="@color/blue_light" ><android.support.design.widget.CollapsingToolbarLayoutandroid: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.Toolbarandroid: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.RecyclerViewandroid: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.AppBarLayoutandroid:id="@+id/abl_title"android:layout_width="match_parent"android:layout_height="160dp"android:background="@color/blue_light" ><android.support.design.widget.CollapsingToolbarLayoutandroid: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" ><ImageViewandroid: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.Toolbarandroid: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.RecyclerViewandroid: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.AppBarLayoutandroid:id="@+id/abl_title"android:layout_width="match_parent"android:layout_height="160dp"android:background="@color/blue_light" ><android.support.design.widget.CollapsingToolbarLayoutandroid: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.Toolbarandroid:id="@+id/tl_title"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin" ><Spinnerandroid: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.RecyclerViewandroid: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开发笔记的完整目录

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

Android开发笔记（三十六）展示类控件
View/ViewGroup View是单个视图,所有的控件类都是从它派生出来:而ViewGroup是个视图组织,所有的布局视图类都是从它派生出来.由于View和ViewGroup是基类,因此很少会直 ...
Android开发笔记（三十五）页面布局视图
布局视图的类别布局视图有五类,分别是线性布局LinearLayout.相对布局RelativeLayout.框架布局FrameLayout.绝对布局AbsoluteLayout.表格布局TableL ...
Android开发笔记（八十六）几个特殊的类
接口interface interface是一些功能的集合,但它只定义了对象必须实现的成员,而不包含成员的实现代码,成员的具体代码由实现接口的类提供.Android对接口的使用场景主要有三类:事件监听 ...
Android开发笔记（五十六）摄像头拍照
相机Camera Camera是直接操作摄像头硬件的工具类.常用的方法如下: getNumberOfCameras : 获取本机的摄像头数目 open : 打开摄像头,默认打开后置摄像头.如果有多个摄 ...
Android开发笔记（四十六）手机相关事件
手机定位有一类事件必须依赖于手机信号方能触发,如果把设备中的sim卡拔出,或者该设备本身不支持sim卡(如ipad),那么这类事件将永远不会被触发.在Android中,这类事件包括定位事件和手机信号 ...
Android开发笔记（三十八）列表类视图
AdapterView AdapterView顾名思义是适配器视图,Spinner.ListView和GridView都间接继承自AdapterView,这三个视图都存在多个元素并排展示的情况,所以需 ...
Android开发笔记（二十六）Java的容器类
容器的分类集合(Set/HashSet) 集合中的元素是没有顺序的,而且不可以重复.这意味着,集合只能遍历而无法通过索引访问指定元素,并且如果重复添加相同值将不会增大集合.因为Set只是接口,所以实 ...
Android开发笔记（三十九）Activity的生命周期
与生命周期有关的方法下面是Activity类与生命周期有关的方法: onCreate : 创建页面 onStart : 开始页面 onStop : 停止页面 onResume : 恢复页面 onPa ...
Android开发笔记（三十四）Excel文件的读写
Android中操作Excel文件的场合较少见,主要是一些专业领域导入导出报表时使用,所以处理Excel读写的开源代码也很稀缺.目前读写Excel主要采用开源库jxl,这个是韩国人写的excel操作工 ...
Android开发笔记（三十二）文件基础操作
File类 File类是java中的文件操作工具类,它的常用方法如下: File构造函数 : 根据文件路径构造File对象 delete : 删除文件 exists : 判断文件是否存在 getNam ...

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

可折叠工具栏布局CollapsingToolbarLayout

与CollapsingToolbarLayout有关的滚动标志

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

最新文章

热门文章