【Android - 控件】之MD - CoordinatorLayout的使用

　　CoordinatorLayout是Android 5.0新特性——Material Design中的一个布局控件，主要用来协调各个子视图之间的工作，也可以用来作为顶部布局。CoordinatorLayout主要是通过设置子视图的Behavior来达到协调子视图之间的工作的目的的。

　　CoordinatorLayout主要有以下三种最常用的使用方法：

• CoordinatorLayout + FloatingActionButton实现FAB与其他视图的协调；
• CoordinatorLayout + AppBarLayout实现头部布局与滑动视图的协调；
• CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout实现头部布局与滑动视图的协调，以及头部布局内部各视图的协调。

 

1、CoordinatorLayout + FloatingActionButton：

　　CoordinatorLayout为嵌套其中的子视图提供了两个属性：layout_anchor和layout_anchorGravity，前者是用来设置当前视图的锚点视图，即当前视图停靠在哪个视图上；后者是用来设置当前视图与锚点视图的位置关系，即当前视图停靠在锚点视图的哪个位置，这两个属性最常用的控件就是FAB。例如，下面这段代码中的两个FAB，一个停靠在整个CoordinatorLayout布局的右下角，另一个停靠在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/activity_fab"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFFFF">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary" />

    <!-- CoordinatorLayout作为一个super-powered FrameLayout，通过设置子View的layout_gravity来设置子View的位置 -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:layout_margin="20.0dip"
        android:src="@mipmap/ic_launcher"
        app:fabSize="normal" />

    <!--
        CoordinatorLayout为子View提供了一个anchor属性，可以设置锚点，即固定在某个控件的某个位置
        app:layout_anchor：设置锚点控件
        app:layout_anchorGravity：设置将当前控件固定在目标控件的哪个位置
    -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="50.0dip"
        android:src="@mipmap/ic_launcher"
        app:fabSize="normal"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom|right" />

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

　　运行结果如图所示：

 

2、CoordinatorLayout + AppBarLayout：

　　AppBarLayout是为了MD设计的App Bar，支持手势滑动操作。被AppBarLayout包裹的子视图会具有layout_scrollFlags属性，这个属性是用来控制子视图的滑动模式的，有以下几个可选值：

• scroll：所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。
• enterAlways：设置这个flag时，向下的滚动都会导致该view变为可见，启用“快速返回模式”。
• enterAlwaysCollapsed：当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
• snap：磁性吸附，在滑动到一定程度后松手可以自动缩到顶端或自动拉伸到最大。

　　先来看一个例子：

<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/activity_abl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFFFF">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        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"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:tabIndicatorColor="#FFFFFFFF"
            app:tabIndicatorHeight="5.0dip"
            app:tabSelectedTextColor="#FFFFFFFF"
            app:tabTextColor="@color/colorAccent" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

　　在这个例子中，AppBarLayout中嵌套了一个Toolbar和一个TabLayout，其中Toolbar中设置了layout_scrollFlags属性为“scroll|enterAlways”，因此Toolbar是可以根据滑动滑出屏幕；TabLayout没有设置layout_scrollFlags属性，因此它最终只会固定在屏幕上方。

　　上面这个例子的运行结果如下图所示：

3、CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout：

　　“CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout”的模式常用来制作Design模式的详情页页面，使用CollapsingToolbarLayout可以达到“视差模式”，即上滑过程中，顶部布局的消失是有一定的颜色或图案的变化效果的。

　　CoordinatorLayout、AppBarLayout和CollapsingToolbarLayout这三个布局控件的嵌套顺序是这样的：CoordinatorLayout中嵌套AppBarLayout，AppBarLayout中嵌套CollapsingToolbarLayout，CollapsingToolbarLayout中嵌套一个Toolbar。

　　CollapsingToolbarLayout中有一个title属性，可以设置CollapsingToolbarLayout上显示的标题文本，当CollapsingToolbarLayout中嵌套了Toolbar之后，滑动时这个文本最终会移动到Toolbar中。CollapsingToolbarLayout中还有一个contentScrim属性，用来设置Toolbar被折叠到顶部时显示的背景。

　　CollapsingToolbarLayout为自己内部的子视图提供了一个属性：layout_collpaseMode，用来设置子视图的滑动模式，有两个值可以选择：

• parallax：视差模式，在折叠过程中会有视差效果
• pin：固定模式，此视图最后将固定在屏幕顶端

　　我们来看一个例子：

<android.support.design.widget.CoordinatorLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_ctl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFFFF">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256.0dip"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:title="aaaaaa">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@string/app_name"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg"
                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" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

　　在这个例子中，CollapsingToolbarLayout中嵌套了两个控件：一个ImageView和一个Toolbar，其中，ImageView设置了layout_collapseMode属性为parallax，表示它将在滑动过程中呈视差模式渐渐变化，最终滑出屏幕；而Toolbar设置的layout_collapseMode属性为pin，表示Toolbar会最终固定在屏幕上方，而且变成CollapsingToolbarLayout中contentScrim属性设置的背景样式，即Toolbar的背景会在最终变成colorPrimary颜色。

　　这个例子的运行结果如下图所示：

      

　　以上就是对CoordinatorLayout的基础用法的介绍，下面贴出码云中的源码，供大家参考。

DEMO地址