1CoordinatorLayout与behavior入门

最新推荐文章于 2022-02-17 18:40:24 发布

litefish

最新推荐文章于 2022-02-17 18:40:24 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/litefish/article/details/52311635

版权

android-support-design 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Android Design Support Library源码分析

11 篇文章 7 订阅

订阅专栏

前言

闲来无事，掏出AS熟练的new一个project，发现默认出来的activity点击之后有如下动画

fab 和snackbar

感觉很神奇，于是分析以下，这是怎么做到的？
这个activity的style是@style/AppTheme.NoActionBar，布局如下所示,这是目前android比较推崇的做法，基本理念就是脱离actionbar，在自己的布局里写toolbar，这样会提高更大的自由度，toolbar就变成了一个普通的view，我想放哪里放哪里，想怎么放怎么放（其实默认actionbar也是toolbar实现的，view层次结构可以参考AppCompatActivity的View树)。

<?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:fitsSystemWindows="true"
    tools:context="com.fish.a2.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

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

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

这一个xml中，CoordinatorLayout、FloatingActionButton、AppBarLayout都是陌生的。FloatingActionButton就是右下角的带阴影圆形按钮，可以简单看做一个ImageButton，如果对此控件有兴趣，可以阅读http://blog.csdn.net/lmj623565791/article/details/46678867,此文内鸿洋大神还自己实现了阴影效果。
我们再来看自动生成的部分代码，FloatingActionButton（后边简称fab）的点击就是弹出一个Snackbar，又出来一个新玩意，Snackbar可以看做是Toast的升级版本，没什么高深的，下边代码的意思就是点击fab弹出一个Snackbar，Snackbar像toast一样几秒后就消失。

      FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_SHORT)
                        .setAction("Action", null).show();
            }
        });

这些看起来都很简单，但是Snackbar弹出的时候，为何fab为何为往上跑呢？然后过了几秒钟，Snackbar消失了，fab又自动往下滑了，这2个动画是怎么做到的？从代码里看不出任何端倪.

CoordinatorLayout

先简单介绍下CoordinatorLayout，看官方文档
CoordinatorLayout is a super-powered FrameLayout.

CoordinatorLayout is intended for two primary use cases:

1.As a top-level application decor or chrome layout
2.As a container for a specific interaction with one or more child views

By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the DefaultBehavior annotation.

Behaviors may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate.

CoordinatorLayout是个超级强大的FrameLayout（其实他并不继承FrameLayout，只是里面的view布局和FrameLayout一样，一层层叠上去）

CoordinatorLayout主要有2种用法
1.作为app的rootview（contentview的child）
2.作为一个容器，包含几个view，这些view有特殊行为，互相作用

给CoordinatorLayout的子view指定behavior可以让他们互相作用互相依赖

behavior

概述

Behavior是一种新的view关系描述，CoordinatorLayout的一个子view可以依赖于另一个子view做出响应，比如有子view A和B，A依赖于B，一旦B发生变化（比如大小位置可见性改变），A就可以知道并且响应，这其实就是观察者模式。一个子view可以依赖于多个子view，比如A可以依赖于B,C这个依赖关系会在一个类内写明，这个类是CoordinatorLayout.Behavior的子类，可以自定义。

例子解释

还是有点难以理解，看上文的实际例子吧。
fab会因为Snackbar的弹出而上移，随着Snackbar的消失而下移，是因为fab依赖于Snackbar。这种依赖关系由FloatingActionButton内部的Behavior类决定的。
Behavior内有如下代码,看layoutDependsOn代码，dependency是SnackbarLayout就返回true（SNACKBAR_BEHAVIOR_ENABLED前提下），这就说明了fab依赖于SnackbarLayout，一旦SnackbarLayout发生变化，fab就会立刻知道并作出反应。

    @Override
        public boolean layoutDependsOn(CoordinatorLayout parent,
                FloatingActionButton child, View dependency) {
            // We're dependent on all SnackbarLayouts (if enabled)
            return SNACKBAR_BEHAVIOR_ENABLED && dependency instanceof Snackbar.SnackbarLayout;
        }

做出什么反应呢？来看onDependentViewChanged的代码，主要调用updateFabTranslationForSnackbar，注意updateFabTranslationForSnackbar 的L34、L35，这里触发了平移动画。这就是为什么snackbar出现或消失的时候，fab会有平移动画。


       @Override
        public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child,
                View dependency) {
            if (dependency instanceof Snackbar.SnackbarLayout) {
                updateFabTranslationForSnackbar(parent, child, dependency);
            } 
            return false;
        }

       private void updateFabTranslationForSnackbar(CoordinatorLayout parent,
                final FloatingActionButton fab, View snackbar) {
            final float targetTransY = getFabTranslationYForSnackbar(parent, fab);
            if (mFabTranslationY == targetTransY) {
                // We're already at (or currently animating to) the target value, return...
                return;
            }

            final float currentTransY = ViewCompat.getTranslationY(fab);

            // Make sure that any current animation is cancelled
            if (mFabTranslationYAnimator != null && mFabTranslationYAnimator.isRunning()) {
                mFabTranslationYAnimator.cancel();
            }

            if (fab.isShown()
                    && Math.abs(currentTransY - targetTransY) > (fab.getHeight() * 0.667f)) {
                // If the FAB will be travelling by more than 2/3 of it's height, let's animate
                // it instead
                if (mFabTranslationYAnimator == null) {
                    mFabTranslationYAnimator = ViewUtils.createAnimator();
                    mFabTranslationYAnimator.setInterpolator(
                            AnimationUtils.FAST_OUT_SLOW_IN_INTERPOLATOR);
                    mFabTranslationYAnimator.setUpdateListener(
                            new ValueAnimatorCompat.AnimatorUpdateListener() {
                                @Override
                                public void onAnimationUpdate(ValueAnimatorCompat animator) {
                                    ViewCompat.setTranslationY(fab,
                                            animator.getAnimatedFloatValue());
                                }
                            });
                }
                //这里制造动画来完成上移或者下移
                mFabTranslationYAnimator.setFloatValues(currentTransY, targetTransY);
                mFabTranslationYAnimator.start();
            } else {
                // Now update the translation Y
                ViewCompat.setTranslationY(fab, targetTransY);
            }

            mFabTranslationY = targetTransY;
        }

我们再具体分析下，为何snackbar出现的时候，fab上移，而snackbar消失的时候fab下移呢？
在snackbar出现的时候，会调用onDependentViewChanged()然后调用updateFabTranslationForSnackbar()，这里重点是L34代码，意思就是从currentTransY平移到targetTransY，关注下这2个变量。currentTransY怎么来的，看L9就是fab本身的TranslationY，那targetTransY呢？看L3，由getFabTranslationYForSnackbar得到。

所以看一下getFabTranslationYForSnackbar的代码，L5获取CoordinatorLayout内部被依赖的子view，在这个CoordinatorLayout内只有fab依赖于Snackbar.SnackbarLayout，所以Snackbar.SnackbarLayout是被依赖的子view，也只有这一个。看L10，此时view就是Snackbar.SnackbarLayout ，minOffset为0，ViewCompat.getTranslationY(view) 为0，所以最终得到的minOffset就是- view.getHeight()，其实就是snackbar的高度的相反数。我们假设-200好了。再回到updateFabTranslationForSnackbar内，此时targetTransY为-200，而currentTransY为0，那会发生什么？从0上移到-200，所以snackbar出现的时候，fab做了一个上移动画。

       private float getFabTranslationYForSnackbar(CoordinatorLayout parent,
                FloatingActionButton fab) {
            float minOffset = 0;
            //获取被依赖的子view
            final List<View> dependencies = parent.getDependencies(fab);
            for (int i = 0, z = dependencies.size(); i < z; i++) {
                final View view = dependencies.get(i);
                if (view instanceof Snackbar.SnackbarLayout && parent.doViewsOverlap(fab, view)) {
                //重点是这句代码
                    minOffset = Math.min(minOffset,
                            ViewCompat.getTranslationY(view) - view.getHeight());
                }
            }

            return minOffset;
        }

下面我们再可以分析snackbar消失的时候的场景，注意这里稍有不同，snackbar 出现调用了onDependentViewChanged，但是snackbar消失调用的是onDependentViewRemoved，但最终调的还是updateFabTranslationForSnackbar ,殊途同归啊，此时getFabTranslationYForSnackbar内dependencies为空（因为snackbar 不见了），所以最终返回0，所以targetTransY为0，而currentTransY位-200，所以就从-200下移到了0，下移就是这么产生的。

    @Override
        public void onDependentViewRemoved(CoordinatorLayout parent, FloatingActionButton child,
                View dependency) {
            if (dependency instanceof Snackbar.SnackbarLayout) {
                updateFabTranslationForSnackbar(parent, child, dependency);
            }
        }

snackbar出现回调到onDependentViewChanged，然后调用updateFabTranslationForSnackbar完成上移。
snackbar消失回调到onDependentViewRemoved，然后调用updateFabTranslationForSnackbar完成上移。

总结

简单的说CoordinatorLayout是容器，behavior是核心。behavior封装了CoordinatorLayout的子view随着其他子view的变化而变化的规则，主要是通过layoutDependsOn和onDependentViewChanged这2个方法。再看看CoordinatorLayout的名字，就是协调布局的意思，协调子view之间的关系，被协调的2个view必须是CoordinatorLayout的直接子view