CoordinatorLayout 上的一些佈局技巧

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 版本那就無能爲力了。

有興趣的加入Android工程師交流Q羣：752016839主要針對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 時都須要調用這個方法來修正位置。 有興趣的加入Android工程師交流Q羣：752016839主要針對Android開發人員提高本身，突破瓶頸，相信你來交流，會有提高和收穫。 重點又來了：

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

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

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

Fragment 與 Toolbar 的選項菜單問題

在 Fragment 之間切換的時候很容易遇到 Toolbar 上的菜單沒法正確的顯示的問題，解決方法也很簡單，在 Fragment 的 onCreateView() 方法中添加一行代碼：

總結

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