Android 一步一步分析CoordinatorLayout.Behavior

在MD系列的前几篇文章中，通过基础知识和实战案例配合讲解的形式介绍了CoordinatorLayout与AppBarLayout、Toolbar、CollapsingToolbarLayout的使用，并实现了几种MD风格下比较炫酷的交互效果。学会怎么用之后，我们再想想，为什么它们之间能够产生这样的交互行为呢？其实就是因为CoordinatorLayout.Behavior的存在，这也是本文所要讲述的内容。至此，Android Material Design系列的学习已进行到第八篇，大家可以点击以下链接查看之前的文章：

关于Behavior

官网对于CoordinatorLayout.Behavior的介绍已经将它的作用说明得很清楚了，就是用来协调CoordinatorLayout的Child Views之间的交互行为：

Interaction behavior plugin for child views of CoordinatorLayout.

A Behavior implements one or more interactions that a user can take on a child view. These interactions may include drags, swipes, flings, or any other gestures.

之前学习CoordinatorLayout的使用案例时，用的都是系统的特定控件，比如design包中的FloatingActionButton、AppBarLayout等，而不是普通的控件，如ImageButton之类的，就是因为design包中的这些特定控件已经被系统默认定义了继承自CoordinatorLayout.Behavior的各种Behavior，比如FloatingActionButton.Behavior和
AppBarLayout.Behavior。而像系统的ToolBar控件就没有自己的Behavior，所以只能将其搁置到AppBarLayout容器里才能产生相应的交互效果。

看到这里就能清楚一点了，如果我们想实现控件之间任意的交互效果，完全可以通过自定义Behavior的方式达到。看到这里大家可能会有一个疑惑，就是CoordinatorLayout如何获取Child Views的Behavior的呢，为什么在布局中，有些滑动型控件定义了app:layout_behavior属性而系统类似FloatingActionButton的控件则不需要明确定义该属性呢？看完CoordinatorLayout.Behavior的构造函数就明白了。

        /**
         * Default constructor for instantiating Behaviors.
         */
        public Behavior() {
        }

        /**
         * Default constructor for inflating Behaviors from layout. The Behavior will have
         * the opportunity to parse specially defined layout parameters. These parameters will
         * appear on the child view tag.
         *
         * @param context
         * @param attrs
         */
        public Behavior(Context context, AttributeSet attrs) {
        }

CoordinatorLayout.Behavior有两个构造函数，注意看第二个带参数的构造函数的注释，里面提到，在这个构造函数中，Behavior会解析控件的特殊布局属性，也就是通过parseBehavior方法获取对应的Behavior，从而协调Child Views之间的交互行为，可以在CoordinatorLayout类中查看，具体源码如下：

    static Behavior parseBehavior(Context context, AttributeSet attrs, String name) {
        if (TextUtils.isEmpty(name)) {
            return null;
        }

        final String fullName;
        if (name.startsWith(".")) {
            // Relative to the app package. Prepend the app package name.
            fullName = context.getPackageName() + name;
        } else if (name.indexOf('.') >= 0) {
            // Fully qualified package name.
            fullName = name;
        } else {
            // Assume stock behavior in this package (if we have one)
            fullName = !TextUtils.isEmpty(WIDGET_PACKAGE_NAME)
                    ? (WIDGET_PACKAGE_NAME + '.' + name)
                    : name;
        }

        try {
            Map<String, Constructor<Behavior>> constructors = sConstructors.get();
            if (constructors == null) {
                constructors = new HashMap<>();
                sConstructors.set(constructors);
            }
            Constructor<Behavior> c = constructors.get(fullName);
            if (c == null) {
                final Class<Behavior> clazz = (Class<Behavior>) Class.forName(fullName, true,
                        context.getClassLoader());
                c = clazz.getConstructor(CONSTRUCTOR_PARAMS);
                c.setAccessible(true);
                constructors.put(fullName, c);
            }
            return c.newInstance(context, attrs);
        } catch (Exception e) {
            throw new RuntimeException("Could not inflate Behavior subclass " + fullName, e);
        }
    }

parseBehavior方法告诉我们，给Child Views设置Behavior有两种方式：

  1. app:layout_behavior布局属性
    在布局中设置，值为自定义Behavior类的名字字符串（包含路径），类似在AndroidManifest.xml中定义四大组件的名字一样，有两种写法，包含包名的全路径和以"."开头的省略项目包名的路径。

  2. @CoordinatorLayout.DefaultBehavior类注解
    在需要使用Behavior的控件源码定义中添加该注解，然后通过反射机制获取。这个方式就解决了我们前面产生的疑惑，系统的AppBarLayout、FloatingActionButton都采用了这种方式，所以无需在布局中重复设置。

看到这里，也告诉我们一点，在自定义Behavior时，一定要重写第二个带参数的构造函数，否则这个Behavior是不会起作用的。

根据CoordinatorLayout.Behavior提供的方法，这里将自定义Behavior分为两类来讲解，一种是dependent机制，一种是nested机制，对应着不同的使用场景。

dependent机制

这种机制描述的是两个Child Views之间的绑定依赖关系，设置Behavior属性的Child View跟随依赖对象Dependency View的大小位置改变而发生变化，对应需要实现的方法常见有两个：

        /**
         * Determine whether the supplied child view has another specific sibling view as a
         * layout dependency.
         *
         * <p>This method will be called at least once in response to a layout request. If it
         * returns true for a given child and dependency view pair, the parent CoordinatorLayout
         * will:</p>
         * <ol>
         *     <li>Always lay out this child after the dependent child is laid out, regardless
         *     of child order.</li>
         *     <li>Call {@link #onDependentViewChanged} when the dependency view's layout or
         *     position changes.</li>
         * </ol>
         *
         * @param parent the parent view of the given child
         * @param child the child view to test
         * @param dependency the proposed dependency of child
         * @return true if child's layout depends on the proposed dependency's layout,
         *         false otherwise
         *
         * @see #onDependentViewChanged(CoordinatorLayout, android.view.View, android.view.View)
         */
        public boolean layoutDependsOn(CoordinatorLayout parent, V child, View dependency) {
            return false;
        }

和

        /**
         * Respond to a change in a child's dependent view
         *
         * <p>This method is called whenever a dependent view changes in size or position outside
         * of the standard layout flow. A Behavior may use this method to appropriately update
         * the child view in response.</p>
         *
         * <p>A view's dependency is determined by
         * {@link #layoutDependsOn(CoordinatorLayout, android.view.View, android.view.View)} or
         * if {@code child} has set another view as it's anchor.</p>
         *
         * <p>Note that if a Behavior changes the layout of a child via this method, it should
         * also be able to reconstruct the correct position in
         * {@link #onLayoutChild(CoordinatorLayout, android.view.View, int) onLayoutChild}.
         * <code>onDependentViewChanged</code> will not be called during normal layout since
         * the layout of each child view will always happen in dependency order.</p>
         *
         * <p>If the Behavior changes the child view's size or position, it should return true.
         * The default implementation returns false.</p>
         *
         * @param parent the parent view of the given child
         * @param child the child view to manipulate
         * @param dependency the dependent view that changed
         * @return true if the Behavior changed the child view's size or position, false otherwise
         */
        public boolean onDependentViewChanged(CoordinatorLayout parent, V child, View dependency) {
            return false;
        }

具体含义在注释中已经很清楚了，layoutDependsOn()方法用于决定是否产生依赖行为，onDependentViewChanged()方法在依赖的控件发生大小或者位置变化时产生回调。dependent机制最常见的案例就是FloatingActionButton和SnackBar的交互行为，效果如下：

Behavior-01

系统的FloatingActionButton已经默认定义了一个Behavior来协调交互，如果不用系统的FAB控件，比如改用GitHub上的一个库futuresimple/android-floating-action-button，再通过自定义一个Behavior，也能很简单的实现与SnackBar的协调效果：

package com.yifeng.mdstudysamples;

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

/**
 * Created by yifeng on 16/9/20.
 *
 */
public class DependentFABBehavior extends CoordinatorLayout.Behavior {

    public DependentFABBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 判断依赖对象
     * @param parent
     * @param child
     * @param dependency
     * @return
     */
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof Snackbar.SnackbarLayout;
    }

    /**
     * 当依赖对象发生变化时,产生回调,自定义改变child view
     * @param parent
     * @param child
     * @param dependency
     * @return
     */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }
}

很简单的一个自定义Behavior处理，然后再为对应的Child View设置该属性即可。由于这里我们用的是第三方库，采用远程依赖的形式引入的，无法修改源码，所以不方便使用注解的方式为其设置Behavior，所以在布局中为其设置，并且使用了省略包名的方式：

<?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:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <include
            layout="@layout/include_toolbar"/>

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

    <com.getbase.floatingactionbutton.FloatingActionButton
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dp_16"
        android:layout_gravity="bottom|right"
        android:onClick="onClickFab"
        fab:fab_icon="@mipmap/ic_toolbar_add"
        fab:fab_colorNormal="?attr/colorPrimary"
        fab:fab_colorPressed="?attr/colorPrimaryDark"
        app:layout_behavior=".DependentFABBehavior"/>

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

这样，采用dependent机制自定义Behavior，与使用系统FAB按钮一样，即可与SnackBar控件产生如上图所示的协调交互效果。

比如我们再看一下这样一个效果：

Behavior-03

列表上下滑动式，底部评论区域随着顶部Toolbar的移动而移动，这里我们就可以自定义一个Dependent机制的Behavior，设置给底部视图，让其依赖于包裹Toolbar的AppBarLayout控件：

package com.yifeng.mdstudysamples;

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

/**
 * Created by yifeng on 16/9/23.
 *
 */

public class CustomExpandBehavior extends CoordinatorLayout.Behavior {

    public CustomExpandBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        int delta = dependency.getTop();
        child.setTranslationY(-delta);
        return true;
    }
}

布局内容如下：

<?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:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_56"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <include
            layout="@layout/include_toolbar"/>

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

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_56"
        android:layout_gravity="bottom"
        app:layout_behavior=".CustomExpandBehavior"
        android:padding="8dp"
        android:background="@color/blue">

        <Button
            android:id="@+id/btn_send"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="Send"
            android:layout_alignParentRight="true"
            android:background="@color/white"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/btn_send"
            android:layout_marginRight="4dp"
            android:padding="4dp"
            android:hint="Please input the comment"
            android:background="@color/white"/>

    </RelativeLayout>

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

注意，这里将自定义的Behavior设置给了底部内容的外层容器RelativeLayout，即可实现上述效果。

Nested机制

Nested机制要求CoordinatorLayout包含了一个实现了NestedScrollingChild接口的滚动视图控件，比如v7包中的RecyclerView，设置Behavior属性的Child View会随着这个控件的滚动而发生变化，涉及到的方法有：

onStartNestedScroll(View child, View target, int nestedScrollAxes)

onNestedPreScroll(View target, int dx, int dy, int[] consumed)

onNestedPreFling(View target, float velocityX, float velocityY)

onNestedScroll(View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed)

onNestedFling(View target, float velocityX, float velocityY, boolean consumed)

onStopNestedScroll(View target)

其中，onStartNestedScroll方法返回一个boolean类型的值，只有返回true时才能让自定义的Behavior接受滑动事件。同样的，举例说明一下。

通过查看系统FAB控件的源码可以知道，系统FAB定义的Behavior能够处理两个交互，一个是与SnackBar的位置交互，效果如上面的图示一样，另一个就是与AppBarLayout的展示交互，都是使用的Dependent机制，效果在之前的文章 -- Android CoordinatorLayout 实战案例学习《二》 中可以查看，也就是AppBarLayout 滚动到一定程度时，FAB控件的动画隐藏与展示。下面我们使用Nested机制自定义一个Behavior，实现如下与列表协调交互的效果：

Behavior-02

为了能够使用系统FAB控件提供的隐藏与显示的动画效果，这里直接继承了系统FAB控件的Behavior：

package com.yifeng.mdstudysamples;

import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by yifeng on 16/8/23.
 *
 */
public class NestedFABBehavior extends FloatingActionButton.Behavior {

    public NestedFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
                super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target,
                        nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            //系统FAB控件提供的隐藏动画
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            //系统FAB控件提供的显示动画
            child.show();
        }
    }
}

然后在布局中添加RecyclerView，并为系统FAB控件设置自定义的Behavior，内容如下：

<?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:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <include
            layout="@layout/include_toolbar"/>

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dp_16"
        android:src="@mipmap/ic_toolbar_add"
        app:layout_anchor="@id/rv_content"
        app:layout_anchorGravity="bottom|right"
        app:backgroundTint="@color/fab_ripple"
        app:layout_behavior="com.yifeng.mdstudysamples.NestedFABBehavior"/>

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

这样，即可实现系统FAB控件与列表滑动控件的交互效果。

@string/appbar_scrolling_view_behavior

这是一个系统字符串，值为：

android.support.design.widget.AppBarLayout$ScrollingViewBehavior

在CoordinatorLayout容器中，通常用在AppBarLayout视图下面（不是里面）的内容控件中，比如上面的RecyclerView，如果我们不给它添加这个Behavior，Toolbar将覆盖在列表上面，出现重叠部分，如图

behavior-removed

添加之后，RecyclerView将位于Toolbar下面，类似在RelativeLayout中设置了below属性，如图：

beharior-added

示例源码

我在GitHub上建立了一个Repository，用来存放整个Android Material Design系列控件的学习案例，会伴随着文章逐渐更新完善，欢迎大家补充交流，Star地址：

https://github.com/Mike-bel/MDStudySamples

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,311评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,339评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,671评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,252评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,253评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,031评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,340评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,973评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,466评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,701评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,254评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2赞 345

推荐阅读更多精彩内容