CollapsingToolbarLayout使用

我们来看一下CollapsingToolbarLayout的使用场景。

可以看到，Toolbar的标题放大并在下方显示，当我们向上滑动列表时，顶部Header部分的图片向上折叠隐藏，标题向上移动并缩小，同时以渐显式的方式显示蓝色主题，直至高度缩为Toolbar的高度并成为Toolbar的背景色；向下滑动列表时，Header部分逐渐显示。这个效果就是利用了CollapsingToolbarLayout控件，在讲解案例代码前，先来介绍一下CollapsingToolbarLayout。

CollapsingToolbarLayout在 CollapsingToolbarLayout 的 Children 布局上，可以按照 FrameLayout 的属性来拍版，因为它本身继承于 FrameLayout ：CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout.从官方对CollapsingToolbarLayout的介绍上可以看出，CollapsingToolbarLayout 是对 Toolbar 的一个包装，以达到折叠 AppBar 的交互视觉效果。所以，CollapsingToolbarLayout 的使用一定离不开 AppBarLayout 和 Toolbar，并且作为 AppBarLayout 的直接子视图使用。关于CollapsingToolbarLayout的属性在官网上可以查到，这里我只介绍案例中我们常用的几个属性：title标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。注意，没有设置这个属性时，默认使用Toolbar的标题；statusBarScrim顶部视图折叠状态下，状态栏的遮罩色。通常这样设置：app:statusBarScrim="?attr/colorPrimaryDark"，即style样式中定义的沉浸式状态栏颜色。这个属性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);（支持API19及以上版本，位于setContentView语句前面）一起使用，使顶部视图展开时图片能够延伸到状态栏位置显示，如效果图中所示；contentScrim内容遮罩，上下滚动时图片上面显示和隐藏的遮罩色，Toolbar位置的的背景色；通常这样设置：app:contentScrim="?attr/colorPrimary"，即显示为Toolbar颜色，应用的主题色；layout_collapseMode折叠模式，设置其他控件滚动时自身的交互行为，有两种取值：parallax，折叠视差效果，比如上述效果图中的图片；pin，固定别针效果，比如上图中的Toolbar；layout_collapseParallaxMultiplier不折叠视差系数，配合parallax模式使用，取值有点类似alpha（不透明度），在0.0 ～ 1.0之间，默认值为0.5。当设置为1.0，滚动列表时图片不会折叠移动；

代码实现：

关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为，可以参考上一篇文章，这里我介绍一下本例中几个新的注意点。作为AppBarLayout的直接子控件，CollapsingToolbarLayout包裹Header部分的ImageView和Toolbar，并分别设置二者的折叠模式。这个例子，我们给CollapsingToolbarLayout的layout_scrollFlags属性值设为：scroll|exitUntilCollapsed，其中exitUntilCollapsed表示控件向上折叠退出并以最小高度停留在顶部；前面介绍CollapsingToolbarLayout属性时介绍到了statusBarScrim的使用，其实也可以通过android:fitsSystemWindows和values-v21中style样式的statusBarColor和windowDrawsSystemBarBackgrounds属性来完成状态栏的背景色变化，详情参考源码即可；通过layout_anchor和layout_anchorGravity可以控制FloatingActionButton的behavior和位置，如上图所示，当滚动列表是，FAB按钮会随着AppBarLayout而显示和隐藏，并自带缩放动画。

示例源码我在GitHub上建立了一个Repository，用来存放整个Android Material Design系列控件的学习案例，会伴随着文章逐渐更新完善，欢迎大家补充交流，

代码地址：github.com/xiangzhihong/MDStudySamples