作為Material Design風格的重要組件,CoordinatorLayout協(xié)調(diào)多種組件的聯(lián)動，實現(xiàn)各種復雜的效果，在實際項目中扮演著越來越重要的角色。本篇博客將由淺到深，帶你一起玩轉(zhuǎn)CoordinatorLayout。

官方文檔對CoordinatorLayout是這樣描述的：

CoordinatorLayout是一個加強版的FrameLayout，本質(zhì)是一個ViewGroup，主要有兩個用途：
1.用作應用的頂層布局管理器，作為界面其他控件的父容器
2.用作相互之間有特定交互行為的控件的父容器
通過為CoordinatorLayout的子View指定不同的Behavior(默認的Behavior或自定義的Behavior)，就可以實現(xiàn)它們之間許多復雜的交互行為，例如側(cè)滑，移動，滑動等。Behavior在后面會詳談，最后我們再來瞅一眼源碼：

public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent {}

先來了解一下NestedScrolling—Android嵌套滑動機制，用來完成復雜的滑動效果。要完成這樣的交互，父View需要實現(xiàn) NestedScrollingParent 接口,而子View需要實現(xiàn) NestedScrollingChild 接口。CoordinatorLayout其實是NestedScrollingParent的實現(xiàn)類，也就意味著它的子View一定會實現(xiàn)NestedScrollingChild接口，這樣一起協(xié)同完成復雜的滑動交互。

介紹工作就到這里，接下來通過三個例子，一起學習CoordinatorLayout(協(xié)調(diào)布局)。

一.CoordinatorLayout與AppBarLayout

官方文檔中對AppBarLayout是這樣描述的：AppBarLayout是一個垂直的LinearLayout，只有作為CoordinatorLayout的直接子View時才能正常工作，可以通過設置layout_scrollFlags屬性或setScrollFlags()方法讓AppBarLayout的子View具有“滾動行為”。我們先來看一個例子，再來分析這段描述。

列表向上滑動，布局收縮；列表向下滑動，布局向下展開到一定高度，待列表完全向下滑動到起始位置，布局再次向下展開。看看怎么實現(xiàn)的：

布局代碼：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.design.widget.CoordinatorLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="100dp"android:background="@color/colorPrimary"android:minHeight="50dp"app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"></LinearLayout><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.v7.widget.Toolbar></android.support.design.widget.AppBarLayout><android.support.v7.widget.RecyclerViewandroid:id="@+id/recycler"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v7.widget.RecyclerView></android.support.design.widget.CoordinatorLayout></LinearLayout>

CoordinatorLayout中，AppBarLayout與RecyclerView豎直排列；AppBarLayout中，LinearLayout與Toolbar豎直排列。AppBarLayout的官方文檔告訴我們，通過設置layout_scrollFlags屬性可以讓子View具有滑動行為。結(jié)合布局文件可以看到，我們給LinearLayout設置了三個屬性，都代表什么意思呢：

scroll：設成這個值的效果就是該View和scrolling view形成一個整體，示例中我們滑動RecyclerView時，LinearLayout也會響應滑動。有一點特別需要我們的注意，為了其他的滾動行為生效，必須同時指定scroll和其他標記。
exitUntilCollapsed：設成這個值的效果就是該View離開屏幕時，會被折疊到最小高度。該View已完全折疊后，再向下滾動scrolling view，直到scrolling view頂部的內(nèi)容完全顯示后，該View才會開始向下滾動以顯現(xiàn)出來。
enterAlways：設成這個值的效果就是當scrolling view向下滾動時，該View會一起跟著向下滾動，示例圖中有所體現(xiàn)。
enterAlwaysCollapsed：設成這個值的效果就是當我們開始向下滾動scrolling view時，該View會一起跟著滾動直到達到其最小高度。然后當scrolling view滾動至頂部內(nèi)容完全顯示后，再向下滾動scrolling view，該View會繼續(xù)滾動到完全顯示出來。示例圖中有所體現(xiàn)。

篇幅有限，這里就不多做演示了，大家可以自己試試，組合成不同的效果。

通過分析CoordinatorLayout我們知道它的子View一定會實現(xiàn)NestedScrollingChild接口，這樣一起完成復雜的滑動交互，我們看到布局中有一個RecyclerView,先瞅一眼源碼：

public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild {}

Bingo！RecyclerView其實就是NestedScrollingChild的實現(xiàn)類，這也就解釋了嵌套滑動的實現(xiàn)。這里如果使用NestedScrollView，然后在里面嵌套一個布局也是可以的。最后我們還為RecyclerView設置了這樣一個屬性：

app:layout_behavior="@string/appbar_scrolling_view_behavior">

這是因為CoordinatorLayout包含的子視圖中，帶有滾動屬性的View必須設置app:layout_behavior屬性，設置的這個屬性到底是什么呢：

android.support.design.widget.AppBarLayout$ScrollingViewBehavior

原來是AppBarLayout自帶一個Behivior，直接在源碼里注解聲明的，這個Behivior也只能用于AppBarLayout，作用是讓他根據(jù)CoordinatorLayout上的手勢進行一些效果(比如收縮，滾動)。關于CoordinatorLayout與Behivior工作原理，我們后面再談。

二.CoordinatorLayout與CollapsingToolbarLayout
CollapsingToolbarLayout(折疊布局)繼承至FrameLayout，通過給它設置layout_scrollFlags，它以控制子View響應layout_behavior事件并作出相應的變化(移除屏幕或固定在屏幕頂端)。我們看一個例子：

很常見也很好看的一個界面，看看布局代碼：

<?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:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="250dp"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="match_parent"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginEnd="60dp"app:expandedTitleMarginStart="50dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="fitXY"android:src="@drawable/bg"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.7" /><android.support.v7.widget.Toolbarandroid: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.RecyclerViewandroid:id="@+id/recycler"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior" /></android.support.design.widget.CoordinatorLayout>

結(jié)合代碼我們看看CollapsingToolbarLayout的使用方法：

1.AppBarLayout與Toolbar的高度一定要設置具體值，這是最后展開與固定的值
2.CollapsingToolbarLayout的屬性設置：layout_scrollFlags一定是必不可少的，屬性值上文提過，這里不再重復了；contentScrim設置CollapsingToolbarLayout折疊后的背景顏色；expandedTitleMarginStart 設置沒有收縮時title向左填充的距離；expandedTitleMarginEnd設置收縮結(jié)束時title向左填充的距離
3.ImageView的屬性設置：layout_collapseMode (折疊模式)一定是必不可少的，一共有兩種模式。pin：設置為這個模式時，當CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上；parallax：設置為這個模式時，在內(nèi)容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現(xiàn)視差滾動效果，通常和視差因子搭配使用；layout_collapseParallaxMultiplier設置視差滾動因子，值為0~1，值越大視察越大。
4.CollapsingToolbarLayout的折疊、展開狀態(tài)監(jiān)聽: CollapsingToolbarLayout是通過實現(xiàn)AppBarLayout的OnOffsetChangedListener接口，根據(jù)AppBarLayout的偏移來實現(xiàn)子View視差移動和顯示。通過調(diào)用AppBarLayout的addOnOffsetChangedListener方法監(jiān)聽AppBarLayout的位移，從而判斷CollapsingToolbarLayout的狀態(tài)。

三.CoordinatorLayout與Behavior

前面提到，CoordinatorLayout的子View之間許多復雜的交互行為是通過指定Behavior實現(xiàn)的。那么實現(xiàn)原理是什么，我們看個例子：

TextView的位置會隨著Button的改變而改變，并且顯示當前的坐標。其實Behavior的原理就是觀察者模式的應用，被觀察者就是事件源dependency，觀察者就是做出改變的child。具體看看怎么實現(xiàn)的：

public class FollowBehavior extends CoordinatorLayout.Behavior<TextView> {public FollowBehavior(Context context, AttributeSet attrs) {super(context, attrs);}@Overridepublic boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) {return dependency instanceof Button;}@Overridepublic boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) {child.setX(dependency.getX() + 200);child.setY(dependency.getY() + 200);child.setText("觀察者:" + dependency.getX() + "," + dependency.getY());return true;} }

1.自定義一個FollowBehavior繼承自Behavior，泛型就是child的類型，也就是觀察者View
2.重寫構(gòu)造函數(shù),因為CoordinatorLayout源碼中會通過反射調(diào)用這個構(gòu)造函數(shù)
3.重寫layoutDependsOn()：用來確定本次交互行為中的dependent view，在上面的代碼中，當dependency是Button類的實例時返回true，就可以讓系統(tǒng)知道布局文件中的Button就是本次交互行為中的被觀察者。
4.重寫onDependentViewChanged：當dependent view發(fā)生變化時，這個方法會被調(diào)用，參數(shù)中的child相當于本次交互行為中的觀察者，觀察者可以在這個方法中對被觀察者的變化做出響應，從而完成一次交互行為。

代碼布局中的應用：

<?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:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_behavior=".FollowBehavior" /><Buttonandroid:id="@+id/btn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="被觀察者" /></android.support.design.widget.CoordinatorLayout>btn.setOnTouchListener(new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {if (event.getAction() == MotionEvent.ACTION_MOVE) {v.setX(event.getRawX() - v.getWidth() / 2);v.setY(event.getRawY() - v.getHeight() / 2 - getStatusBarHeight(getApplicationContext()));}return true;}});

xml布局文件中，只需指定

app:layout_behavior=“你的Behavior包含包名的類名”

CoordinatorLayout就會反射生成你的Behavior，這樣自定義的Behavior就能工作了。在Activity代碼中，添加OnTouchListener，獲取觸摸點坐標，這里豎直方向上減去了狀態(tài)欄的高度。

既然熟悉了Behavior的原理，這里我在之前的例子上升級了一下。先看效果圖：

折疊布局中加了一個圓形頭像，并且圓形頭像的大小，位置會隨著列表上下滑動而改變。沒有美工設計，交互是自己瞎想的，大家湊合看看。重點是掌握自定義Behavior。

這里的圓形ImageView就是我們的觀察者，給它指定Behavior，從而響應手勢事件。誰是被觀察者呢？這里我選擇的是AppBarLayout，因為上文提到過，可以通過AppBarLayout的addOnOffsetChangedListener方法監(jiān)聽AppBarLayout的位移，從而判斷CollapsingToolbarLayout的狀態(tài)。既然能夠獲取到這個位移，那就可以讓觀察者對被觀察者的位移變化做出響應?？纯淳唧w實現(xiàn)：

public class FollowBehavior extends CoordinatorLayout.Behavior<ImageView> {private int width, height, top, left;public FollowBehavior(Context context, AttributeSet attrs) {super(context, attrs);}@Overridepublic boolean layoutDependsOn(CoordinatorLayout parent, ImageView child, View dependency) {return dependency instanceof AppBarLayout;}@Overridepublic boolean onDependentViewChanged(CoordinatorLayout parent, ImageView child, View dependency) {if (dependency.getY() == 0) {width = child.getWidth();height = child.getHeight();top = child.getTop();left = child.getLeft();}float percent = Math.abs(dependency.getY()) / SixActivity.scrollRange;float yPercent = (float) (percent * 0.85);child.setY(top * (1 - yPercent));child.setX(left + 300 * percent);CoordinatorLayout.LayoutParams layoutParams =(CoordinatorLayout.LayoutParams) child.getLayoutParams();layoutParams.width = (int) (width * (1 - percent * 3 / 4));layoutParams.height = (int) (height * (1 - percent * 3 / 4));child.setLayoutParams(layoutParams);return true;} }

具體分析一下onDependentViewChanged這個方法，AppBarLayout的折疊范圍scrollRange是通過 appBarLayout.getTotalScrollRange()獲取到的，這里我設置成了靜態(tài)常量；當AppBarLayout完全展開，沒有折疊時，獲取到ImageView的基本屬性；當AppBarLayout狀態(tài)改變時，同時改變ImageView的坐標與大小，達到示例效果。使用時很簡單，直接在CoordinatorLayout的XML布局加上即可。

<de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/img"android:layout_width="100dp"android:layout_height="100dp"android:layout_gravity="center"android:layout_marginTop="-340dp"android:src="@drawable/head"app:layout_behavior=".FollowBehavior" />

關于CoordinatorLayout的用法到這里差不多也就結(jié)束了，希望能對你有所幫助，如有不足與錯誤的地方隨時向我提問，我會認真采納。項目源碼已經(jīng)同步上傳到我的github上，歡迎star,fork,提issues，一起進步！

https://github.com/18722527635/AndroidArtStudy

總結(jié)

以上是生活随笔為你收集整理的一起玩转CoordinatorLayout的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。