CoordinatorLayout的浅析

• 个人总体理解
• AppBarLayout的使用
• CollapsingToolbarLayout的使用
• Behavior

---

个人总体理解

CoordinatorLayout作为总布局使用，这时候你的滑动事件都已经被他拿到了，如果你想针对你的事件做一些处理，你可以通过设置CoordinatorLayout的子View的 Behaviors来调度子View。

AppBarLayout的使用

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="demo001.forhp.come.hp_demo_second.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:minHeight="190dp"
            app:layout_scrollFlags="scroll|snap">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/qq"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/a"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/a"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/a"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/a"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/a"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/a"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/a"/>

        </LinearLayout>

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

CollapsingToolbarLayout的使用

这个主要的属性是app:layout_scrollFlags。相关介绍在我的另一篇博客。传送门

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="demo001.forhp.come.hp_demo_second.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="第一个固定(pin)"
                android:textSize="40sp"
                app:layout_collapseMode="pin" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_scrolling2" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        />

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

Behavior

这个是重点内容。这篇博客先简单说一下，单开一篇详细讲解。

public class CustomBehavior extends Behavior<View> {

    public CustomBehavior(Context arg0, AttributeSet arg1) {
        super(arg0, arg1);
        // TODO Auto-generated constructor stub
    }

    /**
     * 用来决定需要监听哪些控件或者容器的状态（1.知道监听谁；2.什么状态改变）
     * CoordinatorLayout parent ，父容器
     * View child, 子控件---需要监听dependency这个view的视图们---观察者
       View dependency，你要监听的那个View
     */
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child,
            View dependency) {
        //还可以根据ID或者TAG来判断
        return dependency instanceof TextView||super.layoutDependsOn(parent, child, dependency);
    }

    /**
     * 当被监听的view发生改变的时候回调
     * 可以在此方法里面做一些响应的联动动画等效果。
     */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
            View dependency) {
        //获取被监听的view的状态---垂直方向位置
        int offset = dependency.getTop() - child.getTop();
        //让child进行平移
        ViewCompat.offsetTopAndBottom(child, offset);
        child.animate().rotation(child.getTop()*20);
        return true;
    }


}