在上篇文章中汪诉，和大家一起聊了聊AppBarLayout和CoordinatorLayout兩個(gè)新控件诅岩，以及CoordinatorLayout與FloatingActionButton歧斟、Snackbar的使用注意事項(xiàng)。至此，Android Material Design系列的學(xué)習(xí)已進(jìn)行到第五篇千诬，大家可以點(diǎn)擊以下鏈接查看之前的文章：

• Android TabLayout 分分鐘打造一個(gè)滑動(dòng)標(biāo)簽頁
• Android 一文告訴你到底是用Dialog，Snackbar膏斤，還是Toast
• Android FloatingActionButton 重要的操作不要太多徐绑，一個(gè)就好
• Android 初識(shí)AppBarLayout 和 CoordinatorLayout

本文繼續(xù)以案例的形式學(xué)習(xí)CoordinatorLayout的使用，配合者為AppBarLayout莫辨。文中會(huì)介紹一些這種搭配使用的案例下可能出現(xiàn)的問題以及解決方案傲茄，目的還是一句話毅访，將我所知的分享出來，讓正在摸索的你少走一些彎路盘榨。老路子喻粹，先看一下本文要實(shí)現(xiàn)的效果圖：

Samples.gif

簡(jiǎn)單介紹下，這種設(shè)計(jì)經(jīng)常會(huì)出現(xiàn)在各個(gè)app中草巡，作為主頁顯示守呜，其中主要包含了三個(gè)效果：

• 側(cè)拉導(dǎo)航菜單，這個(gè)是用v7包中的控件DrawerLayout實(shí)現(xiàn)的山憨，不是本文重點(diǎn)查乒，就不作過多說明了；

• FAB與Snackbar的協(xié)調(diào)交互郁竟，在上篇文章中已經(jīng)介紹的很詳細(xì)了玛迄，大家可以另行查看；

• 列表向上滑動(dòng)枪孩，Toolbar向上隱藏憔晒，TabLayout固定于頂部，給內(nèi)容區(qū)域留下更多的展示空間蔑舞，本文著重講述這種實(shí)現(xiàn)拒担。

知識(shí)點(diǎn)比較零碎，還是配合著代碼講解比較容易攻询，思路也會(huì)比較清晰一些从撼，主要布局文件的實(shí)現(xiàn)：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/dl_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <include layout="@layout/include_toolbar" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tl_indicator"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

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

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/dp_16"
            android:onClick="onClickFab"
            android:src="@mipmap/ic_toolbar_add"
            app:backgroundTint="@color/fab_ripple"
            app:layout_anchor="@id/vp_content"
            app:layout_anchorGravity="bottom|right|end" />

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

    <LinearLayout
        android:id="@+id/ll_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:orientation="vertical"
        android:gravity="center"
        android:background="@color/white">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Menu Content"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_16"/>

    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

Android Developer官網(wǎng)中在介紹CoordinatorLayout時(shí)有這么一段話：

CoordinatorLayout is intended for two primary use cases:

1. As a top-level application decor or chrome layout
2. As a container for a specific interaction with one or more child views

也就是說CoordinatorLayout主要有兩種使用場(chǎng)景，在我理解過來就是钧栖，作為Activity布局中的最外層容器和作為指定交互行為的多個(gè)子控件的父容器來使用低零。而本文中的案例就屬于第二種。

要實(shí)現(xiàn)這種滑動(dòng)交互效果拯杠，必須要滿足這么幾點(diǎn)：

1. CoordinatorLayout作為容器布局掏婶，來協(xié)調(diào)children view之間的交互行為；

2. 使用AppBarLayout并設(shè)置其內(nèi)部需要移出屏幕的View的scrollFlags屬性潭陪，在這個(gè)例子中也就是給Toolbar設(shè)置雄妥。由于Toolbar是通用布局代碼，這里我用了include標(biāo)簽依溯，其包含的布局代碼為：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tb_toolbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_56"
    app:titleTextColor="@color/white"
    app:title="@string/app_name"
    app:theme="@style/OverFlowMenuTheme"
    app:popupTheme="@style/AppTheme"
    android:background="@color/blue"
    app:layout_scrollFlags="scroll|enterAlways"/>

可以看到老厌，我添加了app:layout_scrollFlags這個(gè)屬性，并將其值設(shè)為scroll|enterAlways黎炉，scroll表示滑動(dòng)型控件向上滑動(dòng)時(shí)toolbar將移出屏幕枝秤，enterAlways表示向下滑動(dòng)時(shí)toolbar將重新進(jìn)入屏幕。由于TabLayout不需要移出屏幕慷嗜，所以這里就不需要給它設(shè)置這個(gè)屬性了淀弹。需要注意的是：不要將app:layout_scrollFlags屬性單獨(dú)設(shè)置子include標(biāo)簽里丹壕，而是要放在include所加載的layout布局中，否則這個(gè)scrollFlags將失去作用垦页，這與include標(biāo)簽的使用有關(guān)雀费。

3. 一個(gè)特殊的滑動(dòng)型控件并設(shè)置layout_behavior屬性，這里用的是ViewPager痊焊。注意盏袄，layout_behavior的屬性值用的是系統(tǒng)定義好的固定字符串@string/appbar_scrolling_view_behavior，大家感興趣的自己去翻閱源碼看看薄啥，后續(xù)介紹behavior時(shí)辕羽，我再仔細(xì)講解。

對(duì)于第三點(diǎn)垄惧，這里拿出來單獨(dú)強(qiáng)調(diào)一下刁愿，有沒有發(fā)現(xiàn)滑動(dòng)型控件前我用了“特殊”兩個(gè)字來修飾！CoordinatorLayout之所以能夠協(xié)調(diào)Children View之間的交互行為到逊，主要就是依賴于NestedScrolling這個(gè)東西铣口，這里涉及到兩個(gè)接口類NestedScrollingParent和NestedScrollingChild。CoordinatorLayout實(shí)現(xiàn)了前者觉壶，而CoordinatorLayout的Children核心之一脑题，滑動(dòng)型控件，實(shí)現(xiàn)了后者铜靶，所以才能夠做出這個(gè)交互行為叔遂。關(guān)于NestedScrolling，后續(xù)再寫文單獨(dú)介紹争剿。所以已艰，這個(gè)特殊的滑動(dòng)型控件必須是實(shí)現(xiàn)了NestedScrollingChild接口的控件，比如v7包中的RecyclerView蚕苇，看一下它的定義就知道了：

public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild

故哩掺，本文中的ViewPager里面的列表控件必須是RecyclerView。如果你僅僅是簡(jiǎn)單地使用ListView涩笤，還是達(dá)不到這樣的效果疮丛。聰明如你，肯定又看出了我的措辭辆它，對(duì)的，我又用了一個(gè)詞：“簡(jiǎn)單地使用”履恩，那就說明其實(shí)稍作處理锰茉，復(fù)雜點(diǎn)使用，也能夠使用ListView的切心。

在API Level 21及更高版本飒筑，為了支持NestedScrolling片吊，所有控件的基類View對(duì)外新增了一個(gè)方法setNestedScrollingEnabled(boolean enabled)，所以协屡，我們可以對(duì)ListView稍作處理俏脊，就能在Android L及以上版本的系統(tǒng)中使用了：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
      listView.setNestedScrollingEnabled(true);
}

或者借助 v4 包中的 ViewCompat 類為 ListView 添加設(shè)置，避免版本判斷：

ViewCompat.setNestedScrollingEnabled(listView, true);

但是肤晓，這兩種方法均只支持 Android Lollipop 及更高版本爷贫，在 pre-lollipop 上是沒有效果的。其實(shí)补憾，ListView真的已經(jīng)過氣了漫萄，我們應(yīng)該全方位掌握RecyclerView的使用，就像Android Studio取代Eclipse一樣盈匾。

其他的代碼就很簡(jiǎn)單了腾务，就是給DrawerLayout設(shè)置ActionBarDrawerToggle，就是圖中ToolBar左側(cè)的菜單按鈕削饵。然后用Fragment填充ViewPager岩瘦，這里就不貼代碼了，工程Demo都在GitHub上窿撬，大家可以自己下載參考启昧。

其實(shí)這個(gè)案例的實(shí)現(xiàn)還是蠻簡(jiǎn)單的，文中零零碎碎地講述了很多使用過程中的細(xì)節(jié)技巧尤仍，幫助大家解決實(shí)際問題箫津。下篇文章繼續(xù)使用案例，介紹CoordinatorLayout的使用方法宰啦，同時(shí)引入另一個(gè)控件的使用苏遥，歡迎關(guān)注！

示例源碼

我在GitHub上建立了一個(gè)Repository赡模，用來存放整個(gè)Android Material Design系列控件的學(xué)習(xí)案例田炭，會(huì)伴隨著文章逐漸更新完善，歡迎大家補(bǔ)充交流漓柑，Star地址：

https://github.com/Mike-bel/MDStudySamples