Android Material Design 之 CoordinatorLayout

什么是 CoordinatorLayout

官方文档是这么描述的

CoordinatorLayout is a super-powered FrameLayout

CoordinatorLayout is intended for two primary use cases:
1. As a top-level application decor or chrome layout
2. As a container for a specific interaction with one or more child views

翻译一下

CoordinatorLayout 是一个加强版的 FrameLayout

主要用途有两个:
1. 用作应用的顶层布局管理器，也就是作为用户界面中所有UI控件的容器
2. 用作相互之间具有特定交互行为的UI控件的容器

Coordinator 是协调者的意思，协调者布局，其实就是协调各个子 View 的一个容器。

很多 Material Design 的效果都离不开 CoordinatorLayout。
比如 https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-usage 中的 Don’t block the floating action button 部分。
比如 https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-app-bar-scrollable-regions 中的各种滑动时隐藏画面顶部内容的效果。

本篇文章先介绍一下 CoordinatorLayout 的基本使用，之后的文章再讲怎么实现各种 Material Design 效果。

CoordinatorLayout 的简单使用

参考这篇博文中的例子，效果如下

例子中有一个 Button，有一个 TextView，拖动 Button，TextView 也跟着一起移动，这就是交互行为。

其实这是一个观察者模式，Button 是被观察者，TextView 是观察者，TextView 观察 Button 的移动，一旦移动了，TextView 也跟着移动。

看看代码是怎么实现的

首先添加 design library

compile 'com.android.support:design:25.4.0'

布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被观察者" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="观察者"
        app:layout_behavior=".FollowBehavior" />

</android.support.design.widget.CoordinatorLayout>

把 Button 和 TextView 放到一个 CoordinatorLayout 中，并且设置 TextView 的 app:layout_behavior 属性。

再来看看 FollowBehavior 类

public class FollowBehavior extends CoordinatorLayout.Behavior {

    public FollowBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        child.setX(dependency.getX() + 150);
        child.setY(dependency.getY() + 150);
        return true;
    }
} 

继承自 CoordinatorLayout.Behavior。

layoutDependsOn 是用来确定 dependent view 的，CoordinatorLayout 下面的所有子 View 都会去判断。例子中把 Button 作为本次交互的对象。

onDependentViewChanged 当 dependent view 发生变化时，这个方法会被调用，从而完成交互行为。例子中设置始终跟随 Button 移动。

控制 Button 移动的代码如下

public class MainActivity extends AppCompatActivity {

    float downEventX, downEventY;
    float downButtonX, downButtonY;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        findViewById(R.id.button).setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    downEventX = event.getRawX();
                    downEventY = event.getRawY();
                    downButtonX = v.getX();
                    downButtonY = v.getY();
                }

                if (event.getAction() == MotionEvent.ACTION_MOVE) {
                    v.setX(downButtonX + event.getRawX() - downEventX);
                    v.setY(downButtonY + event.getRawY() - downEventY);
                }

                return true;
            }
        });
    }
}

这样，一个简单的通过 CoordinatorLayout 来进行 View 的交互的例子就完成了。
View 的交互是通过 Behavior 来进行的，可以使用系统定义好的 Behavior，也可以像本例一样自定义 Behavior。

CoordinatorLayout 的神奇之处就在于它能够让它的子 View 们知道彼此的存在，CoordinatorLayout 作为一个通信的桥梁，通过 Behavior 进行通信，把一个 View 的变化通知给另一个 View。