前言#

上一篇文章承诺会讲解折叠伸缩的效果,所以废话不多说

上gif#

Gank2.gif

一句话#

当你初次看见这样的效果可能会觉得实现起来比较麻烦。而我告诉你，只需要正确的配置XML中的控件即可.

上代码#

请结合讲解模块一起阅读

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/main_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true">

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:fitsSystemWindows="true"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:id="@+id/collapsing_toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:fitsSystemWindows="true"

android:minHeight="?attr/actionBarSize"

app:contentScrim="?attr/colorPrimary"

app:expandedTitleMarginEnd="64dp"

app:expandedTitleMarginStart="40dp"

app:layout_scrollFlags="scroll|exitUntilCollapsed">

android:id="@+id/image_collapsing"

android:layout_width="match_parent"

android:layout_height="380dp"

android:fitsSystemWindows="true"

android:scaleType="fitXY"

android:transitionName="@string/transition_fab"

app:layout_collapseMode="parallax" />

android:id="@+id/toolbar_collapsing"

android:layout_width="match_parent"

android:layout_height="?android:actionBarSize"

app:layout_collapseMode="pin"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/recyclerview"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:id="@+id/fab_detail"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="@dimen/fab_margin"

android:clickable="true"

app:layout_anchor="@id/appbar"

app:layout_anchorGravity="bottom|right|end" />

讲解#

关键控件###

CoordinatorLayout

CoordinatorLayout作为整个布局的父布局容器。

给你的可以滑动的控件，例如RecyclerView设置如下属性：

app:layout_behavior=@string/appbar_scrolling_view_behavior

CoordinatorLayout还提供了layout_anchor 和 layout_anchorGravity属性一起配

合使用，可以用于设置FloatingActionButton的位置，此处我是放在appBar的右下角。

app:layout_anchor="@id/appbar"

app:layout_anchorGravity="bottom|right|end"

AppBarLayout

AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性，就可以在RecyclerView滚动事件发生的时候被触发某种行为

例如我给CollapsingToolbarLayout控件设置了 app:layout_scrollFlags="scroll|exitUntilCollapsed"

此刻如果没有这个属性，CollapsingToolbarLayout是不会折叠的

那么问题来了，layout_scrollFlags中的属性值除了可以触发折叠的行为，还有其它的属性值吗？并且各个属性的意义是什么？来吧，看下图

scroll

至少有一个scroll，即可滚动

enterAlways

向下滚动即可见。例如下拉时，立即显示Toolbar

exitUntilCollapsed

这个flag是定义何时收缩。

当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失

enterAlwaysCollapsed

这个flag是定义何时展开。

当你定义了一个最小高度minHeight， 同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始展示

snap:当一个滚动事件结束，它将根据显示百分比的大小自动滚动到收缩或展开。

CollapsingToolbarLayout

CollapsingToolbarLayout字面意思就是折叠toolBar。所以不用多说你一定可以想到这个东西就是完成折叠伸缩的玩意儿。

CollapsingToolbarLayout里面定义的view只要设置了app:layout_collapseMode属性，就可以控制子视图的折叠模式。那什么是折叠模式？

折叠模式分为两种：

“pin”： 固定模式。在收缩的时候最后固定在顶端(例如向上滚动的时候就固定toolBar)

“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。(例如向下滚动的时候就展开ImageView)

结束#

如果你认真阅读过我的文章，并且认真的看过xml布局

那么细心的你一定会发现在CollapsingToolbarLayout中还有以下属性。

以这样的方式讲解，主要是希望在你阅读的时候结合上下文去思考。

contentScrim - 设置当完全折叠(收缩)后的背景颜色。

expandedTitleMarginEnd - 没有扩张的时候标题显示的位置

expandedTitleMarginStart - 扩张的时候标题向左填充的距离。

statusBarScrim - 设置折叠时状态栏的颜色