# 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`效果。如下圖： 非完全展開：  完全展開：