通過上一篇實戰案例，基本上能夠掌握CoordinatorLayout和AppBarLayout的初步使用。至此，Android Material Design系列的學習已進行到第六篇，大家可以點擊以下鏈接查看之前的文章：

• Android TabLayout 分分鐘打造一個滑動標簽頁
• Android 一文告訴你到底是用Dialog，Snackbar，還是Toast
• Android FloatingActionButton 重要的操作不要太多，一個就好
• Android 初識AppBarLayout 和 CoordinatorLayout
• Android CoordinatorLayout實戰案例學習《一》

本文繼續以案例的方式學習CoordinatorLayout和AppBarLayout的使用，同時引入Desgin包中的一個新控件：CollapsingToolbarLayout。效果圖如下：

Samples.gif

可以看到，Toolbar的標題放大并在下方顯示，當我們向上滑動列表時，頂部Header部分的圖片向上折疊隱藏，標題向上移動并縮小，同時以漸顯式的方式顯示藍色主題，直至高度縮為Toolbar的高度并成為Toolbar的背景色；向下滑動列表時，Header部分逐漸顯示。這個效果就是利用了CollapsingToolbarLayout控件，在講解案例代碼前，先來介紹一下CollapsingToolbarLayout。

CollapsingToolbarLayout

在 CollapsingToolbarLayout 的 Children 布局上，可以按照 FrameLayout 的屬性來拍版，因為它本身繼承于 FrameLayout ：

CollapsingToolbarLayout.png

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的屬性在官網上可以查到，這里我只介紹案例中我們常用的幾個屬性：

1. title
   標題，布局展開時放大顯示在圖片底部，布局折疊時縮小顯示在Toolbar左側。注意，沒有設置這個屬性時，默認使用Toolbar的標題；

2. statusBarScrim
   頂部視圖折疊狀態下，狀態欄的遮罩色。通常這樣設置：app:statusBarScrim="?attr/colorPrimaryDark"，即style樣式中定義的沉浸式狀態欄顏色。這個屬性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);（支持API19及以上版本，位于setContentView語句前面）一起使用，使頂部視圖展開時圖片能夠延伸到狀態欄位置顯示，如效果圖中所示；

3. contentScrim
   內容遮罩，上下滾動時圖片上面顯示和隱藏的遮罩色，Toolbar位置的的背景色；通常這樣設置：app:contentScrim="?attr/colorPrimary"，即顯示為Toolbar顏色，應用的主題色；

4. layout_collapseMode
   折疊模式，設置其他控件滾動時自身的交互行為，有兩種取值：parallax，折疊視差效果，比如上述效果圖中的圖片；pin，固定別針效果，比如上圖中的Toolbar；

5. layout_collapseParallaxMultiplier
   不折疊視差系數，配合parallax模式使用，取值有點類似alpha（不透明度），在0.0 ～ 1.0之間，默認值為0.5。當設置為1.0，滾動列表時圖片不會折疊移動；

案例分析

通過上面的介紹，相信大家對CollapsingToolbarLayout有了一個初步的認識，我們再來看看如何配合CoordinatorLayout、AppBarLayout和Toolbar來實現案例中的效果，主要在于布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:title="Collapse"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:src="@mipmap/header"
                android:adjustViewBounds="true"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/tb_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:titleTextColor="@color/white"
                app:title="@string/app_name"
                app:layout_collapseMode="pin"/>

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

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dp_16"
        android:src="@mipmap/ic_toolbar_add"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right"
        app:backgroundTint="@color/fab_ripple"/>

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

關于CoordinatorLayout作為根布局容器如何協調子控件之間的交互行為，可以參考上一篇文章，這里我介紹一下本例中幾個新的注意點。

1. 作為AppBarLayout的直接子控件，CollapsingToolbarLayout包裹Header部分的ImageView和Toolbar，并分別設置二者的折疊模式。

2. 這個例子，我們給CollapsingToolbarLayout的layout_scrollFlags屬性值設為：scroll|exitUntilCollapsed，其中exitUntilCollapsed表示控件向上折疊退出并以最小高度停留在頂部；

3. 前面介紹CollapsingToolbarLayout屬性時介紹到了statusBarScrim的使用，其實也可以通過android:fitsSystemWindows和values-v21中style樣式的statusBarColor和windowDrawsSystemBarBackgrounds屬性來完成狀態欄的背景色變化，詳情參考源碼即可；

4. 通過layout_anchor和layout_anchorGravity可以控制FloatingActionButton的behavior和位置，如上圖所示，當滾動列表是，FAB按鈕會隨著AppBarLayout而顯示和隱藏，并自帶縮放動畫。

補充：對于這個案例，Google官方提供了一個效果圖，地址如下：
http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQscXNQY3dNdVlYeTQ/patterns-scrolling-techniques_flex_space_image_xhdpi_003.webm

遺留問題

"AppBarLayout + RecyclerView"的組合使用會出現一些體驗上的卡頓問題，目前已知的有兩個：

1. AppBarLayout視圖處于顯示狀態的時候，ScrollingView的Fling事件容易出現卡頓，參考stackoverflow：Flinging with RecyclerView + AppBarLayout；

2. 當AppBarLayout處于完全隱藏狀態時，向下觸發Fling事件，ScrollingView向上滾動直至頂部全部展示，而不是繼續滾動使AppBarLayout的內容得以展示。

替代解決方案，開源項目：Android-ObservableScrollView

示例源碼

我在GitHub上建立了一個Repository，用來存放整個Android Material Design系列控件的學習案例，會伴隨著文章逐漸更新完善，歡迎大家補充交流，Star地址：

https://github.com/Mike-bel/MDStudySamples