首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android开发笔记(一百三十七)自定义行为Behavior

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

作者头像
aqi00
发布2019-01-18 14:51:34
1.1K0
发布2019-01-18 14:51:34
举报
文章被收录于专栏:老欧说安卓老欧说安卓

协调布局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;
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		mViewWidth = getMeasuredWidth();
		mViewHeight = getMeasuredHeight();
	}

	@Override
	public 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);
	}

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

	@Override
	public 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开发笔记的完整目录

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年03月06日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档