一、CoordinatorLayout

是一個ViewGroup，遵循Material 風格，包含在 support Library中，結合AppbarLayout, CollapsingToolbarLayout等 可 產生各種炫酷的摺疊懸浮效果。

二、AppBarLayout

是一個vertical的LinearLayout，其子View應通過下面兩種方式來提供他們的Behavior。

1.程式碼方式：

setScrollFlags(int)

2.xmL方式:

app:layout_scrollFlags

具體的app:layout_scrollFlags

上面解釋是官方翻譯的，不好理解，可以直接看執行效果演示gif。

他必須嚴格地是CoordinatorLayout的子View，不然他一點作用都發揮不出來。

三、AppBarLayout下方的滑動控制元件

比如RecyclerView，NestedScrollView（與AppBarLayout同屬於CoordinatorLayout的子View,並列的關係）,必須嚴格地通過在xml中指出其滑動Behavior來與AppBarLayout進行繫結。通常這樣：

app:layout_behavior=\"@string/appbar_scrolling_view_behavior\" 

四、CollapsingToolbarLayout

是一個專門用來包裹Toolbar的控制元件，裡面可以放置一個imageView和一個toolbar然後輕鬆地實現：隨著滑動，圖片和toolbar的標題也有動畫。

內部的子View一般都要加上屬性：

app:layout_collapseMode=""

常用的是parallax，pin。

parallax是視差滾動，用在imageView, pin是固定，用在toolbar。

用setContentScrimColor(int)或者setContentScrim(drawable)來設定內容紗布，就是當摺疊到只剩下Toolbar的時候，用一個另外的圖片或者顏色來設定toolbar的背景。

五、Toolbar

他的title如果需要帶有CollapsingToolbarLayout的動畫的話，就要用collapsingToolbarLayout.setTitle(); 否則是沒有動畫的，其他的和toolbar平時一樣。

六、程式碼

下面通過程式碼的方式看看效果

首先看看xml佈局

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/colorPrimary"
            app:statusBarScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView

                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="centerCrop"
                android:src="@drawable/kobe"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                app:title="科比"
                app:titleTextColor="@color/colorPrimary"
                app:layout_collapseMode="pin"
                >

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


    <android.support.v4.widget.NestedScrollView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/textContent"
            android:textSize="20sp" />

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


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

activity裡面

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private CollapsingToolbarLayout collapsingToolbarLayout;

    /**
     * @param savedInstanceState
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = findViewById(R.id.toolbar);
        collapsingToolbarLayout = findViewById(R.id.collapsingToolbar);
        toolbar.setNavigationIcon(R.drawable.back);
        collapsingToolbarLayout.setTitle("科比背打科比哈哈哈哈哈哈哈");

    }

七、執行效果

1. app:layout_scrollFlags=”scroll|exitUntilCollapsed”

   

2. app:layout_scrollFlags=”scroll|enterAlways”

   

3. app:layout_scrollFlags=”scroll|enterAlwaysCollapsed”

   

4. app:layout_scrollFlags=”scroll|snap”

   

最後，附上Demo地址：https://github.com/Kanghanbin/CoordinatorLayoutDemo