Android Study Material Design 十四之再战CoordinatorLayout-CFANZ编程社区

LZ-Says：生活不止眼前的苟且~

前言

前几天写了一篇关于Android Study Material Design 十三之CoordinatorLayout交互动画，有兴趣的可以点击查看，而今天，则针对于CoordinatorLayout作一个详细具体的使用说明，希望大家阅读有所收获~

本文目标

阅读完本文，你可收获如下技能：

AppbarLayout与CoordinatorLayout搭配使用；
NestedScrollView与CoordinatorLayout搭配使用；
ViewPager+Fragment+TabLayout与CoordinatorLayout搭配使用；
CollapsingToolbarLayout折叠效果实现

CoordinatorLayout简述

CoordinatorLayout继承ViewGroup，主要作用如下：

通过协调并调度其包含的子控件或者布局当接收到触摸（一般指滑动）从而产生的一系列的动画效果。

当然实现的方式很多种，大体分为如下三种搭配滑动控件：

RecycleView
NestedScrollView
ViewPager

而关于CoordinatorLayout使用需要注意以下几点：

一、根布局替换为CoordinatorLayout；
二、给被滑动的控件设置app:layout_scrollFlags属性；
三、给滑动的控件设置app:layout_behavior属性；

而关于二三点之间的区别，可以理解为一个为内容载体，一个为内容体。

而我们接下来，将结合以上三种分别进行举例说明，让你更实实在在的掌握，了解。

讲解之前，我们需要了解一个谷歌之前挖的小坑~一起来看~

Android Study Material Design 十四之再战CoordinatorLayout_android_02

SnackBar弹出时遮挡FloatingActionButton

先来看一下实际效果图：

Android Study Material Design 十四之再战CoordinatorLayout_material-design_03

这个问题谷歌已经在最新的Design包中进行修复，我们只需要在将根布局变更为CoordinatorLayout即可，之后CoordinatorLayout将自动计算距离，从而解决遮挡问题。

修改后效果如下：

Android Study Material Design 十四之再战CoordinatorLayout_折叠效果_04

CoordinatorLayout常用属性简介

下面简单附上关键几个属性值以及所代表的含义(作用)：

app:layout_scrollFlags： 其状态包含如下三种选值

scroll：所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部；
enterAlways：设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”;
enterAlwaysCollapsed：当视图已经设置minHeight属性且使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度；
exitUntilCollapsed： 滚动退出屏幕，最后折叠在顶端。

app:layout_behavior： 绑定行为；
app:layout_collapseMode： 其状态包含如下三种选值

pin： 固定模式，在折叠的时候最后固定在顶端；
parallax： 视差模式，在折叠的时候会有个视差折叠的效果；
none： 正常模式。

app:layout_collapseParallaxMultiplier： 设置视差滚动因子，取值范围为:0.0f~1.0f；
app:collapsedTitleGravity： 折叠状态的标题位置；
app:expandedTitleGravity： 布局没有折叠的时候标题栏的位置；
app:statusBarScrim： 和状态栏颜色一致的沉浸式效果；
app:contentScrim： 内容部分的沉浸式效果；
app:tabGravity： tab对齐方式；
app:tabIndicatorColor： tab指示器颜色

撸码实现

我们依次实现四种效果：

一、AppbarLayout与CoordinatorLayout搭配使用

AppBarLayout，谷歌design包内神器之一，继承与LinearLayout，主要搭配一些控件实现酷炫效果。

布局文件如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   tools:context="com.materialdesignstudy.coordinatorlayout.behavior.BehaviorActivity">

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways" />
    </android.support.design.widget.AppBarLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/id_fab"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:layout_gravity="right|bottom"
        android:layout_margin="16dp"
        android:background="@drawable/fag_bg"
        android:onClick="displaySnackbar"
        android:src="@drawable/ic_love"
        app:layout_behavior="com.materialdesignstudy.coordinatorlayout.behavior.FabBehavior" />

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

效果也很nice，如下：

Android Study Material Design 十四之再战CoordinatorLayout_折叠效果_05

简单解析下如上布局：

1.根布局CoordinatorLayout包裹，使其内容具有使用CoordinatorLayout属性条件；

2.其次，设置ReacycleView的behavior属性为系统定义---app:layout_behavior="@string/appbar_scrolling_view_behavior"，使其具有可交互性质；

3.AppBarLayout包裹ToolBar，并给ToolBar设置监听范围，也就是app:layout_scrollFlags；

二、NestedScrollView与CoordinatorLayout搭配使用

NestedScrollView，存在与V4包内，ScrollView升级版。

布局如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.materialdesignstudy.coordinatorlayout.behavior.BehaviorActivity">

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

        <android.support.v7.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="180dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="30dp"
                app:cardBackgroundColor="#80f"
                app:cardCornerRadius="15dp"
                app:cardElevation="15dp"
                app:contentPadding="15dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="NestedScrollView"
                    android:textColor="#fff"
                    android:textSize="16sp" />

            </android.support.v7.widget.CardView>

            。。。 。。。

        </android.support.v7.widget.LinearLayoutCompat>

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|enterAlways" />
    </android.support.design.widget.AppBarLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/id_fab"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:layout_gravity="right|bottom"
        android:layout_margin="16dp"
        android:background="@drawable/fag_bg"
        android:onClick="displaySnackbar"
        android:src="@drawable/ic_love"
        app:layout_behavior="com.materialdesignstudy.coordinatorlayout.behavior.FabBehavior" />

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

效果如下：

Android Study Material Design 十四之再战CoordinatorLayout_android_06

此布局内容和上一个几乎无差别，只是使用者变成了NestedScrollView。

三、ViewPager+Fragment+TabLayout与CoordinatorLayout搭配使用

基于我们之前写的Tab

布局如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.materialdesignstudy.coordinatorLayout2.ViewPagerActivity">

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

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="HLQ_blog" />

        <android.support.design.widget.TabLayout
            android:id="@+id/id_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/blue"
            app:tabGravity="center"
            app:tabIndicatorColor="@color/colorPrimary_pink"
            app:tabIndicatorHeight="10dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/colorPrimary_pinkDark"
            app:tabTextColor="@color/colorPrimary_pink" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

子项Fragment只需要给NestedScrollView设置layout_behavior即可，如下：

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

效果如下：

Android Study Material Design 十四之再战CoordinatorLayout_xml_07

四、CollapsingToolbarLayout折叠效果实现

CollapsingToolbarLayout，折叠ToolBar，使用时需要注意以下几点：

记得设置AppBarLayout高度，一般为260dp比较好

布局关键源码：(主要基于属性实现)

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.materialdesignstudy.coordinatorlayout.behavior.BehaviorActivity">

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

        <android.support.v7.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="180dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="30dp"
                app:cardBackgroundColor="#80f"
                app:cardCornerRadius="15dp"
                app:cardElevation="15dp"
                app:contentPadding="15dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="CardView测试"
                    android:textColor="#fff"
                    android:textSize="16sp" />

            </android.support.v7.widget.CardView>

            。。。 。。。

        </android.support.v7.widget.LinearLayoutCompat>

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

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="200dp"
            app:collapsedTitleGravity="center_horizontal"
            app:contentScrim="@color/colorPrimary_pink"
            app:expandedTitleGravity="center"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            app:statusBarScrim="@color/colorPrimary_pink"
            app:title="I Love You">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/img"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/id_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                app:logo="@mipmap/ic_launcher_round" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/id_fab"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:layout_gravity="right|bottom"
        android:layout_margin="16dp"
        android:background="@drawable/fag_bg"
        android:onClick="displaySnackbar"
        android:src="@drawable/ic_love"
        app:layout_behavior="com.materialdesignstudy.coordinatorlayout.behavior.FabBehavior" />

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

实际显示效果：

Android Study Material Design 十四之再战CoordinatorLayout_android_08

GitHub查看地址

https://github.com/HLQ-Struggle/MaterialDesignStudy

Android Study Material Design 十四 之再战CoordinatorLayout

前言