Android 5.0中CoordinatorLayout的使用技巧
CoordinatorLayout 實(shí)現(xiàn)了多種Material Design中提到的滾動效果。目前這個(gè)框架提供了幾種不用寫動畫代碼就能工作的方法,這些效果包括:
*讓浮動操作按鈕上下滑動,為Snackbar留出空間。
*擴(kuò)展或者縮小Toolbar或者頭部,讓主內(nèi)容區(qū)域有更多的空間。
*控制哪個(gè)view應(yīng)該擴(kuò)展還是收縮,以及其顯示大小比例,包括視差滾動效果動畫。
浮動操作按鈕與Snackbar
CoordinatorLayout可以用來配合浮動操作按鈕的 layout_anchor 和 layout_gravity屬性創(chuàng)造出浮動效果。
當(dāng)Snackbar在顯示的時(shí)候,往往出現(xiàn)在屏幕的底部。為了給Snackbar留出空間,浮動操作按鈕需要向上移動。

只要使用CoordinatorLayout作為基本布局,將自動產(chǎn)生向上移動的動畫。浮動操作按鈕有一個(gè) 默認(rèn)的 behavior來檢測Snackbar的添加并讓按鈕在Snackbar之上呈現(xiàn)上移與Snackbar等高的動畫。
<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.v7.widget.RecyclerView android:id="@+id/rvToDoList" android:layout_width="match_parent" android:background="#9d9d9d" android:layout_height="match_parent"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" app:layout_anchor="@id/rvToDoList" app:layout_anchorGravity="bottom|right|end"/> <!--app:layout_anchor:意思是FAB浮動按鈕顯示在哪個(gè)布局區(qū)域。且設(shè)置當(dāng)前錨點(diǎn)的位置 app:layout_anchorGravity:意思FAB浮動按鈕在這個(gè)布局區(qū)域的具體位置。兩個(gè)屬性共同作用才是的FAB 浮動按鈕也能折疊消失,出現(xiàn)。 --> </android.support.design.widget.CoordinatorLayout>
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "test", Snackbar.LENGTH_LONG)
.setAction("Cancel", new View.OnClickListener() {
@Override
public void onClick(View v) {
//這里的單擊事件代表點(diǎn)擊消除Action后的響應(yīng)事件
Toast.makeText(MainActivity.this,"asdasd",Toast.LENGTH_SHORT).show();
}
}).show();
}
});
}
Toolbar的擴(kuò)展與收縮
首先需要確保你不是使用已經(jīng)過時(shí)的ActionBar,使用ToolBar作為actionbar。同樣,這里也需要CoordinatorLayout作為主布局容器。
我們必須使用一個(gè)容器布局: AppBarLayout 來讓Toolbar響應(yīng)滾動事件。響應(yīng)滾動事件
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
然后,我們需要定義AppBarLayout與滾動視圖之間的聯(lián)系。在RecyclerView或者任意支持嵌套滾動的view比如NestedScrollView上添加app:layout_behavior。support library包含了一個(gè)特殊的字符串資源@string/appbar_scrolling_view_behavior,它和AppBarLayout.ScrollingViewBehavior相匹配,用來通知AppBarLayout 這個(gè)特殊的view何時(shí)發(fā)生了滾動事件,這個(gè)behavior需要設(shè)置在觸發(fā)事件(滾動)的view之上。注意:根據(jù)官方的谷歌文檔,AppBarLayout目前必須是第一個(gè)嵌套在CoordinatorLayout里面的子view。
<android.support.v7.widget.RecyclerView android:id="@+id/rvToDoList" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior">
AppBarLayout里面定義的view只要設(shè)置了app:layout_scrollFlags屬性,就可以在RecyclerView滾動事件發(fā)生的時(shí)候被觸發(fā):當(dāng)CoordinatorLayout發(fā)現(xiàn)RecyclerView中定義了這個(gè)屬性,它會搜索自己所包含的其他view,看看是否有view與這個(gè)behavior相關(guān)聯(lián)。AppBarLayout.ScrollingViewBehavior描述了RecyclerView與AppBarLayout之間的依賴關(guān)系。RecyclerView的任意滾動事件都將觸發(fā)AppBarLayout或者AppBarLayout里面view的改變。
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
app:layout_scrollFlags是一個(gè)非常重要的屬性,它里邊的取值主要有五種,下面我分別來解釋:
1.scroll 表示CollapsingToolbarLayout可以滾動(不設(shè)置的話頭部的ImageView將不能折疊),如果想將所有的View能滾動出屏幕,必須設(shè)置個(gè)flag,若沒有設(shè)置flag的View,則會被固定在屏幕頂部
2.enterAlways 表示底部的滾動控件只要向下滾動,頭部就顯示出來,設(shè)置這個(gè)flag時(shí),向下的滾動都會導(dǎo)致該view變?yōu)榭梢?。?dāng)ScrollView往下滾動時(shí),該View會直接往下滾動。而不用考慮ScrollView是否在滾動。
3.enterAlwaysCollapsed 表示當(dāng)?shù)撞繚L動控件滾動見頂時(shí),頭部顯示出來,在ScrollView往上滑動時(shí),首先是View把滑動事件“奪走”,由View去執(zhí)行滑動,直到滑動最小高度后,把這個(gè)滑動事件“還”回去,讓ScrollView內(nèi)部去上滑。
4.exitUntilCollapsed 表示頭部折疊到最小高度時(shí)(Toolbar的高度),就不再折疊,是enterAlways的附加選項(xiàng),一般跟enterAlways一起使用,它是指,View在往下“出現(xiàn)”的時(shí)候,首先是enterAlways效果,當(dāng)View的高度達(dá)到最小高度時(shí),View就暫時(shí)不去往下滾動,直到ScrollView滑動到頂部不再滑動時(shí),View再繼續(xù)往下滑動,直到滑到View的頂部結(jié)束。
5.snap 表示在滑動過程中如果停止滑動,則頭部會就近折疊(要么恢復(fù)原狀,要么折疊成一個(gè)Toolbar)
記住,要把帶有scroll flag的view放在前面,這樣收回的view才能讓正常退出,而固定的view繼續(xù)留在頂部。

制造折疊效果
如果想制造toolbar的折疊效果,我們必須把Toolbar放在CollapsingToolbarLayout中:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/main_content"
tools:context="wxt.coordinatorlayout.AppBarLayout">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="aaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\n" />
</android.support.v4.widget.NestedScrollView>
現(xiàn)在效果就成了:

通常,我們我們都是設(shè)置Toolbar的title,而現(xiàn)在,我們需要把title設(shè)置在CollapsingToolBarLayout上,而不是Toolbar。
CollapsingToolbarLayout collapsingToolbar =(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Title");
制造視差效果CollapsingToolbarLayout
CollapsingToolbarLayout還能讓我們做出更高級的動畫,比如在里面放一個(gè)ImageView,然后在它折疊的時(shí)候漸漸淡出。同時(shí)在用戶滾動的時(shí)候title的高度也會隨著改變。

CollapsingToolbarLayout作用是提供了一個(gè)可以折疊的Toolbar,它繼承至FrameLayout,給它設(shè)置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在響應(yīng)layout_behavior事件時(shí)作出相應(yīng)的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。
使用CollapsingToolbarLayout:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#30469b"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/bg"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<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>
我們在CollapsingToolbarLayout中設(shè)置了一個(gè)ImageView和一個(gè)Toolbar。并把這個(gè)CollapsingToolbarLayout放到AppBarLayout中作為一個(gè)整體。
1、在CollapsingToolbarLayout中:
其中還設(shè)置了一些屬性,簡要說明一下:
contentScrim - 設(shè)置當(dāng)完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。
expandedTitleMarginStart - 設(shè)置擴(kuò)張時(shí)候(還沒有收縮時(shí))title向左填充的距離。
2、在ImageView控件中:
我們設(shè)置了:
layout_collapseMode (折疊模式) - 有兩個(gè)值:
pin - 設(shè)置為這個(gè)模式時(shí),當(dāng)CollapsingToolbarLayout完全收縮后,Toolbar還可以保留在屏幕上。
parallax - 設(shè)置為這個(gè)模式時(shí),在內(nèi)容滾動時(shí),CollapsingToolbarLayout中的View(比如ImageView)也可以同時(shí)滾動,實(shí)現(xiàn)視差滾動效果,通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用。
layout_collapseParallaxMultiplier(視差因子) - 設(shè)置視差滾動因子,值為:0~1。
3、在Toolbar控件中:
我們設(shè)置了layout_collapseMode(折疊模式):為pin。
綜上分析:當(dāng)設(shè)置了layout_behavior的控件響應(yīng)起了CollapsingToolbarLayout中的layout_scrollFlags事件時(shí),ImageView會有視差效果的向上滾動移除屏幕,當(dāng)開始折疊時(shí)CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變?yōu)槲覀冊O(shè)置好的背景色,Toolbar也一直會固定在最頂端。
【注】:使用CollapsingToolbarLayout時(shí)必須把title設(shè)置到CollapsingToolbarLayout上,設(shè)置到Toolbar上不會顯示。即:
mCollapsingToolbarLayout.setTitle(” “);
該變title的字體顏色:
擴(kuò)張時(shí)候的title顏色:mCollapsingToolbarLayout.setExpandedTitleColor();
收縮后在Toolbar上顯示時(shí)的title的顏色:mCollapsingToolbarLayout.setCollapsedTitleTextColor();
這個(gè)顏色的過度變化其實(shí)CollapsingToolbarLayout已經(jīng)幫我們做好,它會自動的過度,比如我們把收縮后的title顏色設(shè)為綠色。
CoordinatorLayout與CollapsingToolbarLayout:
CollapsingToolbarLayout的作用提供了一個(gè)可以折疊的Toolbar,對Toolbar進(jìn)行再次包裝的ViewGroup,繼承FragmentLayout,它需要放在AppBarLayout布局里面,并且作為AppBarLayout的直接子View。CollapsingToolbarLayout主要包括幾個(gè)功能:
①:折疊Title(Collapsing title):當(dāng)布局內(nèi)容全部顯示出來時(shí),title是最大的,但是隨著View逐步移出屏幕頂部,title變得越來越小。你可以通過CollapsingToolbarLayout調(diào)用setTitle函數(shù)來設(shè)置title。
②:內(nèi)容紗布(Content scrim):根據(jù)滾動的位置是否到達(dá)一個(gè)閥值,來決定是否對View“蓋上紗布”??梢酝ㄟ^setContentScrim(Drawable)來設(shè)置紗布的圖片.ToolBar被折疊到頂部固定時(shí)候的背景,你可以調(diào)用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。
③:狀態(tài)欄紗布(Status bar scrim):根據(jù)滾動位置是否到達(dá)一個(gè)閥值決定是否對狀態(tài)欄“蓋上紗布”,你可以通過setStatusBarScrim(Drawable)來設(shè)置紗布圖片,調(diào)用方法setStatusBarScrim(,l)設(shè)置狀態(tài)欄的背景,但是只能在LOLLIPOP設(shè)備上面有作用。這個(gè)只能在Android5.0以上系統(tǒng)有效果。
④ollapseMode :子視圖的折疊模式,在子視圖設(shè)置,有兩種,想要明確的看到效果可以給Toolbar設(shè)置一個(gè)背景顏色
(1)“pin”:固定模式,在折疊的時(shí)候最后固定在頂端;
(2)“parallax”:視差模式,在折疊的時(shí)候會有個(gè)視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來改變:
(1):將子View位置固定(Pinned position children):子View可以選擇是否在全局空間上固定位置,這對于Toolbar來說非常有用,因?yàn)楫?dāng)布局在移動時(shí),可以將Toolbar固定位置而不受移動的影響。 將app:layout_collapseMode設(shè)為pin。
(2):視差滾動子View(Parallax scrolling children):子View可以選擇在當(dāng)前的布局當(dāng)時(shí)是否以“視差”的方式來跟隨滾動。(:其實(shí)就是讓這個(gè)View的滾動的速度比其他正常滾動的View速度稍微慢一點(diǎn))。將布局參數(shù)app:layout_collapseMode設(shè)為parallax,值的范圍[0.0,1.0],值越大視察越大。
app:layout_collapseMode=”parallax”表示ImageView的折疊和CollapsingToolbarLayout的折疊不同步,那么這個(gè)不同步到底是怎樣一個(gè)不同步法呢?還有另外一個(gè)參數(shù)來設(shè)置不同步的參數(shù),如下:
app:layout_collapseParallaxMultiplier=”0.5”表示視覺乘數(shù),該數(shù)值的取值為0~1,數(shù)值越大,視覺差越大(如果這里的值為0,則在頭部折疊的過程中,ImageView的頂部在慢慢隱藏,底部不動,如果這里的值為1,ImageView的頂部不懂,底部慢慢隱藏,如果這里的取值為0~1之間,則在折疊的過程中,ImageView的頂部和底部都會隱藏,但是頭部和底部隱藏的快慢是不一樣的,具體速度和視覺乘數(shù)有關(guān))
app:layout_collapseMode這個(gè)屬性還有一個(gè)取值,是pin,該屬性表示當(dāng)折疊完成時(shí)將該控件放在頁面的頭部.
最終的代碼:
<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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#30469b"
app:expandedTitleMarginStart="48dp" app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title" app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/bg"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Java代碼
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onBackPressed();
}
});
//使用CollapsingToolbarLayout必須把title設(shè)置到CollapsingToolbarLayout上,設(shè)置到Toolbar上則不會顯示
CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");
//通過CollapsingToolbarLayout修改字體顏色
mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設(shè)置還沒收縮時(shí)狀態(tài)下字體顏色
mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設(shè)置收縮后Toolbar上字體的顏色
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android WebView打開網(wǎng)頁一片空白的解決方法
這篇文章主要介紹了Android WebView打開網(wǎng)頁一片空白的解決方法,試了很多方法,最后記錄一下,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
Android仿QQ復(fù)制昵稱效果的實(shí)現(xiàn)方法
這篇文章主要介紹了Android仿QQ復(fù)制昵稱效果的實(shí)現(xiàn)方法,主要依賴的是一個(gè)開源項(xiàng)目,需要的朋友可以參考下2019-05-05
Flutter開發(fā)之Widget自定義總結(jié)
這篇文章主要給大家介紹了關(guān)于Flutter開發(fā)中Widget自定義的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Android開發(fā)中Intent.Action各種常見的作用匯總
今天小編就為大家分享一篇關(guān)于Android開發(fā)中Intent.Action各種常見的作用匯總,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2018-12-12
詳解Android使用Gradle統(tǒng)一配置依賴管理
本篇文章主要介紹了詳解Android 使用 Gradle 統(tǒng)一配置依賴管理,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
淺談Android硬件加速原理與實(shí)現(xiàn)簡介
這篇文章主要介紹了淺談Android硬件加速原理與實(shí)現(xiàn)簡介,本文嘗試從底層硬件原理,一直到上層代碼實(shí)現(xiàn),對硬件加速技術(shù)進(jìn)行簡單介紹,感興趣的小伙伴們可以參考一下2018-07-07
Android學(xué)習(xí)小結(jié)之獲取被啟動的Activity傳回的數(shù)據(jù)
這篇文章主要介紹了獲取被啟動的Activity傳回的數(shù)據(jù),非常不錯(cuò),介紹的非常詳細(xì),需要的朋友可以參考下2016-08-08
Android獲取系統(tǒng)時(shí)間以及網(wǎng)絡(luò)時(shí)間
這篇文章主要為大家詳細(xì)介紹了Android獲取系統(tǒng)時(shí)間以及網(wǎng)絡(luò)時(shí)間的方法,感興趣的小伙伴們可以參考一下2016-07-07

