首发于我的博客,转载请注明作者和原文链接。
CollapsingToolbarLayout通常用来在布局中包裹一个Toolbar，同时作为AppBarLayout的直接子View，才可以实现“折叠效果”的标题栏。
CollapsingToolbarLayout属性说明
app:title/setTitle()
ToolBar的标题，当CollapsingToolbarLayout展开时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。app:contentScrim/setContentScrim()
ToolBar被折叠到顶部固定时候的背景。app:statusBarScrim/setStatusBarScrim()
折叠后状态栏的背景。app:scrimVisibleHeightTrigger
设置收起多少高度时，显示ContentScrim的内容。app:scrimAnimationDuration
展开状态和折叠状态之间，内容转换的动画时间。
下面两个属性是作为CollapsingToolbarLayout的子View才能设置并生效的：
app:layout_collapseMode折叠模式
none跟随滚动的手势进行折叠。
parallax视差滚动，搭配layout_collapseParallaxMultiplier（视差因子）使用。
pin固定不动。app:layout_collapseParallaxMultiplier
视差因子，范围：0-1，默认0.5。
layout布局
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".collapsingtoolbarlayout.CollapsingToolbarLayoutActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:id="@+id/app_bar_layout"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/collapsing_toolbar_layout"
app:statusBarScrim="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="CollapsingToolbarLayout">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
android:scaleType="centerCrop"
android:src="@drawable/toolbar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
android:text="pin:固定不动"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="pin:固定不动"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
app:layout_collapseMode="parallax"
android:text="parallax:\n视差滚动默认0.5"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_collapseParallaxMultiplier="0.25"
app:layout_collapseMode="parallax"
android:text="parallax:\n视差滚动0.25"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
app:layout_collapseParallaxMultiplier="0.75"
app:layout_collapseMode="parallax"
android:text="parallax:\n视差滚动0.75"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_collapseMode="none"
android:text="none:跟随滚动"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:text="不设置:跟随滚动"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="?homeAsUpIndicator"
app:layout_collapseMode="pin"
app:title="Toolbar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="真正的Toolbar区域"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AppBarLayout底部固定布局"
android:padding="16dp"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/ipsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
注意
- 最顶层的布局必须是CoordinatorLayout。
- CoordinatorLayout的直接子View必须是一个可滑动的控件，并且内部有内容可以滑动。同时需要设置
app:layout_behavior。 - Toolbar的高度必须固定，不能设置为"wrap_content"，否则Toolbar不会滑动，也没有折叠效果。
- 需要注意的是这里几次设置
android:fitsSystemWindows="true"，分别在CoordinatorLayout、AppBarLayout、ImageView。这样之后达到的效果就是这张图片的内容可以延伸到状态栏。
