CoordinatorLayout使用全解析

原文：https://blog.csdn.net/u012124438/article/details/56701641

CoordinatorLayout是在 Google IO/15 大會發布的，遵循Material 風格，包含在 support Library中，結合AppbarLayout, CollapsingToolbarLayout等 可 產生各種炫酷的效果

其實在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>

可以發現在官方提供的例子中，出現了許多的控件，這些控件都和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作用是

1. 提供了一個可以摺疊的Toolbar，它繼承自FrameLayout，
2. 給它設置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。
3. CollapsingToolbarLayout可以通過
   app:contentScrim設置摺疊時工具欄佈局的顏色，通過app:statusBarScrim設置摺疊時狀態欄的顏色。
   默認contentScrim是colorPrimary的色值，statusBarScrim是colorPrimaryDark的色值。
   (所以如果把2個顏色都設置爲透明，再給android.support.design.widget.AppBarLayout設置一個background的圖片，就是沉浸式狀態欄啦)
4. 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

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