CoordinateLayout 实践总结

CoordinateLayout
协调布局 ， 主要作用是协调子布局之间的关系。处理布局主要使用Behavior，Behavior就是执行你定制的动作。Behavior之前必须先理解两个概念：Child和Dependency

image.png

如上图，黄色button依赖蓝色方块，蓝色方块就是Dependency，黄色button是child，通过写behavior 可以定义二者之间的联系。

app:layout_behavior="@string/appbar_scrolling_view_behavior",它就是指定Behavior的，appbar_scrolling_view_behavior对应的类的名称是：android.support.design.widget.AppBarLayout$ScrollingViewBehavior

AppBarLayout
AppBarLayout继承自LinearLayout，布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念，它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。

请注意：上面提到的某个可滚动View，可以理解为某个ScrollView。怎么理解上面的话呢？就是说，当某个ScrollView发生滚动时，你可以定制你的“顶部栏”应该执行哪些动作（如跟着一起滚动、保持不动等等）。那某个可移动的View到底是哪个可移动的View呢？这是由你自己指定的！

内部的子View通过在布局中加app:layout_scrollFlags设置执行的动作，比如app:layout_scrollFlags="scroll|exitUntilCollapsed"

CollapsingToolbarLayout
CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠（其实就是看起来像伸缩~）的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。

CollapsingToolbarLayout主要包括几个功能：

(1) 折叠Title（Collapsing title）：当布局内容全部显示出来时，title是最大的，但是随着View逐步移出屏幕顶部，title变得越来越小。你可以通过调用setTitle函数来设置title。

(2)内容纱布（Content scrim）：根据滚动的位置是否到达一个阀值，来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.

(3)状态栏纱布（Status bar scrim)：根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusBarScrim(Drawable)来设置纱布图片，但是只能在LOLLIPOP设备上面有作用。

(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点）。将布局参数app:layout_collapseMode设为parallax

(5)将子View位置固定(Pinned position children)：子View可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。 将app:layout_collapseMode设为pin。
看一个布局，热卖排行：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <com.meituan.retail.c.android.image.mt.view.PaintView
                android:id="@+id/iv_scene_bg"
                android:layout_width="match_parent"
                android:layout_height="@dimen/home_leader_board_header_height"
                app:layout_collapseMode="parallax"
                app:pv_actualImageScaleType="fitXY"
                app:pv_placeholderImage="@drawable/home_img_food_market_top_placeholder"
                app:pv_placeholderImageScaleType="fitXY"/>

            <View
                android:id="@+id/home_tab_top"
                android:layout_width="match_parent"
                android:layout_height="5dp"
                android:layout_gravity="bottom"
                android:background="@drawable/home_bg_top_tab"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/mToolBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin"
                app:navigationIcon="@null">

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <com.meituan.retail.c.android.newhome.components.like.widget.xtablayout.XTabLayout
            android:id="@+id/xtab_layout"
            android:layout_width="match_parent"
            android:layout_height="43dp"
            android:background="@color/bgWhite"
            app:tabGravity="fill"
            app:x_indicatorCornerRadius="2dp"
            app:x_tabIndicatorColor="@color/skin_theme_color"
            app:x_tabIndicatorHeight="2.5dp"
            app:x_tabIndicatorWidth="24dp"
            app:x_tabItemGravity="center"
            app:x_tabMaxWidth="300dp"
            app:x_tabMinWidth="28dp"
            app:x_tabMode="scrollable"
            app:x_tabPaddingEnd="0dp"
            app:x_tabPaddingStart="0dp"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_board_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/home_tab_vp_normal_bg"
            app:layout_constraintTop_toBottomOf="@id/tab_layout">

        </android.support.v4.view.ViewPager>

    </LinearLayout>

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

refer:
https://www.jianshu.com/p/d159f0176576
https://blog.csdn.net/huachao1001/article/details/51554608
[图片上传失败...(image-ef17ee-1584890382514)]