本次主要實現兩個效果，抽屜效果和 主頁AppBar摺疊效果。

主頁AppBar摺疊效果的實現

實現摺疊效果，我們用到的是 Support Design Library 包下的 CoordinateLayout、AppBarLayout、CollapsingToolbarLayout佈局以及 Behaviors。

CoordinateLayout本質上是一個增強型的FramLayout,它可以使不同檢視元件之間相互作用，並協調動畫效果。CoordinateLayout是基於定義在Behaviors中的規則集的，我們可以定義CoordinateLayout內部的檢視元件是如何作用並變化的。當然也有已經定義好的Behaviors

讓我們使用，像SwipeDismissBehavior、BottomSheetBehavior等。

舉例說明：FloatingActionButton和 SnackBar,為了實現SnackBar出現時FloatingActionButton向上移動，SnackBar消失時FloatingActionButton移動回原位置，我們就要將CoordinateLayout作為父容器。

<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/design_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height
 
="match_parent"
            android:layout_gravity="end|bottom"
            android:layout_margin="20dp"
            android:onClick="show" />
</android.support.design.widget.CoordinatorLayout>

AppBarLayout是一個垂直的LinearLayout，用於處理各種應用欄滾動手勢。在很大程度上依賴於在CoordinatorLayout中用作直接子物件。 如果在不同的ViewGroup中使用AppBarLayout，它的大部分功能將不起作用。

CollapsingToolbarLayout 控制元件可以實現當螢幕滾動時收縮 ToolBar 的效果，通常直接作為AppBarLayout的子 View。

下面是主頁完整佈局main.xml

<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/design_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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.design.widget.CollapsingToolbarLayout
            android:id="@+id/ct"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="#fef9cd"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@drawable/header_bg"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="65dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            </android.support.v7.widget.Toolbar>

        </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_gravity="bottom"
            android:background="@color/lineColor_unclick"
            app:tabIndicatorColor="@color/lineColor_click"
            app:tabSelectedTextColor="@color/tick_white"
            app:tabTextColor="@color/colorAccent2" />

    </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:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="end|bottom"
        android:layout_margin="20dp"
        android:onClick="show" />
        <!-- show 方法彈出 SnackBar -->
</android.support.design.widget.CoordinatorLayout>

抽屜效果實現

抽屜效果通過DrawerLayout和NavigationView來實現

DrawerLayout是ViewGroup的子類，位於android.support.v4包中。功能就是作為視窗內容的頂級容器，允許從視窗的一個或兩個垂直邊緣拉出互動式“抽屜”檢視。抽屜的定位和佈局是通過在子檢視上使用android：layout_gravity屬性來控制的，這些屬性對應於你希望抽屜出現的檢視的哪一側：left、right（或start、end）。需要注意的是視窗的每個垂直邊緣只能有一個抽屜檢視。 如果您的佈局在視窗的每個垂直邊緣配置了多個抽屜檢視，則會在執行時引發異常。

NavigationView 專為抽屜效果而生的空間，可以直接關聯 header 和 menu

官網模板

 <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/drawer_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fitsSystemWindows="true">

     <!-- Your contents -->

     <android.support.design.widget.NavigationView
         android:id="@+id/navigation"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_gravity="start"
         app:menu="@menu/my_navigation_items" />
 </android.support.v4.widget.DrawerLayout>

根據以上內容，我們就可以直接組裝佈局檔案，將main.xml嵌入到 Activity 的佈局檔案裡，程式碼如下

<android.support.v4.widget.DrawerLayout 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/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".activity.DesignActivity">

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

    <android.support.design.widget.NavigationView
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/draw_menu"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

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

最後

抽屜效果和 AppBar 的摺疊效果就實現了，Material Design道路阻且長，加油啊！