Android开发笔记（一百三十七）自定义行为Behavior

协调布局CoordinatorLayout能够让内部的子控件互相配合着移动，这跟以往孤立的控件运动截然不同，协调运动的结果，意味着App画面更加流畅、自然，也更符合日常生活中的动作场景。如果你对CoordinatorLayout的用法还不太了解的话，建议先浏览这篇博文熟悉一下《Android开发笔记（一百三十四）协调布局CoordinatorLayout》。

一般我们使用CoordinatorLayout，都是结合悬浮按钮FloatingActionButton、应用栏布局AppBarLayout或者可折叠工具栏布局CollapsingToolbarLayout，但这不表示CoordinatorLayout只能与这少数几个控件一起使用，事实上，只要定义了两个控件之间的互动行为，即使是TextView、ImageView这些普通控件，也能实现自动协调运动的效果。先上个图，说明一下自定义行为所支持的画面：

从这张女孩照镜子的动画可以看到，当拖动左边女孩头像时，右边镜子里的头像也随之靠近或者远离，颇似现实生活中的镜像运动。如果按照普通的实现方式，此种照镜子的动画效果，得给两个视图分别注册监听器，然后在A视图移动之际，同时触发B视图的移动行为。如此一来，两个视图之间的联系变得很紧密了，不但要分别改造这两个视图，而且还无法给其他视图复用。

正因为存在以上问题，所以MaterialDesign库专门设计了CoordinatorLayout，用来协调内部视图互相的行为，具体的行为定义模板叫做CoordinatorLayout.Behavior。也许读者对Behavior类还有些陌生，不过之前的几篇博文已经涉及到了部分知识，比如在博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》中，就提到给主页面的视图节点添加属性app:layout_behavior="@string/appbar_scrolling_view_behavior"，表示通知AppBarLayout捕捉RecyclerView的滚动操作。而字符串appbar_scrolling_view_behavior指向android.support.design.widget.AppBarLayout$ScrollingViewBehavior，它便是规定AppBarLayout滚动操作的自定义行为。

另外一个Design库的例子，则是悬浮按钮FloatingActionButton配合提示条Snackbar，博文《Android开发笔记（一百三十四）协调布局CoordinatorLayout》提到，Snackbar出现之时，FloatingActionButton会随着往上挪动；而Snackbar关闭的时候，FloatingActionButton也会随着向下移动。具体的动图如下所示：


查看FloatingActionButton的源码，发现该控件内部也有个Behavior类，下面是与互动行为有关的代码：

public boolean layoutDependsOn(CoordinatorLayout parent,FloatingActionButton child, View dependency) {return ((SNACKBAR_BEHAVIOR_ENABLED) && (dependency instanceof Snackbar.SnackbarLayout));}public boolean onDependentViewChanged(CoordinatorLayout parent,FloatingActionButton child, View dependency) {if (dependency instanceof Snackbar.SnackbarLayout)updateFabTranslationForSnackbar(parent, child, dependency);else if (dependency instanceof AppBarLayout) {updateFabVisibility(parent, (AppBarLayout) dependency, child);}return false;}

上述代码主要包含了两种意思：
1、两个函数都有三个参数，分别是做为父布局的CoordinatorLayout、做为子控件的FloatingActionButton、做为子控件依赖者的View。其中parent是页面布局文件的根节点，child是跟随运动的控件，dependency是带头运动的视图。dependency好比是广播操的指挥者，与之相对的child是广播操的表演者，dependency口里喊道“一二一一二一”，child就跟着踏步走。换句话说，child的任何运动，都得跟dependency一一配合；只有dependency动了，child才能跟着动。
2、两个函数中，layoutDependsOn用来判断当前的几个视图是否存在依赖关系，返回true表示存在依赖，反之则不存在依赖；也就是说，只有存在依赖关系的两个视图才会夫唱妇随，缺一不可。而onDependentViewChanged定义了依赖运动的具体对应规则，即dependency做某个动作时，child应该配合着做什么动作。

FloatingActionButton中的Behavior类定义的便是它跟依赖视图，即SnackbarLayout的运动关系。首先在layoutDependsOn方法中判断依赖视图是否为SnackbarLayout的示例，表示悬浮按钮会跟着提示条一块运动。然后在onDependentViewChanged方法中规定悬浮按钮配合提示条的运动行为，即提示条出现之时，悬浮按钮往上挪动；提示条消失之际，悬浮按钮向下移动。

只要明确了协调行为的原理与实现，自定义Behavior的过程就有章可循了。比如AppBarLayout节点的layout_behavior属性，便定义了AppBarLayout跟随主页面视图如RecyclerView的运动行为。再比如本文开头给的女孩照镜子动图，镜子里的头像会跟着女孩一齐靠近镜面，也一齐远离镜面；在该例子中，镜像就依赖于女孩，一旦女孩动了，镜像也跟着动。女孩照镜子是在水平方向上协调运动的例子，生活中还有在垂直方向上协调运动的例子，比如使用定滑轮吊起重物，滑轮一端绳子吊着重物，另一端绳子连着人力；人力拉动绳子，重物就被吊上来，人力松开绳子，重物就会掉下来。定滑轮升降的动图如下所示：


具体实现之时，则需做三处修改：
1、首先自定义一个图像控件，通过手势可以拖动该控件；
2、其次自定义一个Behavior，指定存在依赖关系的两种视图，在layoutDependsOn方法中规定两种视图的类型，在onDependentViewChanged方法中定义重物视图配合人力拉曳时的运动行为；
3、在布局文件中放置定滑轮、人力视图、重物视图，并给重物视图指定layout_behavior属性，说明重物视图的协调动作；


下面是可拖动图像控件的代码例子：

public class CoordinatorImageView extends ImageView {private final static String TAG = "CoordinatorImageView";private int mViewWidth, mViewHeight;private int mLastXPos, mLastYPos;private int mOrientation = LinearLayout.HORIZONTAL;public static final int STRETCH_NONE = 0;public static final int STRETCH_LEFT = 1;public static final int STRETCH_TOP = 2;public static final int STRETCH_RIGHT = 3;public static final int STRETCH_BOTTOM = 4;private int mStretchDirection = STRETCH_NONE;private boolean mReverser = false;public CoordinatorImageView(Context context) {this(context, null);}public CoordinatorImageView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public CoordinatorImageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public void setOrientation(int orientation) {mOrientation = orientation;}public int getOrientation() {return mOrientation;}public void setStretchDirection(int direction) {mStretchDirection = direction;}public int getStretchDirection() {return mStretchDirection;}public void setReverser(boolean reverser) {mReverser = reverser;}public boolean getReverser() {return mReverser;}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);mViewWidth = getMeasuredWidth();mViewHeight = getMeasuredHeight();}@Overridepublic boolean onTouchEvent(MotionEvent event) {int xPos = (int) event.getRawX();int yPos = (int) event.getRawY();if (event.getAction() == MotionEvent.ACTION_MOVE) {CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) getLayoutParams();int left = params.leftMargin + xPos - mLastXPos;int top = params.topMargin + yPos - mLastYPos;int right = params.rightMargin - (xPos - mLastXPos);int bottom = params.bottomMargin - (yPos - mLastYPos);if (mOrientation == LinearLayout.HORIZONTAL) {if (mStretchDirection == STRETCH_NONE) {params.leftMargin = left;} else {if (mStretchDirection == STRETCH_LEFT) {params.leftMargin = left;} else if (mStretchDirection == STRETCH_RIGHT) {params.rightMargin = right;}int tempWidth = mViewWidth + xPos - mLastXPos;if (getMinimumWidth() == 0 || tempWidth > getMinimumWidth()) {params.width = tempWidth;}}} else if (mOrientation == LinearLayout.VERTICAL) {if (mStretchDirection == STRETCH_NONE) {params.topMargin = top;} else {if (mStretchDirection == STRETCH_TOP) {params.topMargin = top;} else if (mStretchDirection == STRETCH_BOTTOM) {params.bottomMargin = bottom;}int tempHeight = mViewHeight + yPos - mLastYPos;if (getMinimumHeight() == 0 || tempHeight > getMinimumHeight()) {params.height = tempHeight;}}}setLayoutParams(params);requestLayout();}mLastXPos = xPos;mLastYPos = yPos;return true;}}

下面是自定义滑动行为的代码例子：

public class ImageViewBehavior extends CoordinatorLayout.Behavior<ImageView> {private final static String TAG = "ImageViewBehavior";private int mScreenWidth, mScreenHeight;public ImageViewBehavior(Context context, AttributeSet attrs) {super(context, attrs);mScreenWidth = DisplayUtil.getSreenWidth(context);mScreenHeight = DisplayUtil.getSreenHeight(context);}@Overridepublic boolean layoutDependsOn(CoordinatorLayout parent, ImageView child, View dependency) {return dependency instanceof CoordinatorImageView;}@Overridepublic boolean onDependentViewChanged(CoordinatorLayout parent, ImageView child, View dependency) {if (dependency instanceof CoordinatorImageView) {CoordinatorImageView depend = (CoordinatorImageView) dependency;int left = depend.getLeft();int top = depend.getTop();int right = depend.getRight();int bottom = depend.getBottom();int orientation = depend.getOrientation();int direction = depend.getStretchDirection();boolean reverser = depend.getReverser();CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) child.getLayoutParams();if (orientation == LinearLayout.HORIZONTAL) {params.width = depend.getMeasuredWidth();if (direction == CoordinatorImageView.STRETCH_NONE || direction == CoordinatorImageView.STRETCH_LEFT) {if (reverser) {params.rightMargin = left;} else {params.leftMargin = left;}} else if (direction == CoordinatorImageView.STRETCH_RIGHT) {if (reverser) {int minWidth = child.getMinimumWidth();int tempWidth = mScreenWidth - left- depend.getMeasuredWidth()+ depend.getMinimumWidth() - 50;if (minWidth == 0 || tempWidth > minWidth) {params.width = tempWidth;} else {params.width = minWidth;}} else {params.rightMargin = left;}}} else if (orientation == LinearLayout.VERTICAL) {params.height = depend.getMeasuredHeight();if (direction == CoordinatorImageView.STRETCH_NONE|| direction == CoordinatorImageView.STRETCH_TOP) {if (reverser) {params.bottomMargin = top;} else {params.topMargin = top;}} else if (direction == CoordinatorImageView.STRETCH_BOTTOM) {if (reverser) {int minHeight = child.getMinimumHeight();int tempHeight = mScreenHeight - top - depend.getMeasuredHeight()+ depend.getMinimumHeight() - 50;if (minHeight == 0 || tempHeight > minHeight) {params.height = tempHeight;} else {params.height = minHeight;}} else {params.bottomMargin = top;}}}child.setLayoutParams(params);}return true;}}

下面是定滑轮升降的布局例子：

<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" >    <ImageView        android:layout_width="200dp"        android:layout_height="200dp"        android:layout_gravity="top|center"        android:layout_marginTop="0dp"        android:scaleType="fitCenter"        android:src="@drawable/pulley_top" />        <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="top|right"        android:layout_marginRight="119dp"        android:layout_marginTop="150dp"        android:minHeight="140dp"        android:background="@drawable/pulley_right"        app:layout_behavior="com.example.exmbehavior.widget.ImageViewBehavior" />    <com.example.exmbehavior.widget.CoordinatorImageView        android:id="@+id/civ_pulley"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="top|left"        android:layout_marginLeft="122dp"        android:layout_marginTop="150dp"        android:minHeight="140dp"        android:background="@drawable/pulley_left" /></android.support.design.widget.CoordinatorLayout>

点击下载本文用到的自定义行为的工程代码


点此查看Android开发笔记的完整目录