轉(zhuǎn)載

https://blog.csdn.net/gyyak46/article/details/53103796

一咙鞍、寫在前面

其實博主在之前已經(jīng)對design包的各個控件都做了博文說明，無奈個人覺得理解不夠深入趾徽，所以有了這篇更加深入的介紹续滋，希望各位看官拍磚~

二、從是什么開始

1孵奶、首先我們得知道CoordinatorLayout是什么玩意兒疲酌，到底有什么用，我們不妨看看官方文檔的描述：

  CoordinatorLayout是一個“加強版”FrameLayout了袁，它主要有兩個用途：

1朗恳、用作應用的頂層布局管理器，也就是作為用戶界面中所有UI控件的容器

2早像、用作相互之間具有特定交互行為的UI控件的容器

通過為CoordinatorLayout的子View指定Behavior僻肖，就可以實現(xiàn)它們之間的交互行為。 Behavior可以用來實現(xiàn)一系列的交互行為和布局變化卢鹦，比如說側(cè)滑菜單臀脏、可滑動刪除的UI元素，以及跟隨著其他UI控件移動的按鈕等冀自。

2揉稚、交互行為

先看個簡單的效果圖

圖片.png

可能大家看到這，就自然能想到觀察者模式熬粗，或者我昨日寫的Rx模式：知識必備】RxJava+Retrofit最佳結(jié)合體驗搀玖，打造懶人封裝框架~

我們的Button就是一個被觀察者，TextView作為一個觀察者驻呐，當Button移動的時候通知TextView灌诅，TextView就跟著移動芳来。看看其布局：

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/activity_coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.nanchen.coordinatorlayoutdemo.CoordinatorActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="觀察者"
        app:layout_behavior=".FollowBehavior"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被觀察者"
        android:layout_gravity="center"
        android:id="@+id/btn"/>

</android.support.design.widget.CoordinatorLayout>

很簡單猜拾，一個TextView即舌，一個Button，外層用CoordinatorLayout挎袜，然后給我們的TextView加一個自定義的Behavior文件顽聂，內(nèi)容如下：

package com.nanchen.coordinatorlayoutdemo;

import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

/**
 *
 * 自定義CoordinatorLayout的Behavior，泛型為觀察者View(要跟著別人動的那個)
 *
 * 必須重寫兩個方法盯仪，layoutDependOn和onDependentViewChanged
 *
 * @author nanchen
 * @fileName CoordinatorLayoutDemo
 * @packageName com.nanchen.coordinatorlayoutdemo
 * @date 2016/12/13  10:13
 */

public class FollowBehavior extends CoordinatorLayout.Behavior<TextView>{

    /**
     * 構(gòu)造方法
     */
    public FollowBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 判斷child的布局是否依賴dependency
     *
     * 根據(jù)邏輯來判斷返回值紊搪，返回false表示不依賴，返回true表示依賴
     *
     * 在一個交互行為中全景，dependent view的變化決定了另一個相關View的行為耀石。
     * 在這個例子中，Button就是dependent view蚪燕，因為TextView跟隨著它娶牌。
     * 實際上dependent view就相當于我們前面介紹的被觀察者
     *
     */
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) {
        return dependency instanceof Button;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) {
        child.setX(dependency.getX());
        child.setY(dependency.getY() + 100);
        return true;
    }
}

重點看看其中重寫的兩個方法layoutDependsOn()和onDependentViewChanged()。在介紹這兩個方法的作用前馆纳，我們先來介紹一下dependent view诗良。在一個交互行為中，dependent view的變化決定了另一個相關View的行為鲁驶。在這個例子中鉴裹，Button就是dependent view，因為TextView跟隨著它钥弯。實際上dependent view就相當于我們前面介紹的被觀察者径荔。知道了這個概念，讓我們看看重寫的兩個方法的作用：

• layoutDependsOn()：這個方法在對界面進行布局時至少會調(diào)用一次脆霎，用來確定本次交互行為中的dependent view总处，在上面的代碼中，當dependency是Button類的實例時返回true睛蛛，就可以讓系統(tǒng)知道布局文件中的Button就是本次交互行為中的dependent view鹦马。

• onDependentViewChanged()：當dependent view發(fā)生變化時，這個方法會被調(diào)用忆肾，參數(shù)中的child相當于本次交互行為中的觀察者荸频，觀察者可以在這個方法中對被觀察者的變化做出響應，從而完成一次交互行為客冈。

所以我們現(xiàn)在可以開始寫Activity中的代碼：

findViewById(R.id.btn).setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if (motionEvent.getAction() == MotionEvent.ACTION_MOVE){
                    view.setX(motionEvent.getRawX()-view.getWidth()/2);
                    view.setY(motionEvent.getRawY()-view.getHeight()/2);
                }
                return true;
            }
        });

這樣一來旭从，我們就完成了為TextView和Button設置跟隨移動這個交互行為。很簡單有木有，其實為CoordinatorLayout的子View設置交互行為只需三步：

• 自定義一個繼承自Behavior類的交互行為類和悦；
• 把觀察者的layout_behavior屬性設置為自定義行為類的類名退疫；
• 重寫B(tài)ehavior類的相關方法來實現(xiàn)我們想要的交互行為.

值得注意的是，有些時候鸽素，并不需要我們自己來定義一個Behavior類蹄咖，因為系統(tǒng)為我們預定義了不少Behavior類。在接下來的篇章中付鹿，我們會做出進一步的介紹。

3蚜迅、更進一步

現(xiàn)在我們已經(jīng)知道了怎么通過給CoordinatorLayout的子View設置Behavior來實現(xiàn)交互行為《尕遥現(xiàn)在，讓我們更進一步地挖掘下CoordinatorLayout谁不，深入了解一下隱藏在表象背后的神秘細節(jié)坐梯。

實際上，CoordinatorLayout本身并沒有做過多工作刹帕，實現(xiàn)交互行為的主要幕后推手是CoordinatorLayout的內(nèi)部類——Behavior吵血。通過為CoordinatorLayout的直接子View綁定一個Behavior，這個Behavior就會攔截發(fā)生在這個View上的Touch事件偷溺、嵌套滾動等蹋辅。不僅如此，Behavior還能攔截對與它綁定的View的測量及布局挫掏。關于嵌套滾動侦另，我們會在后續(xù)文章中進行詳細介紹。下面我們來深入了解一下Behavior是如何做到這一切的尉共。

4褒傅、深入理解Behavior

a) 攔截Touch事件

當我們?yōu)橐粋€CoordinatorLayout的直接子View設置了Behavior時，這個Behavior就能攔截發(fā)生在這個View上的Touch事件袄友，那么它是如何做到的呢殿托？實際上，CoordinatorLayout重寫了onInterceptTouchEvent()方法剧蚣，并在其中給Behavior開了個后門支竹，讓它能夠先于View本身處理Touch事件。具體來說券敌，CoordinatorLayout的onInterceptTouchEvent()方法中會遍歷所有直接子View唾戚，對于綁定了Behavior的直接子View調(diào)用Behavior的onInterceptTouchEvent()方法，若這個方法返回true待诅，那么后續(xù)本該由相應子View處理的Touch事件都會交由Behavior處理叹坦，而View本身表示懵逼，完全不知道發(fā)生了什么卑雁。

b）攔截測量及布局

了解了Behavior是怎養(yǎng)攔截Touch事件的募书，想必大家已經(jīng)猜出來了它攔截測量及布局事件的方式——CoordinatorLayout重寫了測量及布局相關的方法并為Behavior開了個后門绪囱。沒錯，真相就是如此莹捡。

CoordinatorLayout在onMeasure()方法中鬼吵，會遍歷所有直接子View，若該子View綁定了一個Behavior篮赢，就會調(diào)用相應Behavior的onMeasureChild()方法齿椅，若此方法返回true，那么CoordinatorLayout對該子View的測量就不會進行启泣。這樣一來涣脚，Behavior就成功接管了對View的測量。

同樣寥茫，CoordinatorLayout在onLayout()方法中也做了與onMeasure()方法中相似的事遣蚀，讓Behavior能夠接管對相關子View的布局。

c) view的依賴關系的確定

現(xiàn)在纱耻，我們在探究一下交互行為中的兩個View之間的依賴關系是怎么確定的芭梯。我們稱child為交互行為中根據(jù)另一個View的變化做出響應的那個個體，而dependent view為child所依賴的View弄喘。實際上玖喘，確立child和dependent view的依賴關系有兩種方式：

• 顯式依賴：為child綁定一個Behavior，并在Behavior類的layoutDependsOn()方法中做手腳限次。即當傳入的dependency為dependent view時返回true芒涡，這樣就建立了child和dependent view之間的依賴關系。

• 隱式依賴：通過我們最開始提到的錨（anchor）來確立卖漫。具體做法可以這樣：在XML布局文件中费尽，把child的layout_anchor屬性設為dependent view的id，然后child的layout_anchorGravity屬性用來描述為它想對dependent view的變化做出什么樣的響應羊始。關于這個我們會在后續(xù)篇章給出具體示例旱幼。

  無論是隱式依賴還是顯式依賴，在dependent view發(fā)生變化時突委，相應Behavior類的onDependentViewChanged()方法都會被調(diào)用柏卤，在這個方法中，我們可以讓child做出改變以響應dependent view的變化匀油。

三缘缚、玩轉(zhuǎn)AppBarLayout

實際上我們在應用中有CoordinatorLayout的地方通常都會有AppBarLayout的聯(lián)用，作為同樣的出自Design包的庫敌蚜，我們看看官方文檔怎么說：
AppBarLayout是一個垂直的LinearLayout桥滨，實現(xiàn)了Material Design中app bar的scrolling gestures特性。AppBarLayout的子View應該聲明想要具有的“滾動行為”，這可以通過layout_scrollFlags屬性或是setScrollFlags()方法來指定齐媒。
　　AppBarLayout只有作為CoordinatorLayout的直接子View時才能正常工作蒲每，
　　為了讓AppBarLayout能夠知道何時滾動其子View，我們還應該在CoordinatorLayout布局中提供一個可滾動View喻括，我們稱之為scrolling view邀杏。scrolling view和AppBarLayout之間的關聯(lián)，通過將scrolling view的Behavior設為AppBarLayout.ScrollingViewBehavior來建立.

1唬血、一般怎么用望蜡？

AppBar是Design的一個概念，其實我們也可以把它看做一種5.0出的ToolBar拷恨，先感受一下AppBarLayout+CoordinatorLayout的魅力泣特。

圖片.png

　　實際效果就是這樣，當向上滑動View的時候挑随，ToolBar會小時，向下滑動的時候勒叠，ToolBar又會出現(xiàn)兜挨，但別忘了，這是AppBarLayout的功能眯分，ToolBar可辦不到拌汇。由于要滑動，那么我們的AppBarLayout一定是和可以滑動的View一起使用的弊决，比如RecyclerView噪舀，ScollView等。

我們看看上面的到底怎么實現(xiàn)的：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_coor_app_bar"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.nanchen.coordinatorlayoutdemo.CoorAppBarActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

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

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycler"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

我們可以看到飘诗，上面出現(xiàn)了一個app:layouy_scrollFrags的自定義屬性設置与倡，這個屬性可以定義我們不同的滾動行為。

2昆稿、layout_scrollFlags

根據(jù)官方文檔纺座，layout_scrollFlags的取值可以為以下幾種。
a) scroll
設成這個值的效果就好比本View和scrolling view是“一體”的溉潭。具體示例我們在上面已經(jīng)給出净响。有一點特別需要我們的注意，為了其他的滾動行為生效喳瓣，必須同時指定scroll和相應的標記馋贤，比如我們想要exitUntilCollapsed所表現(xiàn)的滾動行為，必須將layout_scrollFlags指定為“scroll|exitUntilCollapsed”畏陕。
b) exitUntilCollapsed
當scrolling view向下滾動時配乓，本View會一起跟著向下滾動。實際上就好比我們同時對scrolling view和本View進行向下滾動。
c)enterAlways
當scrolling view向下滾動時扰付，本View會一起跟著向下滾動堤撵。實際上就好比我們同時對scrolling view和本View進行向下滾動。
d）enterAlwaysCollapsed
從名字上就可以看出羽莺，這是在enterAlways的基礎上实昨，加上了“折疊”的效果。當我們開始向下滾動scrolling view時盐固，本View會一起跟著滾動直到達到其“折疊高度”（即最小高度）荒给。然后當scrolling view滾動至頂部內(nèi)容完全顯示后，再向下滾動scrolling view刁卜，本View會繼續(xù)滾動到完全顯示出來志电。　
e)snap
在一次滾動結(jié)束時蛔趴，本View很可能只處于“部分顯示”的狀態(tài)挑辆，加上這個標記能夠達到“要么完全隱藏，要么完全顯示”的效果孝情。

四鱼蝉、CollapsingToolBarLayout

這個東西，我相信很多博客和技術(shù)文章都會把CollapsingToolBarLayout和CoordinatorLayout放一起講箫荡，這個東西的確很牛魁亦。我們同樣先看看官方文檔介紹：
　　CollapsingToolbarLayout通常用來在布局中包裹一個Toolbar，以實現(xiàn)具有“折疊效果“”的頂部欄羔挡。它需要是AppBarLayout的直接子View洁奈，這樣才能發(fā)揮出效果。CollapsingToolbarLayout包含以下特性：

1绞灼、Collasping title（可折疊標題）：當布局完全可見時利术，這個標題比較大；當折疊起來時低矮，標題也會變小氯哮。標題的外觀可以通過expandedTextAppearance和collapsedTextAppearance屬性來調(diào)整。

2商佛、Content scrim（內(nèi)容紗布）：根據(jù)CollapsingToolbarLayout是否滾動到一個臨界點喉钢，內(nèi)容紗布會顯示或隱藏×寄罚可以通過setContentScrim(Drawable)來設置內(nèi)容紗布肠虽。

3、Status bar scrim（狀態(tài)欄紗布）：也是根據(jù)是否滾動到臨界點玛追，來決定是否顯示税课∠醒樱可以通過setStatusBarScrim(Drawable)方法來設置。這個特性只有在Android5.0及其以上版本韩玩，我們設置fitSystemWindows為ture時才能生效垒玲。

4、Parallax scrolling children（視差滾動子View）：子View可以選擇以“視差”的方式來進行滾動找颓。（視覺效果上就是子View滾動的比其他View稍微慢些）

5合愈、Pinned position children：子View可以選擇固定在某一位置上。

上面的描述有些抽象击狮，實際上對于Content scrim佛析、Status bar scrim我們可以暫時予以忽略，只要留個大概印象待以后需要時再查閱相關資料即可彪蓬。下面我們通過一個常見的例子介紹下CollapsingToolbarLayout的基本使用姿勢寸莫。

我們來看看一個常用的效果：

圖片.png

<?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:id="@+id/activity_coor_tool_bar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.nanchen.coordinatorlayoutdemo.CoorToolBarActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginStart="100dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:statusBarScrim="@android:color/transparent"
            app:titleEnabled="false">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/logo"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.6"/>

            <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"
                app:title=""/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycler"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="-100dp"
        android:alpha="0"
        android:elevation="10dp"
        android:gravity="center_vertical"
        android:text="愛吖校推-你關注的，我們才推"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_behavior=".SimpleViewBehavior"
        app:svb_dependOn="@id/appbar"
        app:svb_dependType="y"
        app:svb_targetAlpha="1"
        app:svb_targetY="0dp"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@mipmap/ic_start"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right"/>

</android.support.design.widget.CoordinatorLayout>

我們在xml文件中為CollapsingToolBarLayout的layout_scrollFlags指定為“scroll|exitUntilCollapsed|snap”档冬，這樣便實現(xiàn)了向上滾動的折疊效果膘茎。

CollapsingToolbarLayout本質(zhì)上同樣是一個FrameLayout，我們在布局文件中指定了一個ImageView和一個Toolbar酷誓。ImageView的layout_collapseMode屬性設為了parallax辽狈，也就是我們前面介紹的視差滾動；而Toolbar的layout_collaspeMode設為了pin呛牲，也就是Toolbar會始終固定在頂部。

五驮配、寫在最后

本次的design包下的CoordinatorLayout和AppBarLayout就講述到這里娘扩，后續(xù)還將持續(xù)更新，歡迎拍磚~

查看源碼請移步Github