CoordinatorLayout使用全解析

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。 https://blog.csdn.net/u012124438/article/details/56701641

CoordinatorLayout是在 Google IO/15 大會發布的，遵循Material 風格，包含在 support Library中，結合AppbarLayout, CollapsingToolbarLayout等 可 產生各類炫酷的效果，本篇博客就將介紹CoordinatorLayout的各類酷炫效果。

其實在Android Studio中就給咱們提供了很好的學習CoordinatorLayout的例子，咱們在建立Activity的時候，有一個Activity模板叫Scrolling Activity，咱們在建立Activity的時候選擇此模板，而後就會出現以下的效果 

相關代碼

<?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:fitsSystemWindows="true" tools:context="com.example.coordinatorlayoutdemo.ScrollingActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" 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_collapseMode="pin" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_scrolling" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/fab_margin" app:layout_anchor="@id/app_bar" app:layout_anchorGravity="bottom|end" app:srcCompat="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>

這是上面佈局引用的NestedScrollView

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView 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" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.example.coordinatorlayoutdemo.ScrollingActivity" tools:showIn="@layout/activity_scrolling"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/text_margin" android:text="@string/large_text" /> </android.support.v4.widget.NestedScrollView>

能夠發如今官方提供的例子中，出現了許多的控件，這些控件都和CoordinatorLayout配合出各類效果，接下來咱們就先簡單介紹一下這些控件。

CoordinatorLayout

又名協調者佈局，它是support.design包中的控件，因此使用的時候要導入compile ‘com.android.support:design:23.3.0’包。簡單來講，CoordinatorLayout是用來協調其子view並以觸摸影響佈局的形式產生動畫效果的一個super-powered FrameLayout，其典型的子View包括：FloatingActionButton，SnackBar。注意：CoordinatorLayout是一個頂級父View。

AppBarLayout

AppBarLayout是LinearLayout的子類，必須在它的子view上設置app:layout_scrollFlags屬性或者是在代碼中調用setScrollFlags()設置這個屬性。

AppBarLayout的子佈局有5種滾動標識(上面代碼CollapsingToolbarLayout中配置的app:layout_scrollFlags屬性)：

scroll：全部想滾動出屏幕的view都須要設置這個flag， 沒有設置這個flag的view將被固定在屏幕頂部。 
enterAlways：這個flag讓任意向下的滾動都會致使該view變爲可見，啓用快速「返回模式」。 
enterAlwaysCollapsed：假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那麼view將在到達這個最小高度的時候開始顯示，而且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。 
exitUntilCollapsed：當你定義了一個minHeight，此佈局將在滾動到達這個最小高度的時候摺疊。 
snap：當一個滾動事件結束，若是視圖是部分可見的，那麼它將被滾動到收縮或展開。例如，若是視圖只有底部25%顯示，它將摺疊。相反，若是它的底部75%可見，那麼它將徹底展開。

CollapsingToolbarLayout

CollapsingToolbarLayout做用是提供了一個能夠摺疊的Toolbar，它繼承自FrameLayout，給它設置layout_scrollFlags，它能夠控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應layout_behavior事件時做出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。CollapsingToolbarLayout能夠經過app:contentScrim設置摺疊時工具欄佈局的顏色，經過app:statusBarScrim設置摺疊時狀態欄的顏色。默認contentScrim是colorPrimary的色值，statusBarScrim是colorPrimaryDark的色值。

CollapsingToolbarLayout的子佈局有3種摺疊模式（Toolbar中設置的app:layout_collapseMode）

off：默認屬性，佈局將正常顯示，無摺疊行爲。 
pin：CollapsingToolbarLayout摺疊後，此佈局將固定在頂部。 
parallax：CollapsingToolbarLayout摺疊時，此佈局也會有視差摺疊效果。 
當CollapsingToolbarLayout的子佈局設置了parallax模式時，咱們還能夠經過app:layout_collapseParallaxMultiplier設置視差滾動因子，值爲：0~1。

NestedScrollView

在新版的support-v4兼容包裏面有一個NestedScrollView控件，這個控件其實和普通的ScrollView並無多大的區別，這個控件實際上是Meterial Design中設計的一個控件，目的是跟MD中的其餘控件兼容。應該說在MD中，RecyclerView代替了ListView，而NestedScrollView代替了ScrollView，他們兩個均可以用來跟ToolBar交互，實現上拉下滑中ToolBar的變化。在NestedScrollView的名字中其實就能夠看出他的做用了，Nested是嵌套的意思，而ToolBar基本須要嵌套使用。

FloatingActionButton

FloatingActionButton就是一個漂亮的按鈕，其本質是一個ImageVeiw。有一點要注意，Meterial Design引入了Z軸的概念，就是全部的view都有了高度，他們一層一層貼在手機屏幕上，而FloatingActionButton的Z軸高度最高，它貼在全部view的最上面，沒有view能覆蓋它。

Behavior

Behavior只有是CoordinatorLayout的直接子View纔有意義。只要將Behavior綁定到CoordinatorLayout的直接子元素上，就能對觸摸事件（touch events）、window insets、measurement、layout以及嵌套滾動（nested scrolling）等動做進行攔截。Design Library的大多功能都是藉助Behavior的大量運用來實現的。固然，Behavior沒法獨立完成工做，必須與實際調用的CoordinatorLayout子視圖相綁定。具體有三種方式：經過代碼綁定、在XML中綁定或者經過註釋實現自動綁定。上面NestedScrollView中app:layout_behavior=」@string/appbar_scrolling_view_behavior」的Behavior是系統默認的，咱們也能夠根據本身的需求來自定義Behavior。

CoordinatorLayout各類特效

接下來是介紹CoordinatorLayout經常使用的一些效果

CoordinatorLayout實現浮動操做按鈕效果

效果以下： 
 
只要使用CoordinatorLayout做爲基本佈局，將自動產生向上移動的動畫。浮動操做按鈕有一個 默認的 behavior來檢測Snackbar的添加並讓按鈕在Snackbar之上呈現上移與Snackbar等高的動畫。

<android.support.design.widget.CoordinatorLayout android:id="@+id/main_content" 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:layout_height="match_parent"> </android.support.v7.widget.RecyclerView> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="16dp" android:src="@mipmap/ic_launcher" app:layout_anchor="@id/rvToDoList" app:layout_anchorGravity="bottom|right|end"/> </android.support.design.widget.CoordinatorLayout>

Toolbar的擴展與收縮效果 

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" 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.CoordinatorLayout>

響應滾動事件 

首先，須要讓Toolbar包裹在AppBarLayout中

<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與滾動視圖之間的聯繫。在RecyclerView或者任意支持嵌套滾動的view好比NestedScrollView上添加app:layout_behavior。support library包含了一個特殊的字符串資源@string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配，用來通知AppBarLayout 這個特殊的view什麼時候發生了滾動事件，這個behavior須要設置在觸發事件（滾動）的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">

當CoordinatorLayout發現RecyclerView中定義了這個屬性，它會搜索本身所包含的其餘view，看看是否有view與這個behavior相關聯。AppBarLayout.ScrollingViewBehavior描述了RecyclerView與AppBarLayout之間的依賴關係。RecyclerView的任意滾動事件都將觸發AppBarLayout或者AppBarLayout裏面view的改變。

AppBarLayout裏面定義的view只要設置了app:layout_scrollFlags屬性，就能夠在RecyclerView滾動事件發生的時候被觸發：

<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屬性裏面必須至少啓用scroll這個flag，這樣這個view纔會滾動出屏幕，不然它將一直固定在頂部。可使用的其餘flag有：

enterAlways: 一旦向上滾動這個view就可見。 
enterAlwaysCollapsed: 顧名思義，這個flag定義的是什麼時候進入（已經消失以後什麼時候再次顯示）。假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那麼view將在到達這個最小高度的時候開始顯示，而且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。 
exitUntilCollapsed: 一樣顧名思義，這個flag時定義什麼時候退出，當你定義了一個minHeight，這個view將在滾動到達這個最小高度的時候消失。 
記住，要把帶有scroll flag的view放在前面，這樣收回的view才能讓正常退出，而固定的view繼續留在頂部。

摺疊效果 
 
若是想製造toolbar的摺疊效果，咱們必須把Toolbar放在CollapsingToolbarLayout中：

<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>

一般，咱們咱們都是設置Toolbar的title，而如今，咱們須要把title設置在CollapsingToolBarLayout上，而不是Toolbar。

CollapsingToolbarLayout collapsingToolbar =
              (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbar.setTitle("Title");

視差效果

爲了製造出這種效果，咱們添加一個定義了app:layout_collapseMode=」parallax」 屬性的ImageView。

<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> <ImageView android:src="@drawable/cheese_1" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" app:layout_collapseMode="parallax" android:minHeight="100dp"/> </android.support.design.widget.CollapsingToolbarLayout>

結合ViewPager

<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:background="@android:color/background_light" android:fitsSystemWindows="true" > <android.support.design.widget.AppBarLayout android:id="@+id/main.appbar" android:layout_width="match_parent" android:layout_height="300dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/main.collapsing" android:layout_width="match_parent" android:layout_height="250dp" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed" > <ImageView android:id="@+id/main.backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="@drawable/tangyan" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="?attr/colorPrimary" app:tabIndicatorColor="@color/colorAccent" app:tabIndicatorHeight="4dp" app:tabSelectedTextColor="#000" app:tabTextColor="#fff"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v4.view.ViewPager> <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="15dp" android:src="@drawable/add_2"/> </android.support.design.widget.CoordinatorLayout>