前言#
上一篇文章承诺会讲解折叠伸缩的效果,所以废话不多说
上gif#
一句话#
当你初次看见这样的效果可能会觉得实现起来比较麻烦。而我告诉你，只需要正确的配置XML中的控件即可.
上代码#
请结合讲解模块一起阅读
<?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"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
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.support.design.widget.CollapsingToolbarLayout
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">
<ImageView
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.support.v7.widget.Toolbar
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" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
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.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
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" />
</android.support.design.widget.CoordinatorLayout>
讲解#
关键控件###
-
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 - 设置折叠时状态栏的颜色