CoordinatorLayout打造折叠悬浮效果

一、CoordinatorLayout

是一个ViewGroup，遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等可产生各种炫酷的折叠悬浮效果。

二、AppBarLayout

是一个vertical的LinearLayout，其子View应通过下面两种方式来提供他们的Behavior。

1.代码方式：

setScrollFlags(int)

2.xmL方式:

app:layout_scrollFlags

具体的app:layout_scrollFlags有这么几个： scroll, exitUntilCollapsed, enterAlways, enterAlwaysCollapsed, snap

常量	常数值	解释
SCROLL_FLAG_ENTER_ALWAYS	4（0x00000004）	当进入（在屏幕上滚动）时，无论滚动视图是否也在滚动，视图都将滚动任何向下滚动事件。这通常被称为“快速返回”模式。
SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED	8（0x00000008）	`enterAlways`的另一个标志，它修改返回的视图，最初只回滚到它的折叠高度。一旦滚动视图到达其滚动范围的末尾，该视图的其余部分将滚动到视图中。折叠高度由视图的最小高度定义。
SCROLL_FLAG_EXIT_UNTIL_COLLAPSED	2（0x00000002）	退出（滚动屏幕）时，视图将滚动直到“折叠”。折叠高度由视图的最小高度定义。
SCROLL_FLAG_SCROLL	1（0x00000001）	视图将滚动与滚动事件直接相关。需要设置此标志才能使任何其他标志生效。如果在此之前的任何兄弟视图没有此标志，则此值无效
SCROLL_FLAG_SNAP	16（0x00000010）	在滚动结束时，如果视图仅部分可见，则它将被捕捉并滚动到其最近的边缘。例如，如果视图仅显示其底部25％，则它将完全滚出屏幕。相反，如果它的底部75％是可见的，那么它将完全滚动到视图中。

上面解释是官方翻译的，不好理解，可以直接看运行效果演示gif。

他必须严格地是CoordinatorLayout的子View，不然他一点作用都发挥不出来。

三、AppBarLayout下方的滑动控件

比如RecyclerView，NestedScrollView（与AppBarLayout同属于CoordinatorLayout的子View,并列的关系）,必须严格地通过在xml中指出其滑动Behavior来与AppBarLayout进行绑定。通常这样：

app:layout_behavior=\"@string/appbar_scrolling_view_behavior\"

四、CollapsingToolbarLayout

是一个专门用来包裹Toolbar的控件，里面可以放置一个imageView和一个toolbar然后轻松地实现：随着滑动，图片和toolbar的标题也有动画。

内部的子View一般都要加上属性：

app:layout_collapseMode=""

常用的是parallax，pin。

parallax是视差滚动，用在imageView, pin是固定，用在toolbar。

用setContentScrimColor(int)或者setContentScrim(drawable)来设置内容纱布，就是当折叠到只剩下Toolbar的时候，用一个另外的图片或者颜色来设置toolbar的背景。

他的title如果需要带有CollapsingToolbarLayout的动画的话，就要用collapsingToolbarLayout.setTitle(); 否则是没有动画的，其他的和toolbar平时一样。

六、代码

下面通过代码的方式看看效果

首先看看xml布局

<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=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

            <ImageView

                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="centerCrop"
                android:src="@drawable/kobe"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                app:title="科比"
                app:titleTextColor="@color/colorPrimary"
                app:layout_collapseMode="pin"
                >

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


    <android.support.v4.widget.NestedScrollView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/textContent"
            android:textSize="20sp" />

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


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

activity里面

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private CollapsingToolbarLayout collapsingToolbarLayout;

    /**
     * @param savedInstanceState
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = findViewById(R.id.toolbar);
        collapsingToolbarLayout = findViewById(R.id.collapsingToolbar);
        toolbar.setNavigationIcon(R.drawable.back);
        collapsingToolbarLayout.setTitle("科比背打科比哈哈哈哈哈哈哈");

    }

七、运行效果

app:layout_scrollFlags=”scroll|exitUntilCollapsed”
app:layout_scrollFlags=”scroll|enterAlways”
app:layout_scrollFlags=”scroll|enterAlwaysCollapsed”
app:layout_scrollFlags=”scroll|snap”

最后，附上Demo地址：https://github.com/Kanghanbin/CoordinatorLayoutDemo