MaterialDesign之AppBarLayout与CollapsingToolbarLayout的学习

欢迎关注微信公众号：[FSA全栈行动 👋]

# 一、简述

本文要介绍的AppBarLayout与CollapsingToolbarLayout均是随MaterialDesign出现的新控件，两者的作用呢，可以说就是为了“增强”Toolbar的吧，它们的出现使得Toolbar不再只是那个木讷的"ActionBar"，而是一个真正有灵性，有活力的APP工具条。下面就来看看它们是怎么使用的吧。

# 二、使用

# 1、CoordinatorLayout

在使用AppBarLayout与CollapsingToolbarLayout之前，先来说说这个CoordinatorLayout。CoordinatorLayout直译为“协调布局”，顾名思义，它就是用来协调子布局及控件的，要使用它，则必须把它设置为整个布局的根，同时，通过对“特殊子控件”设置app:appbar_scrolling_view_behavior属性的值，进而来协调子控件在整个布局中的显示位置。本文不对其进行深入讲解，我们这里只需知道，要使用AppbarLayout来“增强”Toolbar，就需要用到CoordinatorLayout即可。CoordinatorLayout的使用示例代码：

<?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="256dp">
        ...
    </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">

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

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


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

从上面的代码中，可以知道，这里只对NestedScrollView控件设置了app:appbar_scrolling_view_behavior属性，没错，NestedScrollView是上面说到的“特殊子控件”，像这样的“特殊子控件”有3个，分别是RecyclerView、ViewPager、NestedScrollView，它们的使用基本是一样的，app:appbar_scrolling_view_behavior属性也只对这3个“特殊子控件”有效。对于这个NestedScrollView，你可以认为，它就是ScrollView的增强版而已。好了，下面就开始介绍本文的主角。

# 2、AppBarLayout

下面是官方文档中对AppBarLayout的描述：

AppBarLayout是一个垂直的LinearLayout，实现了Material Design中app bar的scrolling gestures特性。AppBarLayout的子View应该声明想要具有的“滚动行为”，这可以通过layout_scrollFlags属性或是setScrollFlags()方法来指定。 AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作，为了让AppBarLayout能够知道何时滚动其子View，我们还应该在CoordinatorLayout布局中提供一个可滚动View，我们称之为scrolling view。scrolling view和AppBarLayout之间的关联，通过将scrolling view的Behavior设为AppBarLayout.ScrollingViewBehavior来建立。

结合上面CoordinatorLayout部分中贴出的代码，这段描述的后半段是不难理解的，而比较难理解的应该是layout_scrollFlags属性，描述中的scrolling view就是上面所说的“特殊子控件”。要牢记，描述中说的是对AppbarLayout的直接子控件设置layout_scrollFlags属性，下面来看看都有哪些ayout_scrollFlags属性：

scrollFlags的属性值	作用
scroll	让AppBarLayout与scrolling view合为一体，当scrolling view滚动时，AppBarLayout也跟着一起滚动。这是“增强”Toolbar的一个必需取值，可以跟其他值一起使用，从而实现不同的“增强”效果。单独使用scroll的话，其效果就类似给ListView加了一个HeaderView。

<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="wrap_content">

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

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

scroll

scrollFlags的属性值	作用
scroll \| enterAlways	当scrolling view向上滚动时，AppBarLayout也跟着一起滚出屏幕，一旦scrolling view向下滚动，AppBarLayout也跟着一起滚入屏幕。

<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="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="CSDN_LQR"
            app:titleTextColor="@android:color/white"/>

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

enterAlways

scrollFlags的属性值	作用
scroll \| enterAlways \| enterAlwaysCollapsed	当scrolling view向上滚动时，AppBarLayout也跟着一起滚出屏幕，一旦scrolling view向下滚动，AppBarLayout便先慢慢滚动到折叠高度（即最小高度），直到scrolling view向下滚动到最顶部时，AppBarLayout再先慢慢滚动到原来的高度（此时scrolling view也会再次和AppBarLayout一起滚动）。

<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="wrap_content"
        android:minHeight="?attr/actionBarSize">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:title="CSDN_LQR"
            app:titleTextColor="@android:color/white"/>

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

enterAlwaysCollapsed

scrollFlags的属性值	作用
scroll \| exitUntilCollapsed	当scrolling view向上滚动时，AppBarLayout也跟着一起滚出屏幕，直到达到了折叠高度（即最小高度），此时AppBarLayout不再滚动，也就是不完全滚出屏幕，而当scrolling view向下滚动到最顶部时，AppBarLayout才会再随scrolling view一起滚动，直到原来的高度。

<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="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="CSDN_LQR"
            app:titleTextColor="@android:color/white"/>

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

exitUntilCollapsed

scrollFlags的属性值	作用
scroll \| snap	snap有仓促的意思，效果同它的意思一样，当scrolling view处于无法再向下滚动的状态时（即已经到顶部了），此时向上滚动scrolling view，AppBarLayout将一次全部滚出屏幕，或向下滚动scrolling view，AppBarLayout将一次全部滚入屏幕。有一种引力的感觉。

<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="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|snap"
            app:title="CSDN_LQR"
            app:titleTextColor="@android:color/white"/>

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

snap

好啦，AppBarLayout对Toolbar的“增强”就差不多这样了，不过要纠正一点，其实AppBarLayout并不只是对Toolbar"增强"，对于其他控件也是一样的，只是AppBarLayout与Toolbar的搭配比较常见而已。下面接着来看看CollapsingToolbarLayout具体可以对Toolbar做到怎样的“增强”。

# 3、CollapsingToolbarLayout

CollapsingToolbarLayout对Toolbar的“增强”就是把Toolbar变成可折叠的，使其具有更多的交互花样（其实也就是更多的交互动画），我们先来看看可以实现的效果：

CollapsingToolbarLayout

要实现上图的效果，需要跟AppBarLayout一起使用，CollapsingToolbarLayout的使用很简单，直接包裹Toolbar即可，其中可以增加一个ImageView控件来作为CollapsingToolbarLayout的“背景”，其实CollapsingToolbarLayout本身是一个FrameLayout，所以其子控件的摆放就是从左上角开始，一个个叠加起来。不过，其中的Toolbar默认一开始是隐藏的。

<?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="256dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/palette"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:title="CSDN_LQR"
                app:titleTextColor="@android:color/white"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    ...
</android.support.design.widget.CoordinatorLayout>

这代码中有个细节需要注意一下，你可以发现，代码中不再对Toolbar设置app:layout_scrollFlags属性，而是给CollapsingToolbarLayout控件设置了。这不奇怪，因为上面已经说了，app:layout_scrollFlags属性是对AppBarLayout的直接子控件设置的。先来看看效果怎样：

这是默认的效果，可以看到滚动过程中，ImageView和大标题一起向上或向下滚动，其实这个过程中，只有当CollapsingToolbarLayout折叠时，Toolbar才会显示出来，大标题执行了缩放、位置和透明等动画，而Toolbar执行透明动画，两标题重合或分离，看起来好像就只有一个标题一样。此外，上面的布局代码中是有给Toolbar设置样式的，但并没有起作用。CollapsingToolbarLayout提供了文字样式属性，可以分别对大标题（展开标题）与小标题（折叠标题）的文字样式进行设置。

style.xml中文字样式代码如下：

<!--CollapsingToolbarLayout展开时标题文字样式-->
<style name="ExpandedTitleTextAppearance" parent="TextAppearance.AppCompat.Title">
    <item name="android:textSize">30sp</item>
    <item name="android:textColor">#fff</item>
</style>
<!--CollapsingToolbarLayout折叠时标题文字样式-->
<style name="CollapsedTitleTextAppearance" parent="TextAppearance.AppCompat.Title">
    <item name="android:textSize">15sp</item>
    <item name="android:textColor">#000</item>
</style>

对CollapsingToolbarLayout分别设置展开标题样式与折叠标题样式

<android.support.design.widget.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
    app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
    >
    ...
</android.support.design.widget.CollapsingToolbarLayout>

效果：

这样还不够，如果想在CollapsingToolbarLayout折叠时，背景变为纯色、状态栏也一起变色的话，可以通过如下代码设置：

<android.support.design.widget.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
    app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
    app:contentScrim="?attr/colorPrimary"
    app:statusBarScrim="?attr/colorPrimaryDark"
    >
    ...
</android.support.design.widget.CollapsingToolbarLayout>

其中contentScrim设置的是折叠时，CollapsingToolbarLayout的背景色。statusBarScrim设置的是折叠时，状态栏的颜色，可以达到沉浸式的效果，不过这个属性需要Android 5.0以上才能支持，而且，有的国产机对状态栏做了限制，没办法生效，比如锤子的系统，状态栏一起是半透明色，且该属性无法生效，所以，这个效果需视手机及系统版本而定。来看下效果如何：

呀，马马虎虎，不过还差点，需要给图片“背景”设置视差效果，还有大标题文字底部居中显示。给图片“背景”设置视差效果可以通过设置app:layout_collapseMode属性来完成，这个属性只要是CollapsingToolbarLayout的子控件就有，有三种取值，分别是：none、pin、parallax。其中parallax的效果是在CollapsingToolbarLayout折叠时，此布局（或控件）会有视差折叠效果；pin的效果是在CollapsingToolbarLayout折叠后，此布局（或控件）将固定在顶部。none是默认值，即没有效果，实话说，我感觉pin跟none没什么区别（如果觉得我说的不对，请不吝赐教）。至于标题的位置，可以通过app:collapsedTitleGravity和app:collapsedTitleGravity来配置，用法跟layout_gravity一样，就不说了，贴下代码，随便看下效果。

<android.support.design.widget.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
    app:contentScrim="?attr/colorPrimary"
    app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:statusBarScrim="?attr/colorPrimaryDark"
    app:collapsedTitleGravity="start"
    app:expandedTitleGravity="center_horizontal|bottom" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/palette"
        app:layout_collapseMode="parallax"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="CSDN_LQR"
        app:titleTextColor="@android:color/white"
        app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>