# 1. 前言 借助`CollapsingToolbarLayout`实现一个可折叠式标题栏的效果。顾名思义，`CollapsingToolbarLayout`是一个作用于`Toolbar`基础之上的布局，它也是由`Material`库提供的。`CollapsingToolbarLayout`可以让`Toolbar`的效果变得更加丰富，不仅仅是展示一个标题栏，而且能够实现非常华丽的效果。不过，`CollapsingToolbarLayout`是不能独立存在的，它在设计的时候就被限定只能作为`AppBarLayout`的直接子布局来使用。而`AppBarLayout`又必须是`CoordinatorLayout`的子布局。 # 2. 使用 这里梳理一下： - 使用`CoordinatorLayout`作为最外层布局； - 在`CoordinatorLayout`中嵌套一个`AppBarLayout`，宽度指定为`match_parent`，高度指定为`250dp`； - 在`AppBarLayout`中再嵌套一个`CollapsingToolbarLayout`； 也就是： ~~~ <?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="250dp"> <com.google.android.material.appbar.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:contentScrim="@color/gray" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <!--ImageView--> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/icon" app:layout_collapseMode="parallax" /> <!-- Toolbar --> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/teal_200" app:layout_collapseMode="pin" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> </androidx.coordinatorlayout.widget.CoordinatorLayout> ~~~ `app:layout_collapseMode`用于指定当前控件在`CollapsingToolbarLayout`折叠过程中的折叠模式，其中`Toolbar`指定成`pin`，表示在折叠的过程中位置始终保持不变，`ImageView`指定成`parallax`，表示会在折叠的过程中产生一定的错位偏移。 为了测试，不妨在其下放置一个可以滚动的列表，然后达到可以滚动，比如下面的案例： ~~~ <?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="150dp"> <com.google.android.material.appbar.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:contentScrim="@color/white" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <!--ImageView--> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/icon" app:layout_collapseMode="parallax" /> <!-- Toolbar --> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/teal_200" app:layout_collapseMode="pin" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <com.google.android.material.card.MaterialCardView android:layout_width="match_parent" android:layout_height="200dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/icon" android:scaleType="centerCrop" /> </com.google.android.material.card.MaterialCardView> <com.google.android.material.card.MaterialCardView android:layout_width="match_parent" android:layout_height="200dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/icon" android:scaleType="centerCrop" /> </com.google.android.material.card.MaterialCardView> <com.google.android.material.card.MaterialCardView android:layout_width="match_parent" android:layout_height="200dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/icon" android:scaleType="centerCrop" /> </com.google.android.material.card.MaterialCardView> <com.google.android.material.card.MaterialCardView android:layout_width="match_parent" android:layout_height="200dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/icon" android:scaleType="centerCrop" /> </com.google.android.material.card.MaterialCardView> <com.google.android.material.card.MaterialCardView android:layout_width="match_parent" android:layout_height="200dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/icon" android:scaleType="centerCrop" /> </com.google.android.material.card.MaterialCardView> <com.google.android.material.card.MaterialCardView android:layout_width="match_parent" android:layout_height="200dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/icon" android:scaleType="centerCrop" /> </com.google.android.material.card.MaterialCardView> </LinearLayout> </androidx.core.widget.NestedScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout> ~~~ 结果很容易就达到了收缩和放大的`ActionBar`效果。如下图： 非完全展开：  完全展开：