CoordinatorLayout打造酷炫的顶部栏

CoordinatorLayout是在 Google IO/15 大会发布的控件，常常与AppBarLayout和CollapsingToolbarLayout一起使用，用于打造各种炫酷效果的顶部栏。

使用前须知

CoordinatorLayout目前我仅在RecyclerView、NestedScrollView、ViewPager上面成功通过设置behavior来监听滑动事件，ListView和ScrollView都是不行的。什么原因，我们来看下CoordinatorLayout的源码：

图片.png

可以看到CoordinatorLayout继承了NestedScrollingParent接口，那么再看下RecyclerView和NestedScrollView吧：

图片.png

这样子想必都猜到是什么回事了。
Android 在发布 Lollipop版本之后，Google为Android的滑动机制提供了NestedScrolling机制，为了给用户带来更好的体验。而CoordinatorLayout正是基于NestedScrolling来开发的。
NestedScrolling机制可以简单理解为child将它的一些滑动事件交给了Parent去处理了。ListView和ScrollView无法和CoordinatorLayout配合使用的原因就是因为它们没继承这个NestedScrollingChild接口。那么ViewPager可以配合使用的原因是什么？查看ViewPager的继承关系会发现它没有继承这个Child接口，但是我们去看下onInterceptTouchEvent方法里面，会看到有下面的注释：

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
//省去部分代码
 if (dx != 0 && !isGutterDrag(mLastMotionX, dx)
        && canScroll(this, false, (int) dx, (int) x, (int) y)) {
       // Nested view has scrollable area under this point. Let it be handled there.
       mLastMotionX = x;
       mLastMotionY = y;
       mIsUnableToDrag = true;
       return false;
}
..............

翻译过来大意是这个方向有嵌套的View在滚动，就让它在那里处理吧。换言之，就是ViewPager检测到NestedScrolling相关的事件触发，就不做拦截，让外层的CoordinatorLayout成功监听到ViewPager嵌套的RecyclerView或NestedScrollView的滑动事件。
如果你对NestedScrolling机制很感兴趣，这里推荐下面的文章：
Android NestedScrolling机制完全解析 带你玩转嵌套滑动
Android 嵌套滑动机制（NestedScrolling）
Android NestedScrolling 实战

接下来是本文的重点了。

AppBarLayout

刚才已经提过了，CoordinatorLayout是经常与AppBarLayout配合使用的，所以很有必要搞明白AppBarLayout到底能做哪些事情。
AppBarLayout它继承LinearLayout，布局方向默认为垂直方向，它可以让你定制RecyclerView、NestedScrollView、ViewPager的滚动手势发生变化时，其内部的子View实现某个指定的动作。
目前布局代码如下，这里先用RecyclerView来说明：

 <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.fritz.layout.MainActivity">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:layout_scrollFlags="待补充"
                app:title="CoordinatorLayout" />
        </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>

这里需要注意的是app:layout_behavior="@string/appbar_scrolling_view_behavior"这个属性，就是这个属性让AppBarLayout与RecyclerView之间动作相互依赖，这也是Google帮我们定义好了一个behavior，我们直接用就是了。
AppBarLayout内部的子View通过在布局中加app:layout_scrollFlags设置执行的动作，那么app:layout_scrollFlags可以设置哪些动作呢？我们一一来看吧，下面的View值的是AppBarLayout里面的子View：

• 1.scroll: 想要当滑出屏幕的时候View都必须设置这个flag，没有设置这个flag的View将被固定在屏幕顶部，其他的flag属性也无法生效

GIF.gif

• 2.enterAlways:flag设为scroll|enterAlways的View,当RecyclerView上的手指往上滚动时，该View会直接往上滚动移出屏幕;当RecyclerView上的手指往下滚动时，该View会立刻往下滚动恢复原位

1211.gif

• 3.exitUntilCollapsed：flag设为scroll|exitUntilCollapsed的View，当这个View要往上逐渐滑出屏幕时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应RecyclerView的内部滑动事件。请注意，如果没有设置android:minHeight的话，那么这个属性是不会生效的。这里我将toolbar的android:layout_height设为200dp，android:minHeight设为50dp，效果如下：

xxx.gif

• 4.enterAlwaysCollapsed：这个是enterAlways的附加选项，要跟enterAlways一起使用，同时需要设置android:minHeight属性，否则不起作用的。它是指，当RecyclerView上的手指往下滚动时，View首先是enterAlways效果，当View的高度达到最小高度时，View就暂时不去往下滚动，直到某个可滚动View滑动到顶部并停止滑动时，View再继续往下滑动，直到滑到View的顶部结束。为了更好展示这个效果，我将toolbar的android:layout_height设为200dp，android:minHeight设为50dp，效果如下：

GIF.gif

• 5.snap：这个和上面的一样，不会单独使用，常与exitUntilCollapsed配合使用。在滚动结束后，如果View只是部分可见，它将滑动到最近的边界。比如，如果View的底部只有25%可见时停止滑动，它将继续滑动直至离开屏幕，而如果底部有75%可见时停止滑动，它将继续滑动到完全显示。

GIF.gif

好了，AppBarLayout相关功能到这里说完了，其实用起来还是蛮简单的。接着，到另一位主角CollapsingToolbarLayout的出场了。

CollapsingToolbarLayout

CollapsingToolbarLayout是用来对Toolbar进行再次包装的FrameLayout，主要是用于实现折叠(个人觉得收缩比较贴实)的AppBar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。它常用的有以下属性：

• 1.app:contentScrim：CollapsingToolbarLayout折叠(收缩)完成后的背景颜色
• 2.app:expandedTitleMarginXXX：设置CollapsingToolbarLayout展开时候title的Margin
• 3.app:layout_collapseMode：这个是让CollapsingToolbarLayout的子View设置的，共有3个flag可以使用，它们分别为：
  1) parallax：设置为这个flag时为视差模式，也就是子View折叠模式。在RecyclerView等View在滑动时，子View以视差(折叠)的方式来滑动
  2)pin：设置为这个flag时为固定模式，在折叠的时候会固定在顶端
  3)none：设置为这个flag时为没有效果，RecyclerView往上滑动的时候，子View会首先被固定并推出去
• 4.app:layout_collapseParallaxMultiplier：设置视差滚动因子，值为：0~1，值越小，折叠效果就越明显，需要搭配app:layout_collapseMode的parallax模式使用
  好了，了解上面这些知识后，我们来做一个炫酷的顶部栏吧，这里我使用了Databinding来做了一个全新的布局：

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="adapter"
            type="android.support.v7.widget.RecyclerView.Adapter" />

        <variable
            name="manager"
            type="android.support.v7.widget.RecyclerView.LayoutManager" />

    </data>

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.fritz.layout.MainActivity">

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

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                app:contentScrim="?attr/colorPrimaryDark"
                app:expandedTitleMarginEnd="20dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:setCollapsedTitleTextColor="@{@color/color_while}"
                app:setExpandedTitleTextColor="@{@color/colorAccent}">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/ic_bg"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.5" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    app:layout_collapseMode="pin"
                    app:navigationIcon="@drawable/ic_action_back"
                    app:title="OverLoad" />
            </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"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:setAdapter="@{adapter}"
            app:setLayoutManager="@{manager}" />
    </android.support.design.widget.CoordinatorLayout>
</layout>

我个人是比较喜欢DataBinding的，很多逻辑可以在xml解决，程序猿偷懒的好帮手啊。这里说明一下上面的 app:setCollapsedTitleTextColor 和 app:setExpandedTitleTextColor 这两个属性，其实这里DataBinding查找类里面对应的公共方法，这两个方法前者用于修改标题收缩后的颜色，后者用于修改标题展开后的颜色。
由于在toolbar里面设置的标题，所以CollapsingToolbarLayout会自动获取toolbar的标题来作为自己的标题的。我们来看下效果吧：

voer.gif

总结

这里我只是简单介绍了CoordinatorLayout的一些常见的属性和功能，如果大家希望了解更多的东西，可以去阅读官方的文档：官方文档地址
这里说句题外话，CoordinatorLayout这个控件实现的效果很炫酷，它里面的NestedScrolling机制也让人耳目一新，推荐大家都去仔细了解一下这个NestedScrolling机制，相信能从中受益不少。