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