提起协调布局CoordinatorLayout，与之常一起使用的AppbarLayout、CollapsingToolbarLayout 以及Toolbar免不了也要争先恐后的出镜。
这不由得让我们产生一种错觉，好像使用CoordinatorLayout，一定
捎带着AppbarLayout、CollapsingToolbarLayout和Toolbar。
如果你真的这么想，可见你并不了解协调布局CoordinatorLayout的本质，
So 我们先说说它的本质：
CoordinatorLayout：协调子View的布局
看见这句是不是更糊涂了,没关系,我们来看一组动画
GIF1.gif
描述下此动画：一个button随着手势移动，而另一个图片，会跟随这个button而动。 由于图片随着button动，我们说，图片依赖于button的运动而动。那么二者的关系我们就了解了。
在协调布局中，我们把如动画中ImageView(需要依赖其他view而运行的view)称之为CoordinatorLayout
的Child ，而button称为Dependency。
Child：是指要执行动作的CoordinatorLayout的子View
Dependency：Dependency是指Child依赖的View。
Dependenc与child的关系： Child依赖Dependency。
简而言之， Dependency 发生了变化，那么Child 就要相应发生变化
而CoordinatorLayout的核心，就是协调二者的运动。协调二者的运动这件事，主要依靠Behavior。
Behavior就是执行你定制的动作： Child如何根据Dependency的变化而变化，具体逻辑都是存放于Behavior里。
Behavior的使用：
首先，我们定义一个类，继承CoordinatorLayout。Behavior<T>，其中，泛型参数T是我们要执行动作的
View类，也就是Child。然后就是去实现Behavior的两个方法：
Behavior有两个关键方法：
/**
* 判断child的布局是否依赖dependency
* @param parent
* @param child
* @param dependency
* @return true 表示依赖 false表示不依赖
*/
@Override
public boolean layoutDependsOn(CoordinatorLayout parent， View child， View dependency) {
//如果dependency是MoveView的实例，说明它就是我们所需要的Dependency
return dependency instanceof MoveView;
}
/**
* 每当dependency位置发生变化，都会执行onDependentView的Changed方法
* 当dependency发生变化时，(位置，宽高)，执行这个函数
* @param parent
* @param child
* @param dependency
* @return 返回true表示child的位置或者宽高会随着改变，否则返回false
*/
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent， View child， View dependency) {
//TODO
return true;
}
了解了以上概念，我们来看代码吧：
- 自定义一个MoveView，让它继承Button，重写onTouchEvent方法
@Override
public boolean onTouchEvent(MotionEvent event) {
float rawX = event.getRawX();
float rawY = event.getRawY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_MOVE:
this.setX(this.getX() + rawX - mLastX);
this.setY(this.getY() + rawY - mLastY);
break;
}
mLastX = event.getRawX();
mLastY = event.getRawY();
return true;
}
控件跟随手势移动的代码，别告诉我你看不懂...
- 继承Behavior并实现layoutDependsOn和onDependentViewChanged方法：
public class MyBehavior extends CoordinatorLayout.Behavior<ImageView>{
public MyBehavior(Context context, AttributeSet attrs) {
super(context,attrs);
}
/**
* 判断child的布局是否依赖dependency
* @param parent
* @param child
* @param dependency
* @return true 表示依赖 false表示不依赖
*/
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, ImageView child, View dependency) {
//如果dependency是MoveView的实例，说明它就是我们所需要的Dependency
return dependency instanceof MoveView;
}
/**
* 每当dependency位置发生变化,都会执行onDependentView的Changed方法
* 当dependency发生变化时,(位置,宽高),执行这个函数
* @param parent
* @param child
* @param dependency
* @return 返回true表示child的位置或者宽高会随着改变,否则返回false
*/
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, ImageView child, View dependency) {
child.setX(dependency.getX() + 100);
child.setY(dependency.getY()-20);
return true;
}
}
现在我们为ImageView指定了Dependency，并且定义好了跟随Dependency一直变化的动作（Behavior），接下来我们就要指定二者是怎样关联在一起的。
方法很简单，直接在布局文件指定：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.study.coodinatorlayout.MainActivity">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shb"
app:layout_behavior="com.study.coodinatorlayout.MyBehavior" />
<com.study.coodinatorlayout.MoveView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#FF00F7"
android:text="Hello"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#FFFFFF"
android:textStyle="bold"/>
</android.support.design.widget.CoordinatorLayout>
关键一句在这里
app:layout_behavior="com.study.coodinatorlayout.MyBehavior"
由此我们也可以看出，Behavior将Child和Dependency之间的关系完全解耦了。
有个坑要注意：
在CoordinatorLayout布局中，只有在CroodinatorLayout的根布局下的View(用其他RelativeLayout或者LinearLayout这样的ViewGroup嵌套无用)，才能为其设置依赖关系：
app：layout_behavior(此时才有自动提示哦，没有自动提示的也别费劲敲了，因为你写错地方了)
最后再总结下
CoordinatorLayout：是协调布局，协调其child View与dependencyView的运动
核心就两块:
1. childview和dependencyview：其中child的动作依赖与dependency的动作
2. 依赖关系我们通过继承Behavior来实现，关键要重写Behavior的两个方法
3. 二者关联通过布局文件属性app:layout_behavior
献上代码,github地址:https://github.com/Shmily701/CoordinatorLayout
此篇简单介绍什么是CoordinatorLayout，下一篇算是进阶版的，敬请期待...
网友评论