前言#

---

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

上gif#

---

Gank2.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 - 设置折叠时状态栏的颜色