什么是 CoordinatorLayout

CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout is intended for two primary use cases:
1.As a top-level application decor or chrome layout
2.As a container for a specific interaction with one or more child views

根据官方的介绍，CoordinatorLayout 继承自 ViewGroup，主要有以下两个用途

1. 作为一个应用顶层的装饰布局，也就是一个Activity Layout 的最外一层布局
2. 作为一个或多个有特定响应动作的容器，协调(Coordinate)其他组件, 实现联动

什么是 AppBarLayout

AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.

Children should provide their desired scrolling behavior through setScrollFlags(int) and the associated layout xml attribute: app:layout_scrollFlags.

This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it's functionality will not work.

根据官方的介绍

• AppBarLayout 继承自 LinearLayout，子控件默认为竖直方向，可以用它实现 Material Design 的 Toolbar，支持滑动手势
• 它的子控件可以通过在代码里调用 setScrollFlags(int) 或者在XML里 app:layout_scrollFlags 来设置它的滑动手势
• 根布局必须使用 CoordinatorLayout，否则很多功能无法正常使用

什么是 CollapsingToolbarLayout

CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout.

根据官方的介绍 CollapsingToolbarLayout 是一个折叠的 Toolbar 布局，作为 AppBarLayout 的直接子项

下面结合 CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout 的例子来学习

简单使用

按照惯例，我们先看一下效果图：

CoordinatorLayout.gif

从效果图来看，就是一个可根据手势滑动进行折叠的 Toolbar，很普通但很实用，下面看看具体实现。对 Toolbar 还不熟悉的可以参考这篇介绍 MaterialDesign（一），ToolBar使用

1. 引入 com.android.support:design
   由于我们这个例子使用到 CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout，所以需要引入 com.android.support:design

compile 'com.android.support:design:26.1.0'

2. 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <!--添加 android:minHeight="?actionBarSize" 解决 RecyclerView 最后一项显示不全-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            app:collapsedTitleTextAppearance="@style/CollapsedTitleTextStyle"
            app:expandedTitleTextAppearance="@style/ExpandedTitleTextStyle"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/android_bg"/>

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

    <!--以下这部分我们下篇文章再介绍，不是本篇的重点，暂时知道是一个列表就可以了-->
    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>

==================================================================
<!--CollapsingToolbarLayout展开时标题文字样式-->
<style name="ExpandedTitleTextStyle" parent="TextAppearance.AppCompat.Title">
    <item name="android:textSize">30sp</item>
    <item name="android:textColor">#333333</item>
</style>

<!--CollapsingToolbarLayout折叠时标题文字样式-->
<style name="CollapsedTitleTextStyle" parent="TextAppearance.AppCompat.Title">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">#ffffff</item>
</style>

从 xml 布局文件看，根布局是 CoordinatorLayout，里面包含了 AppBarLayout 和 SwipeRefreshLayout（下篇介绍），AppBarLayout 包含了 CollapsingToolbarLayout 作为可折叠的 Toolbar 的父布局。 AppBarLayout 的子项并没有硬性规定，可以包含任意视图。

这里我们重点关注 CollapsingToolbarLayout 的几个属性：

• app:layout_scrollFlags

在本篇的例子中我们设置的是 app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"，呈现的效果是往上滑时，直至 Toolbar 设置的高度时，才轮到下面列表的滑动；往下滑时，直至滑动到列表顶部时，才轮到 CollapsingToolbarLayout 的滑动，由于设置了 snap，所以不会存在 CollapsingToolbarLayout 显示部分的时候，要么显示最小高度，要么完全显示。其他效果这里就不一一展示了，感兴趣的可以自己实现，跑一下效果

• app:collapsedTitleTextAppearance 用于设置折叠时标题文字样式，这里只是简单的设置了大小和颜色

• app:expandedTitleTextAppearance 用于设置展开时标题文字样式，这里也只是简单的设置了大小和颜色

到此就完成了一开始展示的效果，是不是很简单，甚至不用在 Activity 中编写任何代码。

结语

本文主要介绍了 CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout 的使用，这种折叠式的布局在实际开发中还是用到的比较多。本文 demo 已上传到 github。下面是几个控件的官方API地址（自备梯子）

• CoordinatorLayout API
• AppBarLayout API
• CollapsingToolbarLayout API