Android CoordinatorLayout使用

一、前言：

在android5.0的时候添加CoordinatorLayout、AppBarLayout、Toolbar、CollapsingToolbarLayout等等一系列的新控件，CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等可产生各种炫酷的折叠悬浮效果。

作为最上层的View
作为一个容器与一个或者多个子View进行交互

CoordinatorLayout顾名思义，协调者布局。所谓的协调者布局，它主要是协调谁，协调啥呢？我相信大家在学这个布局时，都会思考这两个问题。其实说的简单点，协调者布局主要协调child之间的联动。请注意我的措辞，child之间的联动。
可能有的同学对联动还是有点陌生，我简单的举一个例子，比如说，我们在滑动一个RecyclerView,存在一个View需要在RecyclerView滑动时做相应的动作，例如，位移变化，缩放变化等等。我相信这种场景还是非常常见的吧。这种场景就可以称之为child之间联动。
而CoordinatorLayout是怎么进行协调呢？主要依靠一个插件--Behavior。在CoordinatorLayout内部，每个child都必须带一个Behavior（其实不携带也行，不携带就不能被协调），CoordinatorLayout就根据每个child所携带的Behavior信息进行协调。
这里还需要提一句的是，Behavior不仅仅协助联动，而且还是接管了child的三大流程，有点类似于RecyclerView的LayoutManager。
而Behavior是怎么进行协助联动呢？这就涉及到嵌套滑动的相关知识，总的来说，Behavior包括整个CoordinatorLayout体系就是对嵌套滑动的应用和实现。所以，我们便知道了，嵌套滑动到底有多么重要了。
本文主要介绍CoordinatorLayout的基本使用，主要是介绍CoordinatorLayout与AppBarLayout的搭配使用。

二、使用：

1、依赖

  implementation 'com.google.android.material:material:1.0.0'
  implementation 'androidx.recyclerview:recyclerview:1.0.0'

2、AppBarLayout

它是继承与LinearLayout的，默认的方向是Vertical

图片.png

AppBarLayout是LinearLayout的子类，必须在它的子view上设置app:layout_scrollFlags属性或者是在代码中调用setScrollFlags()设置这个属性。它存在的意义就是Content布局文件中某个可垂直滚动的View发生滚动事件时，其内部的子View也跟随发生相应变化。
AppBarLayout的子布局有5种滚动标识(上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性)：

appbarLayout的滑动flag

名称	值	作用
NO_SCROLL	0x0	设置这个flag，将表示该View不能被滑动。也就是说不参与联动。
SCROLL	0x01	设置这个Flag，表示该View参与联动。具体效果需要跟其他Flag组合。
EXIT_UNTIL_COLLAPSED	0x02	设置这个Flag，表示当View被推出屏幕时，会跟着滑动，直到折叠到View的最小高度；同时只有在其他View(比如说RecyclerView)滑动到顶部才会展开。
ENTER_ALWAYS	0x02	设置这个Flag，不管是View是滑出屏幕还是滑进屏幕，该View都能立即响应滑动事件，跟随滑动。比如说，如果该View是折叠的，当RecyclerView向下滑动时，该View随时都能跟随展开；反之亦然。
ENTER_ALWAYS_COLLAPSED	0x04	在SCROLL_FLAG_ENTER_ALWAYS的基础上，该Flag增加了折叠到固定高度的限制。在View下拉过程中，首先会将该View显示minHeight的高度，RecyclerView在继续下拉（这里以RecyclerView为例）。注意，该Flag在SCROLL_FLAG_ENTER_ALWAYS前提下生效。
SNAP	0x08	该Flag表示View拥有吸附功能。比如说，当前滑动停止，View离底部更近，那么就会折叠；反之则会展开。

方法一

setScrollFlags(int)

方法二

app:layout_scrollFlags="scroll|enterAlways"

注意：AppBarLayout必须作为CoordinatorLayout的直接子View，否则它的大部分功能将不会生效，如layout_scrollFlags等。
效果图一:

111.gif

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    </android.support.design.widget.AppBarLayout>
 
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>
 
</android.support.design.widget.CoordinatorLayout>

** 思路分析：**

图片.png

那如果当我们的toolBar 等于 app:layout_scrollFlags=”scroll|snap”的时候，
layout_scrollFlags=scroll的时候，这个View会跟着滚动事件响应，
layout_scrollFlags=“snap”的时候在Scroll滑动事件结束以前，如果这个View部分可见，那么这个View会停在最接近当前View的位置。

222.gif

结合ViewPage,布局代码如下:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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="250dp">
 
 
        <ImageView android:layout_width="match_parent"
                   android:layout_height="200dp"
                   android:background="?attr/colorPrimary"
                   android:scaleType="fitXY"
                   android:src="@drawable/tangyan"
                   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:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>
 
    </android.support.design.widget.AppBarLayout>
 
 
    <android.support.v4.view.ViewPager
 
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>
 
</android.support.design.widget.CoordinatorLayout>

** 思路分析**

图片.png

其实相对于前一个例子，只是把摆放RecyclerView 的位置替换成ViewPager而已，为了有页面导航器的效果，再使用 TabLayout而已，而TabLayout 在我们滑动的时候最终会停靠在最顶部，是因为我们没有设置其layout_scrollFlags，即TabLayout是静态的

运行以后，即可看到以下的结果

3333.gif

3、CollapsingToolbarLayout

简单来说 ,CollapsingToolbarLayout是工具栏的包装器,它通常作为AppBarLayout的孩子。主要实现以下功能

Collapsing title（可以折叠的标题）
Content scrim（内容装饰），当我们滑动的位置到达一定阀值的时候，内容装饰将会被显示或者隐藏
Status bar scrim（状态栏布）
Parallax scrolling children，滑动的时候孩子呈现视觉特差效果
Pinned position children，固定位置的孩子

名称	值	作用
COLLAPSE_MODE_OFF	0	默认值，表示View不会有任何属性
COLLAPSE_MODE_PIN	1	当CollapsingToolbarLayout完全收缩之后，设置该Flag的View会保留在屏幕当中。
COLLAPSE_MODE_PARALLAX	2	设置该Flag的View会跟内容滚动，可以通过setParallaxMultiplier方法来设置视图差比率，其中0表示毫无视图差，完全跟内容滚动同步；1表示View完全不动。默认的视图差为0.5。

我们有两种方法可以设置这个常量,

方法一：在代码中使用这个方法

setCollapseMode(int collapseMode)

方法二：在布局文件中使用自定义属性

app:layout_collapseMode="pin"

结合ViewPager的视觉特差

布局代码:

<?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:background="@android:color/background_light"
    android:fitsSystemWindows="true"
>
 
    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >
 
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >
 
            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/tangyan"
                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"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />
        </android.support.design.widget.CollapsingToolbarLayout>
 
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>
    </android.support.design.widget.AppBarLayout>
 
 
    <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
 
    </android.support.v4.view.ViewPager>
 
 
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>
 
</android.support.design.widget.CoordinatorLayout>

**效果图如下: **

4444.gif

思路分析：

结构图如图片所示，先说明CollapsingToolbarLayout的变化
CollapsingToolbarLayout里面包含ImageView 和ToolBar，ImageView的app:layout_collapseMode=”parallax”，表示视差效果，ToolBar的 app:layout_collapseMode=”pin”，当这个TooBar到达 CollapsingToolbarLayout的底部的时候，会代替整个CollapsingToolbarLayout显示
接着说明TabLayout的变化
从前面的描述我们已经知道当没有指定app:layout_scrollFlags的时候，最终TabLayout会静止，不会随着滑动的时候消失不见

原文链接：https://blog.csdn.net/jxf_access/article/details/79564669