CoordinatorLayout 不得不说的故事

目的

最近公司产品中提出了很多效果酷炫的需求。为了不让 UI 妹子们失望，我是必须要实现的，在此做一个技术总结。

简介

CoordinatorLayout 是 Google 实现 Material Design 的效果而发布的 Design Support Library 库中的一个重要控件，很多效果都是通过搭配CoordinatorLayout 实现的。CoordinatorLayout 可以说是万金油控件，功能也是非常的强大，下面通过 CoordinatorLayout 一步步的了解特效实现的方式。

实现

使用 CoordinatorLayout 等 Material Design 控件都需要在 build.gradle 导入：

implementation 'com.android.support:design:27.1.1'

1. CoordinatorLayout 与 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll"
            app:title="Eren"
            app:titleTextColor="@color/white" />

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:text="@string/content"
            android:textSize="21sp" />

    </android.support.v4.widget.NestedScrollView>

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

运行效果

这里面使用到了 AppBarLayout ，AppBarLayout 是一个垂直布局的 LinearLayout，它主要是为了实现 Material Design 风格的标题栏的滚动效果。

（1）CoordinatorLayout 中可滚动的视图（如 NestedScrollView），需设置属性：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

此属性是字符串是系统提供的

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

（2）AppBarLayout 中的 Toolbar，如要想要滚动到屏幕外，需设置属性：

app:layout_scrollFlags="scroll"

• scroll：隐藏的时候，先整体向上滚动，直到 AppBarLayout 完全隐藏，再开始滚动 NestedScrollView；显示的时候，直到 NestedScrollView 顶部完全出现后，再开始滚动 AppBarLayout 到完全显示

• enterAlways：需要与 scroll 同时使用，用 “|” 分开scroll|enterAlways，只不过向下滚动先显示 AppBarLayout 到完全，再滚动 NestedScrollView
  

  enterAlways

• enterAlwaysCollapsed：需要和 enterAlways 同时使用scroll|enterAlways|enterAlwaysCollapsed，和 enterAlways 不一样的是，不会显示 AppBarLayout 到完全再滚动 NestedScrollView，而是先滚动 AppBarLayout 到最小高度，再滚动 NestedScrollView，最后再滚动 AppBarLayout 到完全显示。
  注意：需要定义 View 的最小高度minHeight才有效果：

android:minHeight="10dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

enterAlwaysCollapsed

• exitUntilCollapsed：定义 AppBarLayout 消失的规则。发生向上滚动事件时，AppBarLayout 向上滚动退出直至最小高度minHeight，然后 NestedScrollView 开始滚动。也就是，AppBarLayout 不会完全退出屏幕。

android:minHeight="20dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"

exitUntilCollapsed

• snap：设置 AppBarLayout 的滑动弹跳效果

app:layout_scrollFlags="scroll|snap"

snap

---

2. CoordinatorLayout 与 CollapsingToolbarLayout

CollapsingToolbarLayout 继承自 FrameLayout，它是用来实现 Material Design 风格的标题栏的折叠效果，一般它包裹子 View 是 Toolbar 和 其他 View

布局如下：

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="Eren">

            <ImageView
                android:id="@+id/detail_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@mipmap/bg_mine"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9" />

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

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

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

效果图

结合 CollapsingToolbarLayout，我们向上滑动时 ImageView 隐藏、Toolbar显示，向下滑动则反之，实现折叠展开的效果。

（1）在 CollapsingToolbarLayout 中通过 app:contentScrim="?attr/colorPrimary" 属性设置 Toolbar 折叠到顶部的背景，同时设置 app:layout_scrollFlags="scroll|exitUntilCollapsed" 属性，上面的内容已经解释过
（2）在 Toolbar 中设置 app:layout_collapseMode="pin"属性，Toolbar 会在折叠的时候最后固定在顶端，layout_collapseMode 除了使用 pin 固定住 View，还可以使用 parallax，视差的意思就是：移动过程中两个 View 的位置产生了一定的视觉差异。
我们更改 app:layout_collapseParallaxMultiplier 的属性值为 0.1

app:layout_collapseParallaxMultiplier="0.1"

app:layout_collapseParallaxMultiplier="0.1"
对照 app:layout_collapseParallaxMultiplier="0.9"的 gif 图，很明显值越大视差越小

---

3. CoordinatorLayout 与 FloatingActionButton

布局代码：

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@mipmap/ic_search"
        app:backgroundTint="@color/colorPrimary"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />

效果图
其中，app:layout_anchor 属性指定 FloatingActionButton 显示在 AppBarLayout 的区域，app:layout_anchorGravity 属性设置显示的具体位置

---

总结

这是简单的 CoordinatorLayout 与其他控件配合基本操作，想要实现需求的效果还需要深入研究属性和源码，下一步会对重要的 Behavior 进行学习。