關(guān)鍵字：CollapsingToolbarLayout、材料設(shè)計(jì)
項(xiàng)目地址：AboutMaterialDesign

安卓材料設(shè)計(jì)中，這是最后一個(gè)用于布局中的類(lèi) -- CollapsingToolbarLayout。CollapsingToolbarLayout 是繼承自 FramenLayout 的子類(lèi)，它為我們提供了滑動(dòng)漸變的效果。除此之外，并沒(méi)有其他功能，因此使用的場(chǎng)景其實(shí)非常單一，而且明白了主要的參數(shù)，就可以駕馭它所提供的功能。。我們先看看基本效果：

GIF.gif

GIF.gif

下面先說(shuō)注意點(diǎn)：

• 1.建議使用最新的 design 包，因?yàn)榘姹驹诓粩喔?，越新的版?bug 越少。比如這次測(cè)試的時(shí)候，我在三星手機(jī)上發(fā)現(xiàn) Toolbar 的展示位置不對(duì)，后來(lái)更新了 design 包的版本，問(wèn)題就沒(méi)了。
• 2.通常使用 CollapsingToolbarLayout 時(shí)，結(jié)構(gòu)都是固定的，即： CoordinatorLayout - AppBarLayout - CollapsingToolbarLayout - ToolbarLayout && ImageView。 且 Toolbar 外部的容器和 ImageView 都需要有 fitSystemWindow="true" 屬性才能達(dá)到上圖效果
• 3.Toolbar的高度必須固定，不能設(shè)置為"wrap_content"，否則Toolbar不會(huì)滑動(dòng)，也沒(méi)有折疊效果
• 4.CoordinatorLayout的直接子View必須是一個(gè)可滑動(dòng)的控件，并且內(nèi)部有內(nèi)容可以滑動(dòng)。同時(shí)需要設(shè)置app:layout_behavior
• 5.當(dāng)效果出現(xiàn)重疊或者其他不如意的效果，那一般都和你在用的 CollapsingToolbarLayout 沒(méi)有關(guān)系，仔細(xì)檢查一下 Toolbar 和 AppBarLayout 的屬性設(shè)置對(duì)不對(duì)，因?yàn)?CollapsingToolbarLayout 可以設(shè)置的東西真的不多。

一、我就是列一下屬性

下面介紹一下 CollapsingToolbarLayout 的屬性：

contentScrim                        -- 折疊后內(nèi)容的顯示顏色
statusBarScrim                      -- 折疊后菜單的顯示顏色
expandedTitleGravity                -- 展開(kāi)時(shí) Toolbar title 的顯示位置
collapsedTitleGravity               -- 折疊時(shí) Toolbar title 的顯示位置
expandedTitleMargin                 -- 對(duì)應(yīng)的有四個(gè) 上下左右
expandedTitleTextAppearance         -- 展開(kāi) title 樣式
collapsedTitleTextAppearance        -- 折疊 title 樣式
scrimVisibleHeightTrigger           -- 設(shè)置收起多少高度時(shí)，顯示ContentScrim的內(nèi)容
layout_collapseMode                 -- 折疊模式
                                        -none 跟隨滾動(dòng)的手勢(shì)進(jìn)行折疊。
                                        -parallax 視差滾動(dòng)，搭配layout_collapseParallaxMultiplier（視差因子）使用。
                                        -pin 固定不動(dòng)。
layout_collapseParallaxMultiplier   -- 視差因子，范圍：0-1，默認(rèn)0.5

二、我就是貼一下代碼

附上開(kāi)頭第二張動(dòng)態(tài)圖的布局代碼：

<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/main_content"
    android:fitsSystemWindows="true" ----------------------------------------------- ***
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:fitsSystemWindows="true" --------------------------------------- ***
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/detail_backdrop_height"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" --------------------- ***
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:fitsSystemWindows="true" ------------------------------------ ***
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" /> ------------------------------- ***

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" /> ------------------------------------ ***

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

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

    <android.support.v4.widget.NestedScrollView
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">
        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_down"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

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

參考：
1.CheeseDemo
2.StackOverFlow