5.0新布局CoordinatorLayout的酷炫动画

感谢下面作者，只有站在巨人的肩膀上才看的更远

CoordinatorLayout的使用如此简单 - huachao1001的专栏 - 博客频道 - CSDN.NET

http://blog.csdn.net/huachao1001/article/details/51554608

玩转AppBarLayout，更酷炫的顶部栏 - 简书

http://www.jianshu.com/p/d159f0176576

曾在网上找了一些关于CoordinatorLayout的教程，大部分文章都是把CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout 以及Toolbar等一起使用来介绍，这让我不知不觉在心中认为把这几个布局要一起使用，而且只是用于那种场景中。其实CoordinatorLayout的功能并不是局限于与AppBarLayout一起使用，它的功能强大着呢，本文主要对CoordinatorLayout的使用进行介绍，后面再写一篇文章将AppBarLayout和CollapsingToolBarLayout整合CoordinatorLayout一起。那么到底CoordinatorLayout有多好用，请往下感受吧~

CoordinatorLayout能做什么

在学习CoordinatorLayout之前，很有必要了解CoordinatorLayout能帮我们做什么，从名字上可以看出，就是帮我们协调子View的。怎么个协调法呢?就是它根据我们的定制，帮助我们协调各个子View的布局。我们先看一组动画图~

稍微解释一下这个动画，蓝色的矩形是我们一个普通View，黄色的Hello是一个Button。我们水平拖动蓝色矩形时，黄色Button查着与蓝色矩形相反方向移动；竖直移动蓝色矩形时，黄色也跟着竖直。简而言之：它们在竖直方向同步移动，在水平方向相反。

这个效果如果让你不用CoordinatorLayout去实现，应该没有任何问题，但是代码的耦合度应该非常大，你的代码必须要持有2个View的引用，然后在onTouchEvent里面做各种判断。如果我们想要实现的功能是，有更多的View要根据蓝色的View的移动相应作出响应，那么那就得在蓝色View的onTounchEvent里面针对其他的View处理各种逻辑。这耦合度未免太伤感了~

而CoordinatorLayout既然号称能帮我们协调子View的布局，我们接下来看看CoordinatorLayout如何实现~

CoordinatorLayout使用

CoordinatorLayout的使用核心是Behavior，Behavior就是执行你定制的动作。在讲Behavior之前必须先理解两个概念：Child和Dependency，什么意思呢？Child当然是子View的意思了，是谁的子View呢，当然是CoordinatorLayout的子View；其实Child是指要执行动作的CoordinatorLayout的子View。而Dependency是指Child依赖的View。比如上面的gif图中，蓝色的View就是Dependency，黄色的View就是Child，因为黄色的View的动作是依赖于蓝色的View。简而言之，就是如过Dependency这个View发生了变化，那么Child这个View就要相应发生变化。发生变化是具体发生什么变化呢？这里就要引入Behavior，Child发生变化的具体执行的代码都是放在Behavior这个类里面。

怎么使用Behavior呢，首先，我们定义一个类，继承CoordinatorLayout.Behavior<T>,其中，泛型参数T是我们要执行动作的View类，也就是Child。然后就是去实现Behavior的两个方法：

/**
* 判断child的布局是否依赖dependency
*/
   @Override
 public boolean layoutDependsOn(CoordinatorLayout parent, T child, View dependency) {
    boolean rs;
    //根据逻辑判断rs的取值
    //返回false表示child不依赖dependency，ture表示依赖
    return rs;  
}

/**
* 当dependency发生改变时（位置、宽高等），执行这个函数
* 返回true表示child的位置或者是宽高要发生改变，否则就返回false
*/
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, T child, View dependency) {
     //child要执行的具体动作
        return true;
}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

有了上面的概念后，我们看看具体怎么去实现吧~

为了响应跟随手指移动的操作，我们定义一个非常简单的View，这个View只响应跟随手指移动，将这个View作为Dependency。由于过于简单，这个View源码不粘贴，我们只需知道这个View的类名叫：TempView。

我们看看Behavior的使用：

package com.hc.studyCoordinatorLayout;

import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.widget.Button;

/**
 * Package com.hc.studyCoordinatorLayout
 * Created by HuaChao on 2016/6/1.
 */
public class MyBehavior extends CoordinatorLayout.Behavior<Button> {
    private int width;

    public MyBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
        DisplayMetrics display = context.getResources().getDisplayMetrics();
        width = display.widthPixels;
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, Button child, View dependency) {
        //如果dependency是TempView的实例，说明它就是我们所需要的Dependency
        return dependency instanceof TempView;
    }

    //每次dependency位置发生变化，都会执行onDependentViewChanged方法
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, Button btn, View dependency) {

        //根据dependency的位置，设置Button的位置

        int top = dependency.getTop();
        int left = dependency.getLeft();

        int x = width - left - btn.getWidth();
        int y = top;

        setPosition(btn, x, y);
        return true;
    }

    private void setPosition(View v, int x, int y) {
        CoordinatorLayout.MarginLayoutParams layoutParams = (CoordinatorLayout.MarginLayoutParams) v.getLayoutParams();
        layoutParams.leftMargin = x;
        layoutParams.topMargin = y;
        v.setLayoutParams(layoutParams);
    }


}

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

OK，现在我们为Button类指定了Dependency，并且定义好了跟随Dependency一直变化的动作（Behavior），接下来我们就要指定好为哪个具体的Button实例来绑定这些。方法很简单，直接在布局文件指定就好：

<?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.hc.studyCoordinatorLayout.MainActivity">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="300dp"
        android:layout_marginTop="300dp"
        android:background="#FFCC00"
        android:text="Hello"
        app:layout_behavior="com.hc.studyCoordinatorLayout.MyBehavior" />

    <com.hc.studyCoordinatorLayout.TempView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="300dp"
        android:layout_marginTop="300dp"
        android:background="#3366CC"  />
</android.support.design.widget.CoordinatorLayout>

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

是不是很简单呢？我们只需关注Behavior的编写就好了，把Child和Dependency之间的关系完全解耦了~

1Toolbar

Toobar主要是用来替换ActionBar的，换句话说，ActionBar能做的，Toolbar都能做。如果你对ActionBar的使用比较熟悉，你会发现Toolbar使用起来非常简单。ok，既然是替换，当然用Toolbar的时候就得先去把ActionBar给隐藏掉啦~

隐藏ActionBar的方法有很多，可以通过代码的方式隐藏，也可以通过配置文件的方式，我们主要是通过配置文件的方式来隐藏。在我们的styles.xml文件中的AppTheme标签中加入如下两行：

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

当然了，你也可以新建一个<style>标签，将上面两行代码加入，并且将这个新建的标签作为<application>的theme。还可以选择通过将AppTheme的parent设置为Theme.AppCompat.Light.NoActionBar的方式。方法很多，可以自己随便选。

接下来就是将Toolbar放入到布局文件（没啥好解释的）：

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

最后将Toobar作为“ActionBar”来用

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("这里是Title");
        toolbar.setSubtitle("这里是子标题");
        toolbar.setLogo(R.drawable.icon); 
        setSupportActionBar(toolbar);

可以对Toolbar设置Logo、标题、子标题等等~还有很多其他的设置，自己去慢慢玩，这里不提啦~。当然了，也可以在布局文件中设置这些，在布局文件设置就不写啦，hongyang大神有篇博客写的挺好的《 Android 5.x Theme 与 ToolBar 实战 》可以去参考一下。

看看效果：

Toolbar

如果Toolbar仅仅是用来对以往的ActionBar做一次替换，那也太没创意啦！完全没必要去替换了，因为它们表现出来的都是一样的，而且并没有让我们觉得用起来比ActionBar方便。那为啥要替换呢，总应该有他的理由吧：ActionBar是固定在顶部，并不能移动，我觉得这是最大的不好，而我们的ToolBar可以让我们随便摆放，就就可以带来很多灵活性和效果啦！

正如你所看的这样，Toolbar根本就不够看的，一点都不复杂。接下来我们继续学习在Toolbar上面再套一层父View，让Toolbar更有互动性。

2 AppBarLayout

AppBarLayout继承自LinearLayout，布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念，它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。

请注意：上面提到的某个可滚动View，可以理解为某个ScrollView。怎么理解上面的话呢？就是说，当某个ScrollView发生滚动时，你可以定制你的“顶部栏”应该执行哪些动作（如跟着一起滚动、保持不动等等）。那某个可移动的View到底是哪个可移动的View呢？这是由你自己指定的！如何指定，我们后面说。

2.1 AppBarLayout子View的动作

内部的子View通过在布局中加app:layout_scrollFlags设置执行的动作，那么app:layout_scrollFlags可以设置哪些动作呢？分别如下：

（1） scroll:值设为scroll的View会跟随滚动事件一起发生移动。

什么意思呢？简单的说，就是当指定的ScrollView发生滚动时，该View也跟随一起滚动，就好像这个View也是属于这个ScrollView一样。

一张gif足以说明：

scroll

对应的布局文件

<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="?android:attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll" />
</android.support.design.widget.AppBarLayout>

（2） enterAlways:值设为enterAlways的View,当ScrollView往下滚动时，该View会直接往下滚动。而不用考虑ScrollView是否在滚动。

看个动画片（Y(^o^)Y）（ToolBar高度设为：?android:attr/actionBarSize,app:layout_scrollFlags="scroll|enterAlways"）：

scroll|enterAlways

（3） exitUntilCollapsed：值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollView的内部滑动事件。

怎么理解呢？简单解释：在ScrollView往上滑动时，首先是View把滑动事件“夺走”，由View去执行滑动，直到滑动最小高度后，把这个滑动事件“还”回去，让ScrollView内部去上滑。看个gif感受一下（图中将高度设的比较大:200dp，并将最小高度设置为?android:attr/actionBarSize,app:layout_scrollFlags="scroll|exitUntilCollapsed"）：

scroll|exitUntilCollapsed

（4） enterAlwaysCollapsed：是enterAlways的附加选项，一般跟enterAlways一起使用，它是指，View在往下“出现”的时候，首先是enterAlways效果，当View的高度达到最小高度时，View就暂时不去往下滚动，直到ScrollView滑动到顶部不再滑动时，View再继续往下滑动，直到滑到View的顶部结束。

来个gif感受一下（图中将高度设的比较大:200dp，并将最小高度设置为?android:attr/actionBarSize,app:layout_scrollFlags="scroll|enerAlways|enterAlwaysCollapsed"）：

scroll|enerAlways|enterAlwaysCollapsed

2.2 将AppBarLayout与ScrollView关联起来

前面说了一直反复说“当ScrollView发生滚动时”，那么怎么将AppBarLayout与ScrollView关联起来呢？我们注意到，AppBarLayout与ScrollView之间动作“相互依赖”，这不就是我们上一篇《CoordinateLayout的使用如此简单 》所学的内容吗？把ScrollView和AppBarLayout作为CoordinateLayout的子View，然后编写一个Behavior，在这个Behavior里面判断当前的操作是应该让ScrollView时刻保持在AppBarLayout之下（即只要改变AppBarLayout的位置就可以一起滑动），还是应该让ScrollView内部滚动而不让AppBarLayout位置发生变化等等这些需求，都是可以在Behavior里面处理的。你可以去针对你的ScrollView编写Behavior。然而，我们看到我们的AppBarLayout事先的功能比较复杂，如果我们自己去定义这样的效果，代码非常复杂，还要考虑很多方面，好在Android帮我们写好啦，我们直接用就是了，这个ScrollView就是NestedScrollView，请注意，它并没有继承ScrollView，它继承的是FrameLayout，但是它实现的效果把它可以看成是ScrollView。

把NestedScrollView放入到我们的layout文件里面就可以啦~~~，很方便~

 <android.support.v4.widget.NestedScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

       <!--将你的内容放在这里-->

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

有没有注意到有个属性：app:layout_behavior="@string/appbar_scrolling_view_behavior",它就是指定Behavior的，appbar_scrolling_view_behavior对应的类的名称是：android.support.design.widget.AppBarLayout$ScrollingViewBehavior感兴趣的可以去分析源码。

好了，我们现在会用AppBarLayout啦~是不是发现用起来so easy!接下来我们把剩下CollapsingToolbarLayout的给"消化"掉！

3 CollapsingToolbarLayout

CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠（其实就是看起来像伸缩~）的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。CollapsingToolbarLayout主要包括几个功能（参照了官方网站上内容，略加自己的理解进行解释）：

(1) 折叠Title（Collapsing title）：当布局内容全部显示出来时，title是最大的，但是随着View逐步移出屏幕顶部，title变得越来越小。你可以通过调用setTitle函数来设置title。

(2)内容纱布（Content scrim）：根据滚动的位置是否到达一个阀值，来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.

(3)状态栏纱布（Status bar scrim)：根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusBarScrim(Drawable)来设置纱布图片，但是只能在LOLLIPOP设备上面有作用。

(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点）。将布局参数app:layout_collapseMode设为parallax

(5)将子View位置固定(Pinned position children)：子View可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。 将app:layout_collapseMode设为pin。

了解这些概念后，我们来看看布局吧~

<?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="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="wrap_content"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/material_img"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_collapseMode="pin"  />

        </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"
        android:paddingTop="50dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/my_txt"
            android:textSize="20sp" />

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

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

上面的都看得懂吧，每个陌生的属性都是讲过的哦，忘记了的话回头看，稍微解释一下，图片被设置为有视差的滑动，Toolbar设置为固定不动，另外，CollapsingToolbarLayout会对title进行放大和缩小，我们看看效果吧~

CollapsingToolbarLayout效果

如果你希望拖动过程中状态栏是透明的，可以在CollapsingToolbarLayout中加 app:statusBarScrim="@android:color/transparent"，并且在onCreate中调用getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)将状态栏设置为透明就好啦~

---

学习之后看看这个项目是怎么玩的吧，这个界面往上滑动会压缩成英toolbar,同时 CollapsingToolbarLayout的可以变回toolbar,下面是我普通的文本，你可以结合任何控件

< android.support.design.widget.CoordinatorLayout

android :id= "@+id/rootLayout"

android :layout_width= "match_parent"

android :layout_height= "match_parent" >

<!-- AppBar -->

< android.support.design.widget.AppBarLayout

android :id= "@+id/app_bar_layout"

android :layout_width= "match_parent"

android :layout_height= "200dp"

android :theme= "@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

< android.support.design.widget.CollapsingToolbarLayout

android :id= "@+id/collapsingToolbarLayout"

android :layout_width= "match_parent"

android :layout_height= "match_parent"

app :contentScrim= "?attr/colorPrimary"

app :expandedTitleGravity= "center_horizontal"

app :expandedTitleMarginBottom= "100dp"

app :expandedTitleTextAppearance= "@style/expandedTitle"

app :layout_scrollFlags= "scroll|exitUntilCollapsed" >

< android.support.v7.widget.Toolbar

android :id= "@+id/toolbar"

android :layout_width= "match_parent"

android :layout_height= "?attr/actionBarSize"

android :theme= "@style/ToolbarStyle"

app :layout_collapseMode= "pin" />

< RelativeLayout

android :layout_width= "match_parent"

android :layout_height= "match_parent"

android :background= "@drawable/me_bg"

android :scaleType= "centerCrop"

app :layout_collapseMode= "parallax"

app :layout_collapseParallaxMultiplier= "0.7" >

< TextView

android :layout_width= "300dp"

android :layout_height= "wrap_content"

android :layout_centerHorizontal= "true"

android :layout_marginTop= "120dp"

android :gravity= "center"

android :text= "@string/one_word"

android :textColor= "@color/black" />

</ RelativeLayout >

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

</ 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" >

< LinearLayout

android :layout_width= "match_parent"

android :layout_height= "match_parent"

android :orientation= "vertical"

android :padding= "20dp"

< TextView

android :layout_width= "wrap_content"

android :layout_height= "wrap_content"

android :text= "1027923424@qq.com"

android :textSize= "12sp"

android :textColor= "@color/colorPrimary" />

</ LinearLayout >

</ LinearLayout >

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

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

再看看这个，跟webview结合

< 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 :id= "@+id/app_bar_layout"

android :layout_width= "match_parent"

android :layout_height= "wrap_content" >

< android.support.design.widget.CollapsingToolbarLayout

android :id= "@+id/collapsingToolbarLayout"

android :layout_width= "match_parent"

android :layout_height= "match_parent"

app :contentScrim= "?attr/colorPrimary"

app :expandedTitleGravity= "center_horizontal"

app :expandedTitleMarginBottom= "-120dp"

app :layout_scrollFlags= "scroll|exitUntilCollapsed"

app :expandedTitleTextAppearance= "@style/expandedTitle" >

< RelativeLayout

android :layout_width= "match_parent"

android :layout_height= "match_parent"

app :layout_scrollFlags= "scroll|enterAlways" >

< ImageView

android :id= "@+id/iv_web_img"

android :layout_width= "match_parent"

android :layout_height= "200dp" />

< LinearLayout

android :layout_width= "match_parent"

android :layout_height= "wrap_content"

android :layout_alignParentBottom= "true"

android :background= "@color/trangery"

android :orientation= "vertical" >

< TextView

android :id= "@+id/tv_img_title"

android :layout_width= "match_parent"

android :layout_height= "wrap_content"

android :layout_above= "@+id/tv_img_source"

android :gravity= "center_vertical"

android :paddingLeft= "5dp"

android :paddingRight= "5dp"

android :textColor= "@color/white"

android :textSize= "20sp"

android :textStyle= "bold" />

< TextView

android :id= "@+id/tv_img_source"

android :layout_width= "match_parent"

android :layout_height= "wrap_content"

android :gravity= "end"

android :padding= "5dp"

android :textColor= "@color/darkgery"

android :textSize= "10dp" />

</ LinearLayout >

</ RelativeLayout >

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

</ 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/web_view"

android :layout_width= "match_parent"

android :layout_height= "match_parent" />

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

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