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的基礎用法的介紹,下面貼出碼雲中的源碼,供大家參考。