【Android -- Material Design】CollapsingToolbarLayout 的基本使用

前言

本篇将介绍 CollapsingToolbarLayout 的一些功能和属性，使用其实现可折叠的 toolbar 效果。

效果图

代码实现

CollapsingToolbarLayout 是对Toolbar的包装并且实现了折叠app bar效果，使用时，要作为 AppbarLayout 的直接子View。CollapsingToolbarLayout 有以下特性：

1. Collapsing title(折叠标题) 当布局全部可见的时候，title 是最大的，当布局开始滑出屏幕，title 将变得越来越小，你可以通过setTitle（CharSequence） 来设置要显示的标题。

注意：Toolbar 和 CollapsingToolbarLayout 同时设置了title时，不会显示Toolbartitle而是显示CollapsingToolbarLayout 的 title，如果要显示Toolbar 的 title，你可一在代码中添加如下代码：

collapsingToolbarLayout.setTitle("");

2. Content scrim(内容纱布) 当 CollapsingToolbarLayout 滑动到一个确定的阀值时将显示或者隐藏内容纱布，可以通过 setContentScrim(Drawable) 来设置纱布的图片。

提示：纱布可以是图片也可以是颜色色值，如果要显示颜色，在xml 布局文件中用contentScrim属性添加，代码如下：

app:contentScrim="@color/colorPrimary"

3. Status bar scrim（状态栏纱布） 当 CollapsingToolbarLayout 滑动到一个确定的阀值时，状态栏显示或隐藏纱布，你可以通过 setStatusBarScrim(Drawable) 来设置纱布图片。

提示：同内容纱布一样，状态栏纱布可以是图片也可以是一个颜色值，如果要显示颜色值，在xml 中用statusBarScrim 属性指定。

4. Parallax scrolling children（有视差地滚动子View） 让 CollapsingToolbarLayout 的子 View 可以有视差的滚动，需要在 xml 中用 添加如下代码：

app:layout_collapseMode="parallax"

5. Pinned position children（固定子View的位置） 子 View 可以固定在全局空间内，这对于实现了折叠并且允许通过滚动布局来固定 Toolbar 这种情况非常有用。在 xml 中将 collapseMode 设为 pin，代码如下：

 app:layout_collapseMode="pin"