体验Android折叠工具栏的魅力：CollapsingToolbarLayout详尽指南

Android

2023-11-30 12:00:30

在我的编码之旅中，Material Design中伸缩折叠工具栏一直是我的最爱。这种设计以其优雅的动画和直观的交互而闻名，营造出无缝的用户体验。如果您一直渴望在自己的Android应用程序中实现这种效果，那么您来对了地方。

在这篇文章中，我们将深入探讨CollapsingToolbarLayout，Android中用于创建折叠工具栏的关键控件。我们将从基本概念开始，然后逐步了解它的实现，并深入研究一些技巧，让您的工具栏脱颖而出。

CollapsingToolbarLayout概述

CollapsingToolbarLayout是一个布局控件，允许您创建可响应滚动事件并根据需要折叠或展开的工具栏。它提供了一系列属性和方法，让您自定义工具栏的外观和行为，包括：

collapsedTitleGravity：指定折叠标题的重力。
contentScrimColor：设置在折叠工具栏后面绘制的内容的遮罩颜色。
expandedTitleGravity：指定展开标题的重力。
expandedTitleMargin：设置展开标题的边距。
scrimAnimationDuration：指定遮罩动画的持续时间。

实现CollapsingToolbarLayout

为了在您的应用程序中实现CollapsingToolbarLayout，请按照以下步骤操作：

在您的布局XML文件中，将CollapsingToolbarLayout作为根布局添加。
将一个Toolbar控件作为CollapsingToolbarLayout的子视图添加。
将一个可滚动的内容视图（如RecyclerView）作为CollapsingToolbarLayout的子视图添加。
设置CollapsingToolbarLayout的属性，如collapsedTitleGravity、contentScrimColor和expandedTitleMargin。

自定义您的CollapsingToolbarLayout

一旦您有了基本的CollapsingToolbarLayout，就可以使用各种技术对其进行自定义：

**添加折叠- ** 使用折叠指示符：**设置app:layout_scrollFlags属性为"scroll|enterAlways"，可以显示一个指示符，当工具栏折叠时该指示符会消失。
添加parallax效果： 通过设置app:layout_collapseMode属性为"parallax"，您可以创建一种视差效果，其中内容视图在工具栏折叠时向下移动。

CollapsingToolbarLayout示例

为了更好地理解CollapsingToolbarLayout的使用，让我们创建一个模仿Bilibili视频详情页折叠工具栏效果的示例：

<androidx.coordinatorlayout.widget.CoordinatorLayout>
    <com.google.android.material.appbar.CollapsingToolbarLayout>
        <androidx.appcompat.widget.Toolbar>
            <!-- 设置标题 -->
        </androidx.appcompat.widget.Toolbar>
        <com.google.android.material.imageview.MaterialCardView>
            <!-- 设置背景图像 -->
        </com.google.android.material.imageview.MaterialCardView>
    </com.google.android.material.appbar.CollapsingToolbarLayout>
    <androidx.recyclerview.widget.RecyclerView>
        <!-- 设置内容列表 -->
    </androidx.recyclerview.widget.RecyclerView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>