Android CoordinatorLayout的使用——实现Toolbar的隐藏和折叠

简单介绍下CoordinatorLayout

CoordinatorLayout
public class CoordinatorLayout
extends ViewGroup implements NestedScrollingParent2
java.lang.Object
  ↳ android.view.View
    ↳ android.view.ViewGroup
     ↳ android.support.design.widget.CoordinatorLayout

CoordinatorLayout 是一个“super-powered FrameLayout”，主要用于两个方面
1. 作为最顶层的控件
2. 作为一个父控件于一个或者多个子控件进行交互

CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout通过设置子View的 Behaviors来调度子View。系统（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior 等。

---

这篇文章主要讲述ToolBar 的隐藏和折叠

一.配合AppBarLayout 控件，实现隐藏

AppBarLayout
public class AppBarLayout
extends LinearLayout
java.lang.Object
   ↳ android.view.View
   ↳ android.view.ViewGroup
     ↳ android.widget.LinearLayout
      ↳ android.support.design.widget.AppBarLayout

AppBarLayout 继承LinearLayout,子控件默认时竖直方向显示。它支持滑动手势,它的子控件可以通过在代码中调用setScrollFlags(int)或者在XML里app:layout_scrollFlags来设置它的滑动手势,但是前提是根布局是CoordinatorLayout。

下面介绍下scrollFlags 的5种参数：

• scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部
• enterAlways: 每次向下的滚动都会导致该view变为可见，启用快速“返回模式”
• snap:当下拉不到一定高度时，Toolbar回弹回去，如果上滑不到一定高度，Toolbar不会收缩。但是上滑时会全隐藏Toolbar
• enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度
• exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端，向下滑时要等item是第一个时才能滑出Toolbar。

OK,下面看一下 app:layout_scrollFlags="scroll|enterAlways" 这样设置的效果
布局文件如下：

<?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"
    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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

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

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

这里还要注意一个地方 ：RecyclerView 的layout_behavior 属性，其实@string/appbar_scrolling_view_behavior 对应着的AppBarLayout.ScrollingViewBehavior,正是这个Behavior 实现了组件及之间的滑动交互，控制着Toolbar 的隐藏，所以这个参数是绝对不能忽略的。

AppBarLayout的子控件不仅仅可以设置为Toolbar，也可以包含其他的View，比如说包裹一个 TabLayout。

代码及效果如下：

<?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"
    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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <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.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed">

        </android.support.design.widget.TabLayout>
    </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.CoordinatorLayout>

二、配合CollapsingToolbarLayout，实现ToolBar的折叠

CollapsingToolbarLayout
public class CollapsingToolbarLayout
extends FrameLayout
java.lang.Object
  ↳ android.view.View
   ↳ android.view.ViewGroup
      ↳ android.widget.FrameLayout
       ↳android.support.design.widget.CollapsingToolbarLayout

CollapsingToolbarLayout：顾名思义就是可折叠的toolbar布局,继承FrameLayout。CollapsingToolbarLayout 设置 layout_scrpllFlag 属性,可以控制包含在CollapsingToolbarLayout 中的控件。

下面介绍下CollapsingToolBarLayout 的属性

• app:title=”” ToolBar 的标题，当ToolBar 和 CollapsingToolBarLayout 同时设置了title后，以CollapsingToolBarLayout 的为准。
• app:contentScrim=”?attr/colorPrimary” 当CollapsingToolBarLayout 被折叠后在最顶部显示的颜色。
• app:expandedTitleGravity=”left|bottom” 当CollapsingToolBarLayout 完全展开后，title 所在的位置，默认的显示在左下角 left+bottom
• app:collapsedTitleGravity=”left” 当CollapsingToolBarLayout 被折叠后title在顶部显示的位置，默认的显示在左边 。
• app:layout_collapseMode=”pin” 注意:这是子视图的属性 表示子视图的折叠模式，有两个参数 1.”pin” 固定模式，在折叠的时候固定在顶端 2. “parallax” 视差模式,在折叠的过程中会有个视差折叠的效果。

好了，我们来看下使用CollapsingToolBarLayout 的效果

布局文件如下：

<?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"
    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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            app:collapsedTitleGravity="left"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="left|bottom"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="?attr/colorPrimary"
                android:scaleType="fitXY"
                android:src="@mipmap/timg" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/select_color_000000"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/select_color_000000"
            app:tabTextColor="@color/color_999999">

        </android.support.design.widget.TabLayout>
    </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.CoordinatorLayout>

以上就实现了Toolbar 的折叠和隐藏，实际上CoordinatorLayout 最经典的设计 BeHavior 并没有详细讲到，我会在下一篇博客中更新 如何自定义的使用BeHavior。

最后附上源码的地址 https://github.com/smile-sxl/CoordinatorLayout