DrawerLayout+CoordinateLayout+CollapsingToolbarLayout 实现AppBar折叠+抽屉效果

本次主要实现两个效果，抽屉效果和 主页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道路阻且长，加油啊！