---

引言

CoordinatorLayout是design包中的一个控件，它具有实现子控件之间交互的作用，一般不单独使用，经常结合design包中的其他控件使用，下面会进行一些实例的讲解。

---

参考文章：

• 仿知乎首页学习 CoordinateLayout
• 一起玩转CoordinatorLayout
• CoordinatorLayout高级用法-自定义Behavior
• 一个神奇的控件——Android CoordinatorLayout与Behavior使用指南

1.结合Snackbar使用

效果图：

• xml布局文件

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gjj.gd.materialdesign.activity.ZhiHuActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:layout_gravity="end|bottom"
        />

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

• java文件

    @OnClick({R.id.fab})
    public void onViewClicked(View view) {
        Snackbar.make(view,"FAB",Snackbar.LENGTH_LONG).setAction("cancel", new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        }).show();
    }

从上面例子中我们发现，当我们将CoordinatorLayout、FloatingActionButton与Snackbar结合起来简单使用时，会看到当Snackbar出现时，FloatingActionButton被顶上去，没有被Snackbar遮挡住。

2.结合AppBarLayout使用

效果图：

结合AppBarLayout使用

列表向上滑动，粉色部分也跟着向上滑动；列表向下滑动并且未滑动到起始位置时，粉色就会向下展开到一定高度，待列表完全向下滑动到起始位置，粉色部分才会完全打开。我们看看布局文件。

布局文件：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gjj.gd.materialdesign_v7.coordinatorlayout.CombineAppBarLayoutActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/colorPrimary"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </android.support.design.widget.AppBarLayout>

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

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

对于AppBarLayout的直接子view，我们可以通过给子view设置layout_scrollFlags属性可以让子View具有滑动行为，该属性的值有五种情况：

• scroll：设置成这个值的效果就是该view和scrolling view（例子中的RecyclerView）形成一个整体，在上面示例中我们滑动RecyclerView时，粉色部分也会跟着滑动。为了其他的滚动行为生效，必须同时制定scroll和其他标记。
• exitUntilCollapsed：设置成这个值的效果就是该view离开屏幕时，会被折叠到最小高度。该View已完全折叠后，再向下滚动scrolling view，直到scrolling view顶部的内容完全显示后，该View才会开始向下滚动显示出来。
• enterAlways：设置成这个值的效果就是只要scrolling view向下滚动（不管scrolling view在什么位置），该View会跟着一起向下滚动。
• enterAlwaysCollapsed：设置成这个值的效果就是当我们开始向下滚动scrolling view时，该View会一起跟着滚动知道达到其最小高度，然后当scrolling view滚动至顶部内容完全显示后，再向下滚动scrolling view，该View会继续滚动到完全显示出来。
• snap：

接下来我们看看这几种组合的效果：

• scroll|enterAlwaysCollapsed的效果图

在上面效果的基础上我们去掉enterAlways后，列表向上滑动，粉色部分也跟着向上滑动；列表向下滑动并且滑动到起始位置时，粉色才跟着向下展开。

• scroll|enterAlways|exitUntilCollapsed的效果图
  

  
  列表向上滑动，粉色部分也跟着向上滑动，但是由于exitUntilCollapsed的作用只能滑动到一定高度，并不能完全收缩；列表向下滑动并且未滑动到起始位置时，粉色就会一起跟着向下展开。

• scroll|exitUntilCollapsed的效果图
  

  

列表向上滑动，粉色部分也跟着向上滑动，但是由于exitUntilCollapsed的作用只能滑动到一定高度，并不能完全收缩；列表向下滑动并且滑动到起始位置时，粉色才会向下展开。

我们可能会发现，每种情况前面都加了scroll，因为这是粉色部分发生滚动的必要条件，如果没有设置scroll，那么我们将看不到任何效果，可以自己试一试。

我们可能会想他们到底是怎么实现滑动交互的呢，其实我们实现滑动交互的条件必须是CoordinatorLayout的子view必须实现NestedScrollingChild接口（RecyclerView就实现了NestedScrollingChild接口，我们也可以用NestedScrollView），而且CoordinatorLayout也实现了NestedScrollingParent 接口，这样才能实现滑动交互。

public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent {}

public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild {}

public class NestedScrollView extends FrameLayout implements NestedScrollingParent,
        NestedScrollingChild, ScrollingView {}

关于滚动机制的具体原理，可以查看这篇文章源码看CoordinatorLayout.Behavior原理。

3.与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:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginEnd="30dp"
            app:expandedTitleMarginStart="40dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />


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

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

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

上面的布局中我们需要关注以下几处陌生的属性：

• app:contentScrim：值是颜色值，用来设置折叠效果完成之后的标题的背景色。
• app:expandedTitleMarginEnd：收缩结束时标题距离左边的距离
• app:expandedTitleMarginStart：还没有收缩时，标题距离左边的距离。
• app:layout_collapseMode：折叠模式，有两个值
  • pin：上面的效果我们发现，toolbar设置该模式之后，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。
  • parallax：上面的imageView设置为该模式后，在recyclerView滚动时，imageview也可以同时滚动，实现视差滚动的效果，通常和layout_collapseParallaxMultiplier搭配使用。
• app:layout_collapseParallaxMultiplier：设置视差滚动因子，值为0-1。