通過上一篇實(shí)戰(zhàn)案例，基本上能夠掌握CoordinatorLayout和AppBarLayout的初步使用怎诫。至此，Android Material Design系列的學(xué)習(xí)已進(jìn)行到第六篇，大家可以點(diǎn)擊以下鏈接查看之前的文章：
- Android TabLayout 分分鐘打造一個滑動標(biāo)簽頁
- Android 一文告訴你到底是用Dialog，Snackbar娶聘，還是Toast
- Android FloatingActionButton 重要的操作不要太多，一個就好
- Android 初識AppBarLayout 和 CoordinatorLayout
- Android CoordinatorLayout實(shí)戰(zhàn)案例學(xué)習(xí)《一》
本文繼續(xù)以案例的方式學(xué)習(xí)CoordinatorLayout和AppBarLayout的使用甚脉，同時(shí)引入Desgin包中的一個新控件：CollapsingToolbarLayout丸升。效果圖如下：
可以看到，Toolbar的標(biāo)題放大并在下方顯示宦焦，當(dāng)我們向上滑動列表時(shí)发钝，頂部Header部分的圖片向上折疊隱藏，標(biāo)題向上移動并縮小波闹，同時(shí)以漸顯式的方式顯示藍(lán)色主題酝豪，直至高度縮為Toolbar的高度并成為Toolbar的背景色；向下滑動列表時(shí)精堕，Header部分逐漸顯示孵淘。這個效果就是利用了CollapsingToolbarLayout控件，在講解案例代碼前歹篓，先來介紹一下CollapsingToolbarLayout瘫证。
CollapsingToolbarLayout
在 CollapsingToolbarLayout 的 Children 布局上，可以按照 FrameLayout 的屬性來拍版庄撮，因?yàn)樗旧砝^承于 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 的一個包裝，以達(dá)到折疊 AppBar 的交互視覺效果洞斯。所以毡庆，CollapsingToolbarLayout 的使用一定離不開 AppBarLayout 和 Toolbar，并且作為 AppBarLayout 的直接子視圖使用烙如。
關(guān)于CollapsingToolbarLayout的屬性在官網(wǎng)上可以查到么抗，這里我只介紹案例中我們常用的幾個屬性：
title
標(biāo)題，布局展開時(shí)放大顯示在圖片底部亚铁，布局折疊時(shí)縮小顯示在Toolbar左側(cè)蝇刀。注意，沒有設(shè)置這個屬性時(shí)徘溢，默認(rèn)使用Toolbar的標(biāo)題吞琐；statusBarScrim
頂部視圖折疊狀態(tài)下，狀態(tài)欄的遮罩色然爆。通常這樣設(shè)置：app:statusBarScrim="?attr/colorPrimaryDark"顽分，即style樣式中定義的沉浸式狀態(tài)欄顏色。這個屬性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);（支持API19及以上版本施蜜，位于setContentView語句前面）一起使用卒蘸，使頂部視圖展開時(shí)圖片能夠延伸到狀態(tài)欄位置顯示，如效果圖中所示翻默；contentScrim
內(nèi)容遮罩缸沃，上下滾動時(shí)圖片上面顯示和隱藏的遮罩色，Toolbar位置的的背景色修械；通常這樣設(shè)置：app:contentScrim="?attr/colorPrimary"趾牧，即顯示為Toolbar顏色，應(yīng)用的主題色肯污；layout_collapseMode
折疊模式翘单，設(shè)置其他控件滾動時(shí)自身的交互行為吨枉，有兩種取值：parallax，折疊視差效果哄芜，比如上述效果圖中的圖片貌亭；pin，固定別針效果认臊，比如上圖中的Toolbar圃庭；layout_collapseParallaxMultiplier
不折疊視差系數(shù)，配合parallax模式使用失晴，取值有點(diǎn)類似alpha（不透明度）剧腻，在0.0 ～ 1.0之間，默認(rèn)值為0.5涂屁。當(dāng)設(shè)置為1.0书在，滾動列表時(shí)圖片不會折疊移動；
案例分析
通過上面的介紹拆又，相信大家對CollapsingToolbarLayout有了一個初步的認(rèn)識蕊温，我們再來看看如何配合CoordinatorLayout、AppBarLayout和Toolbar來實(shí)現(xiàn)案例中的效果遏乔，主要在于布局文件：
<?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>
關(guān)于CoordinatorLayout作為根布局容器如何協(xié)調(diào)子控件之間的交互行為义矛，可以參考上一篇文章，這里我介紹一下本例中幾個新的注意點(diǎn)盟萨。
作為
AppBarLayout的直接子控件凉翻，CollapsingToolbarLayout包裹Header部分的ImageView和Toolbar，并分別設(shè)置二者的折疊模式捻激。這個例子制轰，我們給
CollapsingToolbarLayout的layout_scrollFlags屬性值設(shè)為：scroll|exitUntilCollapsed，其中exitUntilCollapsed表示控件向上折疊退出并以最小高度停留在頂部胞谭；前面介紹
CollapsingToolbarLayout屬性時(shí)介紹到了statusBarScrim的使用垃杖，其實(shí)也可以通過android:fitsSystemWindows和values-v21中style樣式的statusBarColor和windowDrawsSystemBarBackgrounds屬性來完成狀態(tài)欄的背景色變化，詳情參考源碼即可丈屹；通過
layout_anchor和layout_anchorGravity可以控制FloatingActionButton的behavior和位置调俘，如上圖所示，當(dāng)滾動列表是旺垒，F(xiàn)AB按鈕會隨著AppBarLayout而顯示和隱藏彩库，并自帶縮放動畫。
補(bǔ)充：對于這個案例先蒋，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"的組合使用會出現(xiàn)一些體驗(yàn)上的卡頓問題，目前已知的有兩個：
AppBarLayout視圖處于顯示狀態(tài)的時(shí)候竞漾，ScrollingView的Fling事件容易出現(xiàn)卡頓眯搭，參考
stackoverflow：Flinging with RecyclerView + AppBarLayout窥翩；當(dāng)AppBarLayout處于完全隱藏狀態(tài)時(shí)，向下觸發(fā)Fling事件鳞仙，ScrollingView向上滾動直至頂部全部展示寇蚊，而不是繼續(xù)滾動使AppBarLayout的內(nèi)容得以展示。
替代解決方案繁扎，開源項(xiàng)目：Android-ObservableScrollView
示例源碼
我在GitHub上建立了一個Repository幔荒，用來存放整個Android Material Design系列控件的學(xué)習(xí)案例糊闽，會伴隨著文章逐漸更新完善梳玫，歡迎大家補(bǔ)充交流，Star地址：
