參考文章:
CoordinatorLayout 學(xué)習(xí)(一) - CoordinatorLayout的基本使用
CoordinatorLayout使用詳解: 打造折疊懸浮效果
一、概述
CoordinatorLayout
顧名思義没陡,協(xié)調(diào)者布局肘交,它遵循Material
風(fēng)格八堡,包含在 support Library
中旷档。這里所謂的協(xié)調(diào)主要是只協(xié)調(diào)其子布局(child
)之間的聯(lián)動(dòng)奴饮,就那簡(jiǎn)書App
為例襟交,當(dāng)我們下拉文章的時(shí)候迈倍,上面的ActionBar
會(huì)自動(dòng)隱藏,而這里就是上面所說(shuō)的聯(lián)動(dòng)捣域。下面將會(huì)通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)實(shí)現(xiàn)類似的效果啼染,當(dāng)然簡(jiǎn)書實(shí)際是怎么實(shí)現(xiàn)的我是不知道的 = =宴合,這里只是舉個(gè)例子。
那么CoordinatorLayout
是如何實(shí)現(xiàn)child
聯(lián)動(dòng)的呢迹鹅,答案是Behavier
卦洽。在CoordinatorLayout
內(nèi)部,每個(gè)child
都必須帶一個(gè)Behavior
(其實(shí)不攜帶也行斜棚,不攜帶就不能被協(xié)調(diào))阀蒂,CoordinatorLayout
就根據(jù)每個(gè)child
所攜帶的Behavior
信息進(jìn)行協(xié)調(diào)。
??這里還需要提一句的是弟蚀,Behavior
不僅僅協(xié)助聯(lián)動(dòng)蚤霞,而且還接管了child
的三大流程,有點(diǎn)類似于RecyclerView
的LayoutManager
义钉。
二昧绣、AppBarLayout
AppBarLayout
繼承于LinearLayou
t的,默認(rèn)的方向 是Vertical
.如果我們想要實(shí)現(xiàn)折疊的ActionBar
效果捶闸,在CoordinatorLayout
中滞乙,AppBarLayout
絕對(duì)是作為首選的控件。
下面先來(lái)看一下AppBarLayout
的滑動(dòng)flag
:
Flag | 作用 |
---|---|
SCROLL_FLAG_NO_SCROLL |
表示該View 不能被滑動(dòng)鉴嗤。也就是說(shuō)不參與聯(lián)動(dòng)。 |
SCROLL_FLAG_SCROLL |
表示該View 參與聯(lián)動(dòng)序调。具體效果需要跟其他Flag 組合醉锅。 |
SCROLL_FLAG_EXIT_UNTIL_COLLAPSED |
表示當(dāng)View 被推出屏幕時(shí),會(huì)跟著滑動(dòng)发绢,直到折疊到View 的最小高度硬耍;同時(shí)只有在其他View (比如說(shuō)RecyclerView )滑動(dòng)到頂部才會(huì)展開(kāi)。 |
SCROLL_FLAG_ENTER_ALWAYS |
不管是View 是滑出屏幕還是滑進(jìn)屏幕边酒,該View 都能立即響應(yīng)滑動(dòng)事件经柴,跟隨滑動(dòng)。比如說(shuō)墩朦,如果該View 是折疊的坯认,當(dāng)RecyclerView 向下滑動(dòng)時(shí),該View 隨時(shí)都能跟隨展開(kāi)氓涣;反之亦然牛哺。 |
SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED |
在SCROLL_FLAG_ENTER_ALWAYS 的基礎(chǔ)上,增加了折疊到固定高度的限制劳吠。在View 下拉過(guò)程中引润,首先會(huì)將該View 顯示minHeight 的高度,RecyclerView 在繼續(xù)下拉(這里以RecyclerView 為例)痒玩。注意淳附,該Flag 在SCROLL_FLAG_ENTER_ALWAYS 前提下生效议慰。 |
SCROLL_FLAG_SNAP |
表示View 擁有吸附功能。比如說(shuō)奴曙,當(dāng)前滑動(dòng)停止别凹,View 離底部更近,那么就會(huì)折疊缆毁;反之則會(huì)展開(kāi)番川。 |
注意:上面的這些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
脊框,否則它的大部分功能將不會(huì)生效颁督,如layout_scrollFlags
等。
另外浇雹,這個(gè)flag
是可以使用|
來(lái)拼接的沉御。
三,使用
首先需要在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è)置了一個(gè)屬性:app:layout_behavior="@string/appbar_scrolling_view_behavior"
昭灵,也就是前面所說(shuō)的Behavior
了吠裆,如果不設(shè)置這個(gè)屬性那么RecyclerView
和AppBarLayout
是不會(huì)聯(lián)動(dòng)的。關(guān)于Behavior
后面我會(huì)單獨(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)滑動(dò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)滑動(dòng)事件且先顯示最小高度抠蚣。注意需要同時(shí)設(shè)置enterAlways
和enterAlwaysCollapsed
兩個(gè)標(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
,否則它的大部分功能將不會(huì)生效嘶窄。 - 與
AppBarLayout
聯(lián)動(dòng)的View
需要設(shè)置layout_behavior
屬性怀跛。 - 想要實(shí)現(xiàn)聯(lián)動(dòng)效果,其實(shí)只有
exitUntilCollapsed
柄冲、enterAlways
吻谋、enterAlwaysCollapsed
和snap
四種效果,且都需要與scroll
配合使用才會(huì)生效现横。 -
enterAlwaysCollapsed
還需要和enterAlways
同時(shí)使用才會(huì)生效漓拾,否則只會(huì)有exitUntilCollapsed
的效果。