简介

• 一个FrameLayout
• 用于实现可折叠的标题栏，通常在子布局中放一个Toolbar
• 必须作为AppBarLayout 的子类，才能发挥出效果

xml属性

在CollapsingToolbarLayout中的部分属性

• collapsedTitleGravity ：折叠态标题位置
• collapsedTitleTextAppearance ：折叠态标题外观
• expandedTitleGravity ：扩展态标题位置
• expandedTitleMargin* ：扩展态标题的Margin。注意与expandedTitleGravity可能冲突
• expandedTitleTextAppearance ：扩展态后标题的外观
• contentScrim ：折叠态后Toolbar颜色
• scrimAnimationDuration ：收缩或者展开时颜色动画持续时间。需要设置contentScrim生效
• scrimVisibleHeightTrigger ：触发高度。小于的时候，展示contentScrim，否则不展示
• toolbarId ：折叠态的时候显示的Toolbar的id

在CollapsingToolbarLayout中还需要使用AppBarLayout中的属性

• app:layout_scrollFlags ：具体参考AppBarLayout中的Flag用法

在CollapsingToolbarLayout子view中用到的的属性(CollapsingToolbarLayout.LayoutParams)

• layout_collapseMode ：折叠模式。三种取值

  • COLLAPSE_MODE_OFF (none) ：等于没设置

  • COLLAPSE_MODE_PARALLAX (parallax) ：view将以视差方式滚动
    
    上面大图部分的父VIew是CollapsingToolbarLayout，对ImageView设置了parallax，效果就是上下各一半的减少，最后显示的位置是图片的正中央

  • COLLAPSE_MODE_PIN (pin) ：view固定在适当位置，直到达到CollapsingToolbarLayout底部。就相当于View被整个推上去或者拉下来的效果
    
    可以看到，整个图片就像是更随下面的RecycleView一样，直到到了折叠态，才分开。

• layout_collapseParallaxMultiplier ： 视差系数。layout_collapseMode设置为parallax才生效。不设置视差系数，默认为0.5，就是收缩时上下各自收缩一半。视差系数决定下面收缩比例。

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JJEbwBus-1592907404452)(/home/huang/文档/material文档/collapsing/30.gif)]

  如上图所示，对ImageView设置视差系数为0.2，可以看到收缩的时候，下面收缩的比较慢，上面收缩的比较快。实际上下面没收缩2px，上面就收缩8px，收缩速度是下面的4倍

使用

效果就是上面的几个动图，省略。

1. 创建xml文件

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   &lt;com.google.android.material.appbar.AppBarLayout
       android:id="@+id/appbar_lyt"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"&gt;
   
       &lt;com.google.android.material.appbar.CollapsingToolbarLayout
           android:id="@+id/collapsing_lyt"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:collapsedTitleTextAppearance="@style/CollapsingTitleTxtStyle"
           app:expandedTitleTextAppearance="@style/ExpandedTitleTxtStyle"
           app:layout_scrollFlags="scroll|exitUntilCollapsed"
           app:title="this is title"
           app:toolbarId="@id/toolbar"&gt;
   
           &lt;ImageView
               android:id="@+id/img"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:adjustViewBounds="true"
               android:scaleType="centerCrop"
               android:src="@drawable/test"
               app:layout_collapseParallaxMultiplier="0.2"
               app:layout_collapseMode="parallax" /&gt;
   
           &lt;androidx.appcompat.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               app:layout_collapseMode="pin"
               app:navigationIcon="@drawable/ic_chevron_left_black_24dp"
               app:title="ToolBar" /&gt;
   
       &lt;/com.google.android.material.appbar.CollapsingToolbarLayout&gt;
   
   &lt;/com.google.android.material.appbar.AppBarLayout&gt;
   
   &lt;androidx.recyclerview.widget.RecyclerView
       android:id="@+id/bar_recycleview"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
       app:layout_behavior="@string/appbar_scrolling_view_behavior" /&gt;
   </androidx.coordinatorlayout.widget.CoordinatorLayout>

   其中，两个style如下所示，

   <style name="TabTextStyle">
       <item name="android:textColor">#00ffff</item>
       <item name="android:textSize">30sp</item>
   </style>
   
   <style name="ExpandedTitleTxtStyle">
       <item name="android:textColor">#FFFF00</item>
   </style>

   遇到的坑：

   • Toolbar别设置标题，设置标题也没作用
   • Toolbar别乱设置位置，可能结果不太理想哦
   • Toolbar的layout_height设置成wrap_content死活出错，CollapsingToolbarLayout的标题就不出现了，不知道为啥，最后设置成**?attr/actionBarSize**或者具体的dp值就没问题了

2. Activity中

   class CollapsingToolBarActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_collapsing_toolbar)
   
       val rvAdapter = RvAdapter(this, Array(50) {
           "这是第 $it 条目"
       }.asList())
       bar_recycleview.adapter = rvAdapter
   }
   }