CoordinatorLayout与CollapsingToolbarLayout实现视差滚动动画和Toolbar滚动

一、CoordinatorLayouy

CoordinatorLayouy是一个能够协调子布局的容器布局。常见的使用方法如下：

1.与AppbarLayout共同包裹Toolbar可以实现滚动隐藏Toolbar和重现Toolbar。

2.CoordinatorLayout+CollapsingToolbarLayout配合ImageView实现视差滚动效果

2.在CoordinatorLayout下使用FloatingActionButton动态协调浮动按钮（随着Snackbar的弹出而上下浮动）

本文将讲解如何实现Toolbar随着滚动实现隐藏和ImageView的视差滚动效果。实现的效果类似于知乎日报

开发准备

Gradle引入

compile ‘com.android.support:design:24.0.0’

---

布局

使用CollapsingToolbarLayout时，必须使用AppbarLayout包裹住CollapsingToolbarLayout和Toolbar；CoordinatorLayout则作为整个布局的容器。

注意:要实现这些通过滚动而产生的效果，主布局中应该放置带有滚动效果的layout组件，在这里我放了RecylerView(ListView好像不行)

"1.0" encoding="utf-8"?>
.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >

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

        .support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            "match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/italia"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>

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

            .support.v7.widget.Toolbar>

        .support.design.widget.CollapsingToolbarLayout>

    .support.design.widget.AppBarLayout>

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

    .support.v7.widget.RecyclerView
        android:id="@id/recycle_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        >
    .support.v7.widget.RecyclerView>

    

.support.design.widget.CoordinatorLayout>

参数讲解

先看CollapsingToolbarLayout下的

app:contentScrim=”?attr/colorPrimary”

作用是当整个视图收缩时，它Layout下的View的背景色应该变成什么颜色。最后Toolbar也会变成这种背景色。所以在这里直接把视图收缩时的背景色设置成Toolbar的标准色。

app:expandedTitleMarginStart=”48dp”

设置Tittle，当视图还没收缩时，Tittle离左边的距离

app:layout_scrollFlags=”scroll|exitUntilCollapsed”

scrollFlags，通过设置它的值可以实现不同的滚动模式，有四种值

1.scroll ，滚动。所有的Flag都要设置这个值，设置了之后可以向上滚动出屏幕。

2.enterAlways ，设置了这个值的话，该View会在向下滑动的时候立刻显示出来。

3.exitUntilCollapsed ，向上滑动时，所有组件都会滚出屏幕，但Toolbar除外。

4.enterAlwaysCollapsed ，如果你的View设置了最小高度（minHeight）,该View只会以这个最小高度滚出屏幕

ImageView下

app:layout_collapseMode=”parallax”.
app:layout_collapseParallaxMultiplier=”0.7”

第一行是设置折叠模式，设置为parallax，Pin是不折叠。为了使Toobar不折叠，在下面的Toolbar里我设置成了pin。

那第二行的layout_collapseParallaxMultiplier=”0.7”又是什么鬼呢，这个是视差滚动因子。视差滚动因子又是什么？假如我ImageView把这个值设置成0.7，那么当这个图片有70%被收缩时，你送开手指不点击屏幕，该图片会自动收缩。同理，设置成0是碰一下就全部自动收缩，设置成1是怎么滑它都不会自动收缩，需要你自己滑上去

这个值的范围是0~1，我们来看看效果

app:layout_collapseParallaxMultiplier设置成0,拉到一半都会自动收缩

app:layout_collapseParallaxMultiplier设置成1，不会自动收缩

其他细节设置

在演示图里，Title颜色从未收缩时的蓝色变为了白色，可以通过简单的两行代码实现

mCollapsingToolbar.setExpandedTitleColor(Color.BLUE);
mCollapsingToolbar.setCollapsedTitleTextColor(Color.WHITE);

---

如果只想实现Toolbar的隐藏和重现的话，只需要把Image去掉，CollapsingToolbarLayout也可以去掉。在Appbarlayout里重新设置一下scrollFlag

注意事项

在主布局中，我在LinearLayout里设置了

app:layout_behavior=”@string/appbar_scrolling_view_behavior”

如果不设置这个值，CollapsingToolbarLayout里的View将会遮挡住主布局里的内容切记主布局要设置这个值

---