Android 5.0中CoordinatorLayout的使用技巧
CoordinatorLayout 實現(xiàn)了多種Material Design中提到的滾動效果。目前這個框架提供了幾種不用寫動畫代碼就能工作的方法，這些效果包括：
*讓浮動操作按鈕上下滑動，為Snackbar留出空間。
*擴展或者縮小Toolbar或者頭部，讓主內(nèi)容區(qū)域有更多的空間。
*控制哪個view應(yīng)該擴展還是收縮，以及其顯示大小比例，包括視差滾動效果動畫。
浮動操作按鈕與Snackbar
CoordinatorLayout可以用來配合浮動操作按鈕的 layout_anchor 和 layout_gravity屬性創(chuàng)造出浮動效果。
當(dāng)Snackbar在顯示的時候，往往出現(xiàn)在屏幕的底部。為了給Snackbar留出空間，浮動操作按鈕需要向上移動。
只要使用CoordinatorLayout作為基本布局，將自動產(chǎn)生向上移動的動畫。浮動操作按鈕有一個 默認(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浮動按鈕顯示在哪個布局區(qū)域。且設(shè)置當(dāng)前錨點的位置 app:layout_anchorGravity:意思FAB浮動按鈕在這個布局區(qū)域的具體位置。兩個屬性共同作用才是的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) {
//這里的單擊事件代表點擊消除Action后的響應(yīng)事件
Toast.makeText(MainActivity.this,"asdasd",Toast.LENGTH_SHORT).show();
}
}).show();
}
});
}
Toolbar的擴展與收縮
首先需要確保你不是使用已經(jīng)過時的ActionBar，使用ToolBar作為actionbar。同樣，這里也需要CoordinatorLayout作為主布局容器。
我們必須使用一個容器布局： 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包含了一個特殊的字符串資源@string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配，用來通知AppBarLayout 這個特殊的view何時發(fā)生了滾動事件，這個behavior需要設(shè)置在觸發(fā)事件（滾動）的view之上。注意：根據(jù)官方的谷歌文檔，AppBarLayout目前必須是第一個嵌套在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ā)生的時候被觸發(fā)：當(dāng)CoordinatorLayout發(fā)現(xiàn)RecyclerView中定義了這個屬性，它會搜索自己所包含的其他view，看看是否有view與這個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是一個非常重要的屬性，它里邊的取值主要有五種，下面我分別來解釋：
1.scroll 表示CollapsingToolbarLayout可以滾動（不設(shè)置的話頭部的ImageView將不能折疊），如果想將所有的View能滾動出屏幕，必須設(shè)置個flag，若沒有設(shè)置flag的View，則會被固定在屏幕頂部
2.enterAlways 表示底部的滾動控件只要向下滾動，頭部就顯示出來，設(shè)置這個flag時，向下的滾動都會導(dǎo)致該view變?yōu)榭梢?。?dāng)ScrollView往下滾動時，該View會直接往下滾動。而不用考慮ScrollView是否在滾動。
3.enterAlwaysCollapsed 表示當(dāng)?shù)撞繚L動控件滾動見頂時，頭部顯示出來，在ScrollView往上滑動時，首先是View把滑動事件“奪走”，由View去執(zhí)行滑動，直到滑動最小高度后，把這個滑動事件“還”回去，讓ScrollView內(nèi)部去上滑。
4.exitUntilCollapsed 表示頭部折疊到最小高度時（Toolbar的高度），就不再折疊，是enterAlways的附加選項，一般跟enterAlways一起使用，它是指，View在往下“出現(xiàn)”的時候，首先是enterAlways效果，當(dāng)View的高度達(dá)到最小高度時，View就暫時不去往下滾動，直到ScrollView滑動到頂部不再滑動時，View再繼續(xù)往下滑動，直到滑到View的頂部結(jié)束。
5.snap 表示在滑動過程中如果停止滑動，則頭部會就近折疊（要么恢復(fù)原狀，要么折疊成一個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還能讓我們做出更高級的動畫，比如在里面放一個ImageView，然后在它折疊的時候漸漸淡出。同時在用戶滾動的時候title的高度也會隨著改變。
CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar，它繼承至FrameLayout，給它設(shè)置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應(yīng)layout_behavior事件時作出相應(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è)置了一個ImageView和一個Toolbar。并把這個CollapsingToolbarLayout放到AppBarLayout中作為一個整體。
1、在CollapsingToolbarLayout中：
其中還設(shè)置了一些屬性，簡要說明一下：
contentScrim - 設(shè)置當(dāng)完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。
expandedTitleMarginStart - 設(shè)置擴張時候(還沒有收縮時)title向左填充的距離。
2、在ImageView控件中：
我們設(shè)置了：
layout_collapseMode (折疊模式) - 有兩個值:
pin - 設(shè)置為這個模式時，當(dāng)CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。
parallax - 設(shè)置為這個模式時，在內(nèi)容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現(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事件時，ImageView會有視差效果的向上滾動移除屏幕，當(dāng)開始折疊時CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變?yōu)槲覀冊O(shè)置好的背景色，Toolbar也一直會固定在最頂端。
【注】：使用CollapsingToolbarLayout時必須把title設(shè)置到CollapsingToolbarLayout上，設(shè)置到Toolbar上不會顯示。即：
mCollapsingToolbarLayout.setTitle(” “);
該變title的字體顏色：
擴張時候的title顏色：mCollapsingToolbarLayout.setExpandedTitleColor();
收縮后在Toolbar上顯示時的title的顏色：mCollapsingToolbarLayout.setCollapsedTitleTextColor();
這個顏色的過度變化其實CollapsingToolbarLayout已經(jīng)幫我們做好，它會自動的過度，比如我們把收縮后的title顏色設(shè)為綠色。
CoordinatorLayout與CollapsingToolbarLayout:
CollapsingToolbarLayout的作用提供了一個可以折疊的Toolbar,對Toolbar進(jìn)行再次包裝的ViewGroup,繼承FragmentLayout，它需要放在AppBarLayout布局里面，并且作為AppBarLayout的直接子View。CollapsingToolbarLayout主要包括幾個功能：
①:折疊Title（Collapsing title）：當(dāng)布局內(nèi)容全部顯示出來時，title是最大的，但是隨著View逐步移出屏幕頂部，title變得越來越小。你可以通過CollapsingToolbarLayout調(diào)用setTitle函數(shù)來設(shè)置title。
②:內(nèi)容紗布（Content scrim）：根據(jù)滾動的位置是否到達(dá)一個閥值，來決定是否對View“蓋上紗布”。可以通過setContentScrim(Drawable)來設(shè)置紗布的圖片.ToolBar被折疊到頂部固定時候的背景，你可以調(diào)用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。
③:狀態(tài)欄紗布（Status bar scrim)：根據(jù)滾動位置是否到達(dá)一個閥值決定是否對狀態(tài)欄“蓋上紗布”，你可以通過setStatusBarScrim(Drawable)來設(shè)置紗布圖片，調(diào)用方法setStatusBarScrim(,l)設(shè)置狀態(tài)欄的背景，但是只能在LOLLIPOP設(shè)備上面有作用。這個只能在Android5.0以上系統(tǒng)有效果。
④ollapseMode ：子視圖的折疊模式，在子視圖設(shè)置，有兩種，想要明確的看到效果可以給Toolbar設(shè)置一個背景顏色
（1）“pin”：固定模式，在折疊的時候最后固定在頂端；
（2）“parallax”：視差模式，在折疊的時候會有個視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來改變：
（1）:將子View位置固定(Pinned position children)：子View可以選擇是否在全局空間上固定位置，這對于Toolbar來說非常有用，因為當(dāng)布局在移動時，可以將Toolbar固定位置而不受移動的影響。 將app:layout_collapseMode設(shè)為pin。
（2）:視差滾動子View(Parallax scrolling children):子View可以選擇在當(dāng)前的布局當(dāng)時是否以“視差”的方式來跟隨滾動。（:其實就是讓這個View的滾動的速度比其他正常滾動的View速度稍微慢一點）。將布局參數(shù)app:layout_collapseMode設(shè)為parallax，值的范圍[0.0,1.0]，值越大視察越大。
app:layout_collapseMode=”parallax”表示ImageView的折疊和CollapsingToolbarLayout的折疊不同步，那么這個不同步到底是怎樣一個不同步法呢？還有另外一個參數(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這個屬性還有一個取值，是pin，該屬性表示當(dāng)折疊完成時將該控件放在頁面的頭部.
最終的代碼：
<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è)置還沒收縮時狀態(tài)下字體顏色
mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設(shè)置收縮后Toolbar上字體的顏色
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Notification，俗稱通知，是一種具有全局效果的通知，它展示在屏幕的頂端，首先會表現(xiàn)為一個圖標(biāo)的形式，當(dāng)用戶向下滑動的時候，展示出通知具體的內(nèi)容2016-01-01
Android學(xué)習(xí)教程之動態(tài)GridView控件使用（6）
這篇文章主要為大家詳細(xì)介紹了Android動態(tài)GridView控件的使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Android實現(xiàn)仿美團、順豐快遞數(shù)據(jù)加載效果
本片文章教給大家用Android實現(xiàn)美團和順豐快遞APP的數(shù)據(jù)加載的動畫效果，有興趣的朋友跟著學(xué)習(xí)嘗試下吧。2017-12-12
這篇文章主要為大家詳細(xì)介紹了Android自定義View仿探探卡片滑動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
Android來電監(jiān)聽和去電監(jiān)聽實現(xiàn)代碼
本文是關(guān)于來點監(jiān)聽和去電監(jiān)聽展開問題，通過實例代碼講解，對android來電監(jiān)聽和去電監(jiān)聽的相關(guān)知識感興趣的朋友一起看看吧2017-06-06
Android 中TextView的使用imageview被壓縮問題解決辦法
這篇文章主要介紹了Android 中TextView的使用imageview被壓縮問題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04
Android短信驗證碼監(jiān)聽解決onChange多次調(diào)用的方法
本篇文章主要介紹了Android短信驗證碼監(jiān)聽解決onChange多次調(diào)用的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
Android那兩個你碰不到但是很重要的類之ActivityThread
上篇文章我們聊了些Android里那些我們平時碰不到但很重要的類ViewRootImpl，這一篇我們就來看看另外那個類ActivityThread，文中有相關(guān)的代碼示例，感興趣的同學(xué)可以跟著小編一起來學(xué)習(xí)2023-05-05
Android Vitamio和ExoPlayer兩種播放器優(yōu)劣分析
Vitamio和ExoPlayer都是用于安卓平臺的視頻播放器庫，它們各有優(yōu)缺點，具體使用哪一個，需要根據(jù)你的實際需求、開發(fā)經(jīng)驗、項目規(guī)模等多個因素綜合考慮2023-04-04
這篇文章主要介紹了Android中刷新界面的二種方法,本文使用Handler、postInvalidate兩種方法實現(xiàn)界面刷新,需要的朋友可以參考下2014-10-10