Android 5.0新控件 CoordinatorLayout | 协调布局 介绍及使用详情

Android 5.0新控件 CoordinatorLayout | 协调布局 介绍及使用详情

extends ViewGroup

implements NestedScrollingParent

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

Google官方对这个控件的大概意思这是一个加强型的帧布局，主要有两个两个用例方面：

1.作为顶层布局

2.调度协调子布局

那么到底CoordinatorLayout有什么功能呢！说得再好不如来张图

使用方法

CoordinatorLayout来自design兼容包，使用需要添加依赖。android studio 添加依赖如下：

dependencies {
    compile ‘com.android.support:design:24.2.0‘
}

1.首先，XML中添加布局文件

    "match_parent"
        android:layout_height="match_parent">

        "match_parent"
            android:layout_height="wrap_content">

            "@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorTheme"
                android:contentInsetStart="0dp"
                app:layout_scrollFlags="scroll|enterAlways|snap">

                "@+id/imageview_back"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingBottom="20dp"
                    android:paddingLeft="5dp"
                    android:paddingRight="20dp"
                    android:paddingTop="20dp"
                    android:src="@drawable/back"/>

                "wrap_content"
                    android:layout_height="wrap_content"
                    android:text="CoordinatorLayout"
                    android:textColor="@android:color/white"/>

            
        

        "@+id/recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    

2.仅仅这些布局文件，就可以实现当RecyclerView向上滑动时Toolbar隐藏，向下滑动时Toolbar显示，下面来介绍下其属性

CoordinatorLayout一般直接作为根布局使用，否则会有一些功能失效

CoordinatorLayout的使用核心是Behavior，Behavior就是执行你定制的动作。在讲Behavior之前必须先理解两个概念：Child和Dependency，什么意思呢？Child当然是子View的意思了，是谁的子View呢，当然是CoordinatorLayout的子View；其实Child是指要执行动作的CoordinatorLayout的子View。而Dependency是指Child依赖的View。比如上面的gif图中，RecyclerView就是Child，Toolbar就是Dependency，因为Toolbar的动作是依赖于RecyclerView。简而言之，就是如果RecyclerView发生了变化，Toolbar就要相应发生变化。发生变化是具体发生什么变化呢？这里就要引入Behavior，Child发生变化的具体执行的代码都是放在Behavior这个类里面，一般用系统定义好的Behavor就可以(也可以自定义)，这里我们在RecyclerView里面添加

        app:layout_behavior="@string/appbar_scrolling_view_behavior"

当CoordinatorLayout发现RecyclerView中定义了这个属性，它会搜索自己所包含的其他view，看看是否有view与这个behavior相关联。AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变。AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性，就可以在RecyclerView滚动事件发生的时候被触发
app:layout_scrollFlags属性里面必须至少启用scroll这个flag，这样这个view才会滚动出屏幕，否则它将一直固定在顶部。可以使用的其他flag有：

• snap:当滑动停止时但未达到展开或者收缩的状态，这个属性会判断距离谁最近，自动展开或者收缩（加上这个属性效果比较顺畅）

• enterAlways: 一旦向上滚动这个view就可见

• enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。

• exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。

更多方法请看官方文档

自定义Behavior

为了更好的理解，我将系统自带的Behavior通过自定义来实现，同时再给FloatActionBuuton添加一个自定义的Behavior（没有添加显示和隐藏的动画效果，看起来不是很美观，但是重点不在这，对吧！嘿嘿），先看效果图

1.首先，我们定义一个类，继承CoordinatorLayout.Behavior,其中，泛型参数T是我们要执行动作的View类，也就是Child

• AppbarLayout的Behavior

    public class AppBehavior extends CoordinatorLayout.Behavior<AppBarLayout> {

    private int directionChange;

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

    //判断滑动的方向 返回垂直滑动
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View directTargetChild, View target, int nestedScrollAxes) {
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

    //根据滑动的距离显示和隐藏 child
    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed) {
        if (dy > 0 && directionChange < 0 || dy < 0 && directionChange > 0) {
            directionChange = 0;
        }
        directionChange += dy;
        if (directionChange > child.getHeight() && child.getVisibility() == View.VISIBLE) {
            child.setVisibility(View.GONE);
        } else if (directionChange < 0 && child.getVisibility() == View.GONE) {
            child.setVisibility(View.VISIBLE);
        }
    }
}

• Fab的Behavior和AppbarLayout的Behavior一样，因为泛型中的类型不同，所以还得再写一遍

public class FabBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {

    private int directionChange;

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

    //判断滑动的方向 返回垂直滑动
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

    //根据滑动的距离显示和隐藏 child
    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dx, int dy, int[] consumed) {
        if (dy > 0 && directionChange < 0 || dy < 0 && directionChange > 0) {
            directionChange = 0;
        }
        directionChange += dy;
        if (directionChange > child.getHeight() && child.getVisibility() == View.VISIBLE) {
            child.setVisibility(View.GONE);
        } else if (directionChange < 0 && child.getVisibility() == View.GONE) {
            child.setVisibility(View.VISIBLE);
        }
    }
}

• 注意： public FabBehavior(Context context, AttributeSet attrs) {super(context, attrs);} 这个构造方法必须重写，因为CoordinatorLayout源码中parseBehavior()函数中直接反射调用这个构造函数

2.在XML中给dependency添加对应的Behavior

   "match_parent"
        android:layout_height="match_parent">

        "match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="com.coder.guoy.recyclerview.ui.coordinator.AppBehavior">

            "@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorTheme"
                android:contentInsetStart="0dp">

                "@+id/imageview_back"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingBottom="20dp"
                    android:paddingLeft="5dp"
                    android:paddingRight="20dp"
                    android:paddingTop="20dp"
                    android:src="@drawable/back"/>

                "wrap_content"
                    android:layout_height="wrap_content"
                    android:text="CoordinatorLayout"
                    android:textColor="@android:color/white"/>

            
        

        "@+id/recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        "@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="40dp"
            android:layout_marginRight="40dp"
            android:backgroundTint="@color/red"
            android:src="@drawable/back"
            app:borderWidth="0dp"
            app:elevation="10dp"
            app:fabSize="auto"
            app:layout_behavior="com.coder.guoy.recyclerview.ui.coordinator.FabBehavior"
            app:pressedTranslationZ="20dp"
            app:rippleColor="@color/colorWrite"
            />

    

OK，这就完成了自定义Behavior对AppbarLayout和Fab进行控制，不需要那些繁琐的监听和Touch事件，这里主要讲怎样自定义Behavior，并没有对UI效果进行友善的处理，如果对你有帮助，Do it by yourself!

• 注意:自定义的Behavior添加需要填写绝对路径（包名+类名）

Behavior中更多方法请看官方文档

总结

我们要明确三个概念及他们之间的关系:

• Behavior(行为)，child(子View:)和dependency(从属者：根据子view的改变执行相应的行为)

• 从属者添加定义好的行为，当子view发生变化时，从属者按照定义好的行为去发生变化，

完整代码点我下载

Thank you

• 以上仅本人学习中遇到的问题，如有更多意见欢迎随时交流 issues
• email:[email protected]