说清楚协调布局CoordinatorLayout

提起协调布局CoordinatorLayout,与之常一起使用的AppbarLayout、CollapsingToolbarLayout 以及Toolbar免不了也要争先恐后的出镜。
这不由得让我们产生一种错觉,好像使用CoordinatorLayout,一定
捎带着AppbarLayout、CollapsingToolbarLayout和Toolbar。
如果你真的这么想,可见你并不了解协调布局CoordinatorLayout的本质,
So 我们先说说它的本质:

CoordinatorLayout:协调子View的布局

看见这句是不是更糊涂了,没关系,我们来看一组动画


说清楚协调布局CoordinatorLayout_第1张图片
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是我们要执行动作的
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;
}

了解了以上概念,我们来看代码吧:

  1. 自定义一个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;
    }

控件跟随手势移动的代码,别告诉我你看不懂...

  1. 继承Behavior并实现layoutDependsOn和onDependentViewChanged方法:
public class MyBehavior extends CoordinatorLayout.Behavior{

    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),接下来我们就要指定二者是怎样关联在一起的。
方法很简单,直接在布局文件指定:




    

    

关键一句在这里
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,下一篇算是进阶版的,敬请期待...

你可能感兴趣的:(说清楚协调布局CoordinatorLayout)