CoordinatorLayout 使用綜述系列（二）

在 gradle 檔案中引入 meterial design 庫：

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

CoordinatorLayout 實現了多種Material Design中提到的滾動效果

CoordinatorLayout 與 AppBarLayout結合使用

圖2.1

<?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">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways">


        <!--        這裡寫頭部移動的佈局（例如這裡的搜尋） -->


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

        <android.support.design.widget.TabLayout
            android:id="@+id/tl_home_header_tab"
 

            android:layout_width="match_parent"
            android:layout_height="44dp"
            android:layout_marginLeft="0dp"
            android:layout_marginRight="0dp"
            android:background="@color/baseHeaderBackgroundColor"
            app:tabIndicatorColor="#fff"
            app:tabIndicatorHeight="2dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="#fff"
            app:tabTextColor="#d7d7d7"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_home_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

檢視層級說明

• 整個檢視被包含在 android.support.design.widget.CoordinatorLayout節點中
• 響應滑動事件移動的佈局 在 android.support.design.widget.AppBarLayout 節點中
• android.support.design.widget.AppBarLayout 節點中有隨著移動而被隱藏的佈局，也有固定不動的佈局
• 隨著移動而被隱藏的佈局在 android.support.design.widget.CollapsingToolbarLayout 節點中，CollapsingToolbarLayout 可以理解為子條目佈局的封裝，需要注意的是，在這裡設定了CollapsingToolbarLayout節點的 app:layout_scrollFlags=”scroll|enterAlways” 屬性

圖2.2

• CollapsingToolbarLayout節點的 layout_scrollFlags屬性一般有如下的取值

enterAlways: 一旦向上滾動這個view就可見。
enterAlwaysCollapsed: 顧名思義，這個flag定義的是何時進入（已經消失之後何時再次顯示）。假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那麼view將在到達這個最小高度的時候開始顯示，並且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。
exitUntilCollapsed: 同樣顧名思義，這個flag時定義何時退出，當你定義了一個minHeight，這個view將在滾動到達這個最小高度的時候消失。

圖2.1中顯示的效果就是 layout_scrollFlags屬性值設定為 enterAlways時的效果，一般也同時設定scroll 為響應事件，在這裡，CollapsingToolbarLayout節點響應的滑動聯動事件是 下面所（所設定app:layout_behavior=”@string/appbar_scrolling_view_behavior”）的檢視

當設定 app:layout_scrollFlags=”scroll|enterAlwaysCollapsed” 時，向上滑動時，CollapsingToolbarLayout 節點中佈局隱藏，當再下拉時，移動隱藏的佈局不會再回到原來的位置 ，而是停留在邊緣 如圖2.3 中所示效果

圖2.3