【Android - 控件】之MD - CoordinatorLayout的使用

　　CoordinatorLayout是Android 5.0新特性——Material Design中的一個布局控件，主要用來協調各個子視圖之間的工作，也可以用來作為頂部布局。CoordinatorLayout主要是通過設置子視圖的Behavior來達到協調子視圖之間的工作的目的的。

　　CoordinatorLayout主要有以下三種最常用的使用方法：

• CoordinatorLayout + FloatingActionButton實現FAB與其他視圖的協調；
• CoordinatorLayout + AppBarLayout實現頭部布局與滑動視圖的協調；
• CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout實現頭部布局與滑動視圖的協調，以及頭部布局內部各視圖的協調。

 

1、CoordinatorLayout + FloatingActionButton：

　　CoordinatorLayout為嵌套其中的子視圖提供了兩個屬性：layout_anchor和layout_anchorGravity，前者是用來設置當前視圖的錨點視圖，即當前視圖停靠在哪個視圖上；后者是用來設置當前視圖與錨點視圖的位置關系，即當前視圖停靠在錨點視圖的哪個位置，這兩個屬性最常用的控件就是FAB。例如，下面這段代碼中的兩個FAB，一個停靠在整個CoordinatorLayout布局的右下角，另一個停靠在Toolbar的右下角：

<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/activity_fab"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFFFF">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary" />

    <!-- CoordinatorLayout作為一個super-powered FrameLayout，通過設置子View的layout_gravity來設置子View的位置 -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:layout_margin="20.0dip"
        android:src="@mipmap/ic_launcher"
        app:fabSize="normal" />

    <!--
        CoordinatorLayout為子View提供了一個anchor屬性，可以設置錨點，即固定在某個控件的某個位置
        app:layout_anchor：設置錨點控件
        app:layout_anchorGravity：設置將當前控件固定在目標控件的哪個位置
    -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="50.0dip"
        android:src="@mipmap/ic_launcher"
        app:fabSize="normal"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom|right" />

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

　　運行結果如圖所示：

 

2、CoordinatorLayout + AppBarLayout：

　　AppBarLayout是為了MD設計的App Bar，支持手勢滑動操作。被AppBarLayout包裹的子視圖會具有layout_scrollFlags屬性，這個屬性是用來控制子視圖的滑動模式的，有以下幾個可選值：

• scroll：所有想滾動出屏幕的view都需要設置這個flag，沒有設置這個flag的view將被固定在屏幕頂部。
• enterAlways：設置這個flag時，向下的滾動都會導致該view變為可見，啟用“快速返回模式”。
• enterAlwaysCollapsed：當你的視圖已經設置minHeight屬性又使用此標志時，你的視圖只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。
• snap：磁性吸附，在滑動到一定程度后松手可以自動縮到頂端或自動拉伸到最大。

　　先來看一個例子：

<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/activity_abl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFFFF">

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

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:tabIndicatorColor="#FFFFFFFF"
            app:tabIndicatorHeight="5.0dip"
            app:tabSelectedTextColor="#FFFFFFFF"
            app:tabTextColor="@color/colorAccent" />

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

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

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

　　在這個例子中，AppBarLayout中嵌套了一個Toolbar和一個TabLayout，其中Toolbar中設置了layout_scrollFlags屬性為“scroll|enterAlways”，因此Toolbar是可以根據滑動滑出屏幕；TabLayout沒有設置layout_scrollFlags屬性，因此它最終只會固定在屏幕上方。

　　上面這個例子的運行結果如下圖所示：

3、CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout：

　　“CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout”的模式常用來制作Design模式的詳情頁頁面，使用CollapsingToolbarLayout可以達到“視差模式”，即上滑過程中，頂部布局的消失是有一定的顏色或圖案的變化效果的。

　　CoordinatorLayout、AppBarLayout和CollapsingToolbarLayout這三個布局控件的嵌套順序是這樣的：CoordinatorLayout中嵌套AppBarLayout，AppBarLayout中嵌套CollapsingToolbarLayout，CollapsingToolbarLayout中嵌套一個Toolbar。

　　CollapsingToolbarLayout中有一個title屬性，可以設置CollapsingToolbarLayout上顯示的標題文本，當CollapsingToolbarLayout中嵌套了Toolbar之后，滑動時這個文本最終會移動到Toolbar中。CollapsingToolbarLayout中還有一個contentScrim屬性，用來設置Toolbar被折疊到頂部時顯示的背景。

　　CollapsingToolbarLayout為自己內部的子視圖提供了一個屬性：layout_collpaseMode，用來設置子視圖的滑動模式，有兩個值可以選擇：

• parallax：視差模式，在折疊過程中會有視差效果
• pin：固定模式，此視圖最后將固定在屏幕頂端

　　我們來看一個例子：

<android.support.design.widget.CoordinatorLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_ctl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFFFF">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256.0dip"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:title="aaaaaa">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@string/app_name"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg"
                app:layout_collapseMode="parallax" />

            <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.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

　　在這個例子中，CollapsingToolbarLayout中嵌套了兩個控件：一個ImageView和一個Toolbar，其中，ImageView設置了layout_collapseMode屬性為parallax，表示它將在滑動過程中呈視差模式漸漸變化，最終滑出屏幕；而Toolbar設置的layout_collapseMode屬性為pin，表示Toolbar會最終固定在屏幕上方，而且變成CollapsingToolbarLayout中contentScrim屬性設置的背景樣式，即Toolbar的背景會在最終變成colorPrimary顏色。

　　這個例子的運行結果如下圖所示：

      

　　以上就是對CoordinatorLayout的基礎用法的介紹，下面貼出碼雲中的源碼，供大家參考。

DEMO地址