CoordinatorLayout是一個“加強版”的 FrameLayout，它主要有兩個用途：

（1） 用作應用的頂層佈局管理器

（2） 通過為子View指定 behavior 實現自定義的互動行為。 在我們做 Material Design 風格的app時通常都使用 CoordinatorLayout 作為佈局的根節點，以便實現特定的UI互動行為。 那麼現在我們來看看如何用已有的一些控制元件實現一些常見的佈局。

Toolbar + TabLayout 實現 TabLayout 置頂效果 很常見的一種模式是 TabLayout 放在 ToolBar 佈局中與其一起置頂在介面上方，而現在的效果是將ToolBar 隱藏而 TabLayout一直置頂在介面上方。

如何實現呢？首先所在的 Activity 要使用 AppTheme.NoActionBar 風格主題，之後再編寫佈局檔案。

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <!-- toolbar內部佈局檔案 -->

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tab_height"
        app:tabIndicatorColor="@color/white"
        app:tabTextColor="@color/white_normal">

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


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

<!-- 主介面佈局檔案 -->
複製程式碼
 

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

很重要的兩點：

設定 Toolbar 的 layout_scrollFlags="scroll|enterAlways|snap" 保證 Toolbar 能隨介面滑動向上隱藏。

TabLayout 與 Toolbar 同級，父節點為 AppBarLayout ，保證 TabLayout 能夠能夠顯示在 Toolbar 外面而不隨其一起隱藏。

浸入式 + CollapsingToolbarLayout

CollapsingToolbarLayout 可以包裹 Toolbar , 當其顯示完收縮動畫時使 Toolbar 顯示在頂端。而我們可以再加入浸入式的效果讓 CollapsingToolbarLayout 的背景圖突破系統的狀態列使介面更加美觀同時也不影響 Toolbar 的顯示效果。

在實現佈局檔案前要賦予當前的Activity主題為AppTheme.Immersive。

其樣式要在 v19 與 v21 分別處理，至於v19之前的 android 版本那就無能為力了。

v19

v21

之後再來看佈局檔案，包括了 AppBarLayout，CollapsingToolbarLayout 和 Toolbar 這些控制元件。

同樣也是要分為 v19 和 v21 兩種佈局

v19

v21

如何實現呢？首先所在的 Activity 要使用 AppTheme.NoActionBar 風格主題，之後再編寫佈局檔案。

那麼重點在哪裡呢？

1.設定你當前的 Activity 的狀態列為透明，4.4之前的機型則無法適配。

2.注意每個控制元件下的 fitsSystemWindows 屬性，使系統能夠調整 view 的 padding 值使其適配。

3.設定 CollapsingToolbarLayout 為可滾動（scroll）,滾動結束後可以設定 statusBarScrim 作為覆蓋色。

4.背景佈局與 Toolbar 同級，佈局檔案上可以設定滾動的模式，如視差滾動及相應的值。

5.注意到 v19 的佈局檔案上的 Toolbar ，給它賦予了一個 android:layout_marginTop="25dp"的屬性，以便在Android 4.4上時防止被系統的狀態列所覆蓋。當然這個值可以在程式碼中獲取到系統狀態列高度再進行設定。

fitsSystemWindows詳解：這個一個boolean值的內部屬性，讓view可以根據系統視窗(如status bar)來調整自己的佈局，如果值為true,就會調整view的paingding屬性來給system windows留出空間。

Fragment + 不同風格佈局

有時候產品要求在一個 Activity 上顯示不同的 Fragment 介面，且 Fragment 上的每一個頭部樣式都不一樣，比如說一個是普通情況下的 Toolbar，另一個卻是浸入式的可伸縮頭部，像簡書app的首頁

額，我們先不提圖中的那個bug，圖中的介面主要是兩種效果，一個為普通的標題欄+正文，另一個則是浸入式的圖片背景+正文。我們也可以利用浸入式的主題來仿照出簡書的效果。

第一步要做的是給 Fragment 所在的 Activity 套上 AppTheme.Immersive 浸入式主題樣式，之後為 Activity 加上佈局

無他，就是一個 ViewPager 容器用來載入 Fragment。

書城所在的 Fragment 佈局如下：

佈局跟之前的浸入式佈局相同，但單單這樣佈局是有問題的，此時的 Toolbar 會顯示在系統的狀態列下。所以我們要修正 Toolbar 的擺放位置，即人為的為其設定 MarginTop 距離。

在每個 Fragment 初始化 Toolbar 時都需要呼叫這個方法來修正位置。

重點又來了：

1.修改為浸入式樣式主題，要點見上一個案例。

2.人為修正 Toolbar 的距離，保證位置擺放正確。

3.注意 Fragment 切換時偶爾出現的一些 Toolbar 問題。

Fragment 與 Toolbar 的選項選單問題

在 Fragment 之間切換的時候很容易遇到 Toolbar 上的選單無法正確的顯示的問題，解決方法也很簡單，在 Fragment 的 onCreateView() 方法中新增一行程式碼：

總結

自從 Google 出了 com.android.support:design 包之後，其多樣化的定製給 App 應用帶來更加酷炫的效果，佈局的變化只不過是其中的一部分而已。文章的開頭也說了， CoordinatorLayout 不止是帶來了佈局的變化，也帶給了控制元件更多的UI互動動作。