先看效果

demo

開始使用

1. 引入

compile 'com.android.support:design:27.1.1'

2. 布局結(jié)構(gòu)

<android.support.design.widget.CoordinatorLayout >

    <android.support.design.widget.AppBarLayout >

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

            <android.support.v7.widget.Toolbar />
            
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

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

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

• CoordinatorLayout ：用來(lái)協(xié)調(diào)UI中 View 的滾動(dòng)曼追；
• AppBarLayout ：AppBar
• CollapsingToolbarLayout ：折疊布局
• ImageView ：背景圖片
• Toolbar ：最終被折疊起來(lái)的 Toolbar
• NestedScrollView 頁(yè)面的主要內(nèi)容
• FloatingActionButton 右上角的懸浮按鈕

3. 完整布局

<?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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_collapseParallaxMultiplier="0.9">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorAccent"
            app:expandedTitleMarginEnd="15dp"
            app:expandedTitleMarginStart="15dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_cover"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_launcher_background" />

            <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: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:padding="15dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginBottom="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="1" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginBottom="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="2" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginBottom="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="3" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginBottom="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="4" />
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:id="@+id/faBtn"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@android:drawable/sym_action_email"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

4. 幾個(gè)重要的屬性

1. CoordinatorLayout 的屬性

• app:layout_collapseParallaxMultiplier="0.9" ：控制滑動(dòng)時(shí)的視覺差，取值范圍 0~1

2. AppBarLayout 的屬性

• android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" ：可控制返回按鈕以及 title 字體的顏色

3. CollapsingToolbarLayout 的屬性

• contentScrim ： 折疊后剑辫，Toolbar 的背景顏色
• layout_scrollFlags ：CollapsingToolbarLayout 滾動(dòng)的模式包斑，layout_scrollFlags 有如下幾種選項(xiàng)：
  • scroll ：想要 CollapsingToolbarLayout 滾出屏幕流礁，必須設(shè)置該值，否則 CollapsingToolbarLayout 將被固定在屏幕頂部
  • exitUntilCollapsed ：上滑罗丰，折疊在屏幕頂端神帅，繼續(xù)上滑，CollapsingToolbarLayout 下面的 View 才會(huì)退出屏幕萌抵；下滑枕稀，CollapsingToolbarLayout 下面的 View 逐漸進(jìn)入屏幕，繼續(xù)，CollapsingToolbarLayout 才會(huì)展開萎坷；
  • enterAlwaysCollapsed ：與 exitUntilCollapsed 類似凹联，但是折疊后不會(huì)固定在屏幕頂部；
  • snap ：與 enterAlwaysCollapsed 的最終效果一樣哆档，但是沒有漸變過程蔽挠，上滑，逐漸滾出屏幕瓜浸，中間沒有停留澳淑，下滑，逐漸中展開插佛，中間沒有停留杠巡；
  • enterAlways ：上滑，與 enterAlwaysCollapsed 一樣的效果雇寇，下滑氢拥，先展開 CollapsingToolbarLayout，之后其下面的 View 才會(huì)進(jìn)入屏幕锨侯；
  • 常用組合

"scroll|exitUntilCollapsed"
"scroll|enterAlwaysCollapsed"
"scroll|snap"
"scroll|enterAlways"

• app:expandedTitleMarginStart="15dp" ：展開時(shí)嫩海，標(biāo)題距離屏幕開始的位置，此外還有：

app:expandedTitleMarginStart
app:expandedTitleMargin
app:expandedTitleMarginBottom
app:expandedTitleMarginEnd

4. Toolbar

• app:layout_collapseMode="pin" ：Toolbar 的折疊模式囚痴，有3種取值：
  • pin ：固定模式叁怪，在折疊的時(shí)候最后固定在頂端;
  • parallax ：視差模式，在折疊的時(shí)候會(huì)有個(gè)視差折疊的效果深滚；
  • none ：隨著滑動(dòng)滾出屏幕奕谭；

5. NestedScrollView

• app:layout_behavior="@string/appbar_scrolling_view_behavior" ：通知布局中包含滑動(dòng)組件，很重要痴荐！如果不設(shè)置血柳，View 的滾動(dòng)的將會(huì)出現(xiàn)混亂

6. FloatingActionButton

• app:layout_anchor="@id/appBar" ：錨點(diǎn)
• app:layout_anchorGravity="bottom|right|end" 在錨點(diǎn)的位置

源碼：
布局 activity_002_collapsing_toolbar_layout
_002_CollapsingToolbarLayout