參考文章:
CoordinatorLayout 學(xué)習(xí)(一) - CoordinatorLayout的基本使用
CoordinatorLayout使用詳解: 打造折疊懸浮效果
一、概述
CoordinatorLayout顧名思義,協(xié)調(diào)者布局,它遵循Material風(fēng)格,包含在 support Library中。這里所謂的協(xié)調(diào)主要是只協(xié)調(diào)其子布局(child)之間的聯(lián)動,就那簡書App為例,當(dāng)我們下拉文章的時候,上面的ActionBar會自動隱藏,而這里就是上面所說的聯(lián)動。下面將會通過一個簡單的例子來實(shí)現(xiàn)類似的效果,當(dāng)然簡書實(shí)際是怎么實(shí)現(xiàn)的我是不知道的 = =,這里只是舉個例子。
那么CoordinatorLayout是如何實(shí)現(xiàn)child聯(lián)動的呢,答案是Behavier。在CoordinatorLayout內(nèi)部,每個child都必須帶一個Behavior(其實(shí)不攜帶也行,不攜帶就不能被協(xié)調(diào)),CoordinatorLayout就根據(jù)每個child所攜帶的Behavior信息進(jìn)行協(xié)調(diào)。
??這里還需要提一句的是,Behavior不僅僅協(xié)助聯(lián)動,而且還接管了child的三大流程,有點(diǎn)類似于RecyclerView的LayoutManager。
二、AppBarLayout
AppBarLayout繼承于LinearLayout的,默認(rèn)的方向 是Vertical.如果我們想要實(shí)現(xiàn)折疊的ActionBar效果,在CoordinatorLayout中,AppBarLayout絕對是作為首選的控件。
下面先來看一下AppBarLayout的滑動flag:
| Flag | 作用 |
|---|---|
SCROLL_FLAG_NO_SCROLL |
表示該View不能被滑動。也就是說不參與聯(lián)動。 |
SCROLL_FLAG_SCROLL |
表示該View參與聯(lián)動。具體效果需要跟其他Flag組合。 |
SCROLL_FLAG_EXIT_UNTIL_COLLAPSED |
表示當(dāng)View被推出屏幕時,會跟著滑動,直到折疊到View的最小高度;同時只有在其他View(比如說RecyclerView)滑動到頂部才會展開。 |
SCROLL_FLAG_ENTER_ALWAYS |
不管是View是滑出屏幕還是滑進(jìn)屏幕,該View都能立即響應(yīng)滑動事件,跟隨滑動。比如說,如果該View是折疊的,當(dāng)RecyclerView向下滑動時,該View隨時都能跟隨展開;反之亦然。 |
SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED |
在SCROLL_FLAG_ENTER_ALWAYS的基礎(chǔ)上,增加了折疊到固定高度的限制。在View下拉過程中,首先會將該View顯示minHeight的高度,RecyclerView在繼續(xù)下拉(這里以RecyclerView為例)。注意,該Flag在SCROLL_FLAG_ENTER_ALWAYS前提下生效。 |
SCROLL_FLAG_SNAP |
表示View擁有吸附功能。比如說,當(dāng)前滑動停止,View離底部更近,那么就會折疊;反之則會展開。 |
注意:上面的這些flag是設(shè)置在其子view上的,例如下面的TextView:
<android.support.design.widget.AppBarLayout
android:id="@+id/bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#FF0000"
android:gravity="center"
android:text="Title1"
android:textSize="16sp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
</android.support.design.widget.AppBarLayout>
且AppBarLayout必須作為CoordinatorLayout的直接子View,否則它的大部分功能將不會生效,如layout_scrollFlags等。
另外,這個flag是可以使用|來拼接的。
三,使用
首先需要在app的build.gradle中添加如下依賴:
implementation 'com.android.support:design:28.0.0'
然后是布局文件:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#FF0000"
android:gravity="center"
android:text="Title1"
android:textSize="16sp"
app:layout_scrollFlags="enterAlways|exitUntilCollapsed|snap|scroll|enterAlwaysCollapsed" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#00FF00"
android:gravity="center"
android:text="Title2"
android:textSize="16sp" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
注意這里RecyclerView設(shè)置了一個屬性:app:layout_behavior="@string/appbar_scrolling_view_behavior",也就是前面所說的Behavior了,如果不設(shè)置這個屬性那么RecyclerView和AppBarLayout是不會聯(lián)動的。關(guān)于Behavior后面我會單獨(dú)寫一篇文章進(jìn)行介紹。
由于RecyclerView中只需要填充一下數(shù)據(jù)即可,所以這里就不附上代碼了,下面直接根據(jù)不同的flag附上相應(yīng)的效果圖:
-
SCROLL_FLAG_NO_SCROLL
不設(shè)置layout_scrollFlags即可:省略... <TextView android:layout_width="match_parent" android:layout_height="50dp" android:background="#FF0000" android:gravity="center" android:text="no_scroll" android:textSize="16sp"/> 省略...效果圖:
noscroll.gif
-
SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
設(shè)置layout_scrollFlags為exitUntilCollapsed:省略... <TextView android:layout_width="match_parent" android:layout_height="50dp" android:background="#FF0000" android:gravity="center" android:text="exitUntilCollapsed" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:textSize="16sp"/> 省略...效果圖:
exitUntilCollapsed.gif
-
SCROLL_FLAG_ENTER_ALWAYS
設(shè)置layout_scrollFlags為enterAlways——立即響應(yīng)滑動事件:省略... <TextView android:layout_width="match_parent" android:layout_height="50dp" android:background="#FF0000" android:gravity="center" android:text="enterAlways" app:layout_scrollFlags="scroll|enterAlways" android:textSize="16sp"/> 省略...效果圖:
enterAlaways.gif
SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED
設(shè)置layout_scrollFlags為scroll|enterAlways|enterAlwaysCollapsed——立即響應(yīng)滑動事件且先顯示最小高度。注意需要同時設(shè)置enterAlways和enterAlwaysCollapsed兩個標(biāo)記位才能實(shí)現(xiàn)效果:
省略...
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:minHeight="20dp"
android:background="#FF0000"
android:gravity="center"
android:text="enterAlwaysCollapsed"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:textSize="16sp"/>
省略...
效果圖:

SCROLL_FLAG_SNAP
設(shè)置layout_scrollFlags為snap——吸附效果:
省略...
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:minHeight="20dp"
android:background="#FF0000"
android:gravity="center"
android:text="snap"
app:layout_scrollFlags="scroll|snap"
android:textSize="16sp"/>
省略...
效果圖:

四、總結(jié)
-
AppBarLayout必須作為CoordinatorLayout的直接子View,否則它的大部分功能將不會生效。 - 與
AppBarLayout聯(lián)動的View需要設(shè)置layout_behavior屬性。 - 想要實(shí)現(xiàn)聯(lián)動效果,其實(shí)只有
exitUntilCollapsed、enterAlways、enterAlwaysCollapsed和snap四種效果,且都需要與scroll配合使用才會生效。 -
enterAlwaysCollapsed還需要和enterAlways同時使用才會生效,否則只會有exitUntilCollapsed的效果。


