Android Material Design —— CoordinatorLayout

概述

CoordinatorLayout是com.android.support:design包下的一个控件，然而这个控件可以被称为com.android.support:design包中最复杂、功能最强大的控件。为什么这样说呢？那是因为它是组织它众多子View之间互相协作的一个ViewGroup。

CoordinatorLayout 的神奇之处就在于Behavior对象。怎么理解呢？CoordinatorLayout使得子View之间知道了彼此的存在，一个子View的变化可以通知到另一个子View，CoordinatorLayout 所做的事情就是当成一个通信的桥梁，连接不同的View，而Behavior则是协作对象之间进行通信。

在CoordinatorLayout中使用AppBarLayout，如果AppBarLayout的子View（如ToolBar、TabLayout）标记了app:layout_scrollFlags（xmlns:app="http://schemas.android.com/apk/res-auto"）滚动事件，那么在CoordinatorLayout布局里其它标记了app:layout_behavior的子View（LinearLayout、RecyclerView、NestedScrollView等）就能够响应（如ToolBar、TabLayout）控件被标记的滚动事件。

依赖

在build.gradle中添加如下依赖

dependencies {
    compile 'com.android.support:design:25.2.0'
}

AppBarLayout和CollapsingToolbarLayout

AppBarLayout是一种支持响应滚动手势的布局（比如工具栏滚出或滚入屏幕），CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局。

与AppBarLayout组合的滚动布局（Recyclerview、NestedScrollView等）需要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"。没有设置的话，AppBarLayout将不会响应滚动布局的滚动事件。

CollapsingToolbarLayout和ScrollView一起使用会有滑动BUG，注意要使用NestedScrollView来替代ScrollView。

AppBarLayout的子布局有5种滚动标识（app:layout_scrollFlags属性的值）：

• scroll：所有想滚动出屏幕的View都需要设置这个属性值， 没有设置这个属性值的View将被固定在屏幕顶部。

• enterAlways：让任意向下的滚动都会导致该View变为可见，启用快速“返回模式”。

• enterAlwaysCollapsed：当你的视图已经设置android:minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

• exitUntilCollapsed：滚动退出屏幕，最后折叠在顶端。当你定义了一个android:minHeight，此布局将在滚动到达这个最小高度的时候折叠。

• snap：当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开。

设置了layout_scrollFlags标志的View必须在没有设置的View的之前定义，这样可以确保设置过的View都从上面移出, 只留下那些固定的View在下面。

CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。默认contentScrim是colorPrimary的色值，statusBarScrim是colorPrimaryDark的色值。

CollapsingToolbarLayout的子布局有3种折叠模式（app:layout_collapseMode属性的值）

• off：这个是默认属性，布局将正常显示，没有折叠的行为。

• pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。

• parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。

当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~1。

模板

用Android Studio创建一个新的工程时，有一个Scrolling Activity模板

而在这个模板中，就列举了一个经典的使用案例，我这里对这个模板进行了一些简单的改动

<?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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            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_collapseMode="pin"
                app:title="My Application"/>

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

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/large_text"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

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

然后再附上效果图

上面布局文件在改动过程中，我对FloatingActionButton控件的布局位置有点不解，于是做了个实验，结果发现，是app:layout_anchor和app:layout_anchorGravity这两个属性在“作怪”！

当内容不需要屏幕滚动就能显示完全的时候，上下滑动是不会进行展开折叠的。

参考链接：
http://www.jianshu.com/p/06c0ae8d9a96
http://android.jobbole.com/82188/
http://blog.csdn.net/tablle/article/details/52288515
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html