Material Design 是 Google 推出的一种全新的设计语言，它提供了一套精美、流畅的视觉效果，让用户可以更加愉悦地使用应用程序。其中，CollapsingToolbarLayout 是 Material Design 中的一个非常重要的组件，它可以让应用程序的标题栏具有折叠效果，让用户有更加丰富的交互体验。本文将对 CollapsingToolbarLayout 进行详细的介绍，包括其使用方法、属性、事件等方面，帮助读者更好地掌握这个组件。
一、使用方法
CollapsingToolbarLayout 是一个可以实现标题栏折叠效果的布局容器，它可以包含一个 Toolbar 和一个可折叠的 View。要使用 CollapsingToolbarLayout，需要在布局文件中添加以下代码：
------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
----------
----------------------------
-----------------------------------
------------------------------------
------------------------------
-----------------------------
------------------------------------
--------------------------------------------------------在上面的代码中，CollapsingToolbarLayout 包含了一个 Toolbar 和一个 ImageView，其中 Toolbar 是固定在屏幕上的，而 ImageView 可以随着滚动而折叠。在布局文件中，需要设置 CollapsingToolbarLayout 的 layout_scrollFlags 属性，以指定滚动的方式。在上面的代码中，我们设置了 scroll 和 exitUntilCollapsed，表示当用户滚动屏幕时，CollapsingToolbarLayout 会滚动出屏幕，直到被折叠起来。同时，Toolbar 的 layout_collapseMode 属性设置为 pin，表示在 CollapsingToolbarLayout 折叠后，Toolbar 会固定在屏幕上方。
二、属性详解
CollapsingToolbarLayout 提供了许多属性来控制其行为和外观。下面是一些常用的属性：
1. contentScrim
contentScrim 属性可以设置 CollapsingToolbarLayout 折叠后的背景颜色。例如：
------------------------------------------------------
---
--------------------------------------
---
--------------------------------------------------------在上面的代码中，我们将 contentScrim 属性设置为 ?attr/colorPrimary，表示在折叠后，CollapsingToolbarLayout 的背景颜色与应用程序的主题颜色相同。
2. statusBarScrim
statusBarScrim 属性可以设置状态栏折叠后的背景颜色。例如：
------------------------------------------------------
---
--------------------------------------------
---
--------------------------------------------------------在上面的代码中，我们将 statusBarScrim 属性设置为 ?attr/colorPrimaryDark，表示在折叠后，状态栏的背景颜色与应用程序的主题颜色相同。
3. title
title 属性可以设置 CollapsingToolbarLayout 折叠前的标题文本。例如：
------------------------------------------------------
---
------------- -------
---
--------------------------------------------------------在上面的代码中，我们将 title 属性设置为 "My Title"，表示在折叠前，CollapsingToolbarLayout 的标题为 "My Title"。
4. expandedTitleMargin
expandedTitleMargin 属性可以设置 CollapsingToolbarLayout 折叠前的标题与 Toolbar 之间的距离。例如：
------------------------------------------------------
---
-------------------------------
---
--------------------------------------------------------在上面的代码中，我们将 expandedTitleMargin 属性设置为 16dp，表示在折叠前，CollapsingToolbarLayout 的标题与 Toolbar 之间的距离为 16dp。
5. expandedTitleMarginStart
expandedTitleMarginStart 属性可以设置 CollapsingToolbarLayout 折叠前的标题与 Toolbar 左侧之间的距离。例如：
------------------------------------------------------
---
------------------------------------
---
--------------------------------------------------------在上面的代码中，我们将 expandedTitleMarginStart 属性设置为 16dp，表示在折叠前，CollapsingToolbarLayout 的标题与 Toolbar 左侧之间的距离为 16dp。
6. expandedTitleMarginEnd
expandedTitleMarginEnd 属性可以设置 CollapsingToolbarLayout 折叠前的标题与 Toolbar 右侧之间的距离。例如：
------------------------------------------------------
---
----------------------------------
---
--------------------------------------------------------在上面的代码中，我们将 expandedTitleMarginEnd 属性设置为 16dp，表示在折叠前，CollapsingToolbarLayout 的标题与 Toolbar 右侧之间的距离为 16dp。
三、事件监听
CollapsingToolbarLayout 提供了两个事件监听器，分别是 OnOffsetChangedListener 和 OnScrimsVisibilityChangedListener。
1. OnOffsetChangedListener
OnOffsetChangedListener 用于监听 CollapsingToolbarLayout 的折叠状态。例如：
------------------------------------------------------ -------------------------------------- -
---------
------ ---- ---------------------------- ------------- --- --------------- -
-- -- ---------
-
---在上面的代码中，我们通过 addOnOffsetChangedListener 方法为 CollapsingToolbarLayout 设置了一个 OnOffsetChangedListener 监听器，当 CollapsingToolbarLayout 折叠时，会调用其中的 onOffsetChanged 方法，我们可以在这个方法中处理一些逻辑。
2. OnScrimsVisibilityChangedListener
OnScrimsVisibilityChangedListener 用于监听 CollapsingToolbarLayout 的背景颜色是否可见。例如：
---------------------------------------------------------------- ----------------------------------------------------------- -
---------
------ ---- --------------------------------- -------- -
-- -- ---------
-
---在上面的代码中，我们通过 setOnScrimsVisibilityChangedListener 方法为 CollapsingToolbarLayout 设置了一个 OnScrimsVisibilityChangedListener 监听器，当 CollapsingToolbarLayout 的背景颜色可见时，会调用其中的 onScrimsVisibilityChanged 方法，我们可以在这个方法中处理一些逻辑。
四、示例代码
下面是一个完整的使用 CollapsingToolbarLayout 的示例代码：
------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
-------------------------------------
-----------------------------------
---------------------------------
------------------------------------
---------------------------------------------------
----------
----------------------------
-----------------------------------
-----------------------------
------------------------------
-----------------------------
------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
---------
---------------------------------
-----------------------------------
------------------------------------
--------------------
----------------------------------------
-----------------------
----------------------------------
---------------------------------------------
--------------------------------------------------------
---------------------------------------------
-------------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
---------
-----------------------------------
------------------------------------
------------------------------------
---------------------------------------------
--------------------------------------------------在上面的代码中，我们使用了 CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout 和 Toolbar 等布局组件，实现了一个带有折叠效果的标题栏。其中，ImageView 是可折叠的 View，Toolbar 是固定在屏幕上方的 View，TextView 是 CollapsingToolbarLayout 中的标题文本。在布局文件中，我们设置了 CollapsingToolbarLayout 的一些属性，例如 contentScrim、expandedTitleMarginStart 等。同时，我们还使用了 NestedScrollView，实现了一个可以滚动的文本区域。在代码中，我们还为 CollapsingToolbarLayout 设置了一个 OnOffsetChangedListener 监听器，当 CollapsingToolbarLayout 折叠时，会调用其中的 onOffsetChanged 方法，我们在这个方法中实现了标题文本的渐变效果。
五、总结
CollapsingToolbarLayout 是 Material Design 中的一个非常重要的组件，它可以让应用程序的标题栏具有折叠效果，让用户有更加丰富的交互体验。本文对 CollapsingToolbarLayout 进行了详细的介绍，包括其使用方法、属性、事件等方面，希望读者可以通过本文更好地掌握这个组件，并在自己的应用程序中使用它，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6607b7dbd10417a2226509a9