一、概述

CollapsingToolbarLayout 是 Android Material Components 库中的一个布局组件，主要用于创建可以在滚动过程中折叠和展开的应用栏（AppBar）。它通常与 AppBarLayout 一起使用，以便为应用的顶部区域提供丰富的交互效果。CollapsingToolbarLayout 是实现 Material Design 风格中的可折叠应用栏的重要工具，广泛应用于那些需要动态调整应用栏内容的场景。

CollapsingToolbarLayout 可以结合 Toolbar、ImageView 等控件一起使用，支持滚动时自动折叠、动态改变标题、背景等效果。它能够在用户滚动页面时提供丰富的视觉反馈，提高用户体验。

二、依赖与导入

在使用 CollapsingToolbarLayout 之前，确保你的项目已加入 Material Components 的依赖。可以在项目的 build.gradle 文件中添加以下内容：

1
2
3
dependencies {
    implementation 'com.google.android.material:material:1.4.0'
}

三、CollapsingToolbarLayout 基本用法

1. 在 XML 布局中使用 CollapsingToolbarLayout

CollapsingToolbarLayout 通常需要放置在 AppBarLayout 中，并与 Toolbar、ImageView 等控件一起使用，以实现折叠和展开的效果。以下是一个基本的例子，展示了如何在 XML 布局中使用 CollapsingToolbarLayout：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- CollapsingToolbarLayout 包裹 Toolbar 和其他视图 -->
    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary">

        <!-- Toolbar 用于显示标题 -->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:title="Collapsing Toolbar Example"
            android:theme="@style/ThemeOverlay.MaterialComponents.ActionBar" />

        <!-- 用于显示背景图像，当滚动时图像会折叠 -->
        <ImageView
            android:id="@+id/headerImage"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:src="@drawable/sample_image"
            android:scaleType="centerCrop" />
    </com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

在这个布局中：

  • CollapsingToolbarLayout 包裹了 Toolbar 和其他视图（例如 ImageView）。
  • layout_scrollFlags 控制视图滚动时的行为。scroll|exitUntilCollapsed 表示该视图会随着页面滚动而折叠，直到完全消失。
  • contentScrim 属性用于设置折叠时的背景颜色。

2. 配置折叠行为

CollapsingToolbarLayout 可以设置多个滚动标志，来控制折叠行为。这些标志与 AppBarLayout 的滚动标志相似。常见的滚动标志包括：

  • scroll：该视图在滚动时会跟随滚动视图一起移动。
  • exitUntilCollapsed：该视图会在滚动过程中折叠，直到完全消失。
  • enterAlways：该视图在滚动时始终显示，并进入屏幕。
  • snap：在滚动结束时，视图会立即折叠到固定位置。

你可以根据需要选择合适的滚动标志来实现不同的滚动和折叠效果。

1
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"

3. 滚动视图与 CollapsingToolbarLayout 配合

CollapsingToolbarLayout 通常与可以滚动的视图（如 RecyclerView 或 NestedScrollView）结合使用，以实现更流畅的滚动折叠效果。你可以通过设置 app:layout_behavior 属性，控制这些滚动视图与应用栏的交互行为。

1
2
3
4
5
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

@string/appbar_scrolling_view_behavior 是 Material Design 中预定义的滚动行为，能够让滚动视图与 AppBarLayout 协同工作。

四、CollapsingToolbarLayout 特性

1. 动态改变标题

CollapsingToolbarLayout 允许你在滚动过程中动态改变 Toolbar 上的标题。通常，折叠时显示一个简短的标题，展开时显示完整的标题。你可以通过 setTitle() 和 setExpandedTitleTextAppearance() 等方法动态更新标题。

1
2
3
4
5
6
7
8
9
val collapsingToolbarLayout = findViewById<CollapsingToolbarLayout>(R.id.collapsingToolbarLayout)
val toolbar = findViewById<Toolbar>(R.id.toolbar)

// 设置展开时的标题
collapsingToolbarLayout.title = "Collapsing Toolbar"

// 设置折叠时的标题样式
collapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.CollapsedTitleTextStyle)
collapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedTitleTextStyle)

2. 设置折叠的背景图像

CollapsingToolbarLayout 支持动态设置背景图像，当用户滚动时，图像会折叠或展开。你可以通过 setBackground() 方法设置背景，或者直接在 XML 中使用 ImageView 来实现。

1
2
val imageView = findViewById<ImageView>(R.id.headerImage)
collapsingToolbarLayout.setBackgroundResource(R.drawable.sample_image)

3. 支持渐变效果

你可以设置渐变效果，让 CollapsingToolbarLayout 在滚动时产生更平滑的折叠效果。例如，可以设置背景颜色的渐变、标题文字的渐变等。

1
2
app:contentScrim="?attr/colorPrimary"
app:statusBarScrim="?attr/colorPrimaryDark"

contentScrim 设置折叠时的背景颜色，statusBarScrim 设置状态栏的背景颜色。

五、使用场景

CollapsingToolbarLayout 适用于需要动态、交互性强的应用栏设计场景。以下是一些常见的应用场景：

  1. 社交媒体应用：展示用户头像、昵称以及个人资料，支持折叠展开效果，增强用户体验。
  2. 新闻或博客应用：展示文章标题、背景图片等内容，随着用户滚动，标题和图片动态变化。
  3. 电子商务应用：商品详情页面中，展示商品图片、价格、描述等内容，折叠和展开的动态效果增强了视觉效果。
  4. 图片浏览应用：展示大图或封面图像，折叠时可显示简短的标题或描述。

六、总结

CollapsingToolbarLayout 是 Android Material Design 中一个非常强大的组件，它使得应用栏能够在滚动时实现折叠与展开的效果，极大地提升了用户体验。它与 AppBarLayout 配合使用，支持丰富的交互效果，能够根据不同的场景动态调整应用栏的内容和视觉效果。

主要优点：

  • 动态折叠与展开：通过设置滚动标志，CollapsingToolbarLayout 能够在用户滚动时提供丰富的视觉反馈。
  • 支持自定义背景与标题：可以动态设置背景图片、标题文字的显示效果。
  • 与滚动视图协同工作：可以与 RecyclerView、NestedScrollView 等控件结合，实现流畅的滚动和折叠交互。

CollapsingToolbarLayout 是构建现代化、交互性强的 Android 应用中不可或缺的布局组件，它提供了极大的灵活性和可定制性，适合各种折叠式应用栏场景。