CoordinatorLayout 详解：布局协调与滚动效果实现

4. NestedScrollView

在新版的 support-v4 兼容包里面有一个 NestedScrollView 控件，这个控件其实是 Material Design 中设计的一个控件，目的是跟 MD 中的其他控件兼容。应该说在 MD 中，RecyclerView 代替了 ListView，而 NestedScrollView 代替了 ScrollView，它们两个都可以用来跟 Toolbar 交互，实现上拉下滑中 Toolbar 的变化。在 NestedScrollView 的名字中其实就可以看出它的作用了，Nested 是嵌套的意思，而 Toolbar 基本需要嵌套使用。

5. FloatingActionButton

FloatingActionButton 就是一个漂亮的按钮，其本质是一个 ImageView。有一点要注意，Material Design 引入了 Z 轴的概念，就是所有的 View 都有了高度，它们一层一层贴在手机屏幕上，而 FloatingActionButton 的 Z 轴高度最高，它贴在所有 View 的最上面，没有 View 能覆盖它。

6. Behavior

Behavior 只有是 CoordinatorLayout 的直接子 View 才有意义。只要将 Behavior 绑定到 CoordinatorLayout 的直接子元素上，就能对触摸事件（touch events）、window insets、measurement、layout 以及嵌套滚动（nested scrolling）等动作进行拦截。Design Library 的大多功能都是借助 Behavior 的大量运用来实现的。当然，Behavior 无法独立完成工作，必须与实际调用的 CoordinatorLayout 子视图相绑定。具体有三种方式：通过代码绑定、在 XML 中绑定或者通过注释实现自动绑定。

三、常见特效实现

1. 浮动操作按钮效果

效果如下：

只要使用 CoordinatorLayout 作为基本布局，将自动产生向上移动的动画。浮动操作按钮有一个默认的 behavior 来检测 Snackbar 的添加并让按钮在 Snackbar 之上呈现上移与 Snackbar 等高的动画。

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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.v7.widget.RecyclerView
         android:id="@+id/rvToDoList"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
   </android.support.v7.widget.RecyclerView>
 
   <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        android:src="@mipmap/ic_launcher"
        app:layout_anchor="@id/rvToDoList"
        app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>

2. Toolbar 的扩展与收缩效果

<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/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
 
      <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
 
</android.support.design.widget.CoordinatorLayout>

3. 响应滚动事件

首先，需要让 Toolbar 包裹在 AppBarLayout 中。 然后，我们需要定义 AppBarLayout 与滚动视图之间的联系。在 RecyclerView 或者任意支持嵌套滚动的 view 比如 NestedScrollView 上添加 app:layout_behavior。support library 包含了一个特殊的字符串资源 @string/appbar_scrolling_view_behavior，它和 AppBarLayout.ScrollingViewBehavior 相匹配，用来通知 AppBarLayout 这个特殊的 view 何时发生了滚动事件，这个 behavior 需要设置在触发事件（滚动）的 view 之上。

当 CoordinatorLayout 发现 RecyclerView 中定义了这个属性，它会搜索自己所包含的其他 view，看看是否有 view 与这个 behavior 相关联。AppBarLayout.ScrollingViewBehavior 描述了 RecyclerView 与 AppBarLayout 之间的依赖关系。RecyclerView 的任意滚动事件都将触发 AppBarLayout 或者 AppBarLayout 里面 view 的改变。

AppBarLayout 里面定义的 view 只要设置了 app:layout_scrollFlags 属性，就可以在 RecyclerView 滚动事件发生的时候被触发。

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

app:layout_scrollFlags 属性里面必须至少启用 scroll 这个 flag，这样这个 view 才会滚动出屏幕，否则它将一直固定在顶部。可以使用的其他 flag 有：enterAlways、enterAlwaysCollapsed、exitUntilCollapsed。

4. 折叠效果

如果想制造 toolbar 的折叠效果，我们必须把 Toolbar 放在 CollapsingToolbarLayout 中。 通常，我们都是设置 Toolbar 的 title，而现在，我们需要把 title 设置在 CollapsingToolBarLayout 上，而不是 Toolbar。

CollapsingToolbarLayout collapsingToolbar =
              (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
      collapsingToolbar.setTitle("Title");

5. 视差效果

为了制造出这种效果，我们添加一个定义了 app:layout_collapseMode="parallax" 属性的 ImageView。

<android.support.design.widget.CollapsingToolbarLayout
          android:id="@+id/collapsing_toolbar"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:fitsSystemWindows="true"
          app:contentScrim="?attr/colorPrimary"
          app:expandedTitleMarginEnd="64dp"
          app:expandedTitleMarginStart="48dp"
          app:layout_scrollFlags="scroll|exitUntilCollapsed">
 
          <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.v7.widget.Toolbar>
          <ImageView
              android:src="@drawable/cheese_1"
              app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:scaleType="centerCrop"
              app:layout_collapseMode="parallax"
              android:minHeight="100dp"/>
 
      </android.support.design.widget.CollapsingToolbarLayout>

6. 结合 ViewPager

<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:background="@android:color/background_light"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/tangyan"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        </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_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>
    </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:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

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

四、常见问题与解决方案

1. NestedScrollView 冲突问题

在使用 CoordinatorLayout 时，经常遇到 NestedScrollView 内部滚动失效的问题。这通常是因为嵌套滚动链断裂导致的。确保最外层是 CoordinatorLayout，中间层是 AppBarLayout，内容层是 NestedScrollView 或 RecyclerView，并且内容层正确设置了 app:layout_behavior="@string/appbar_scrolling_view_behavior"。

2. fitsSystemWindows 设置不当

如果 fitsSystemWindows 设置不正确，可能导致状态栏遮挡内容或底部导航栏遮挡布局。建议在 CoordinatorLayout 及其直接子 View 上统一设置 android:fitsSystemWindows="true"，并在 styles.xml 中配置相应的 padding 以适配系统栏。

3. 自定义 Behavior

如果需要更复杂的交互逻辑，可以继承 CoordinatorLayout.Behavior 并重写 onTouchEvent 或 onDependentViewChanged 方法。例如，可以让某个 View 跟随另一个 View 的滚动距离进行缩放。

五、总结

CoordinatorLayout 是 Android Material Design 中实现复杂滚动交互的核心组件。通过合理组合 AppBarLayout、CollapsingToolbarLayout 和 NestedScrollView，开发者可以轻松实现折叠标题栏、视差背景、悬浮按钮联动等高级效果。掌握 Behavior 机制和嵌套滚动原理，能够解决大部分布局冲突问题，提升用户体验。在实际开发中，建议优先使用 AndroidX 库，并注意处理不同屏幕尺寸下的适配问题。