Material Design 是 Google 所推出的设计风格，可以使用在 Android、Web、Flutter 等各个平台上。在 Android 端，AppBarLayout 是常见的顶部导航栏控件，而它的一个子控件——CollapsingToolbarLayout，更是用来实现 AppBarLayout 折叠效果的核心控件。在这篇文章中，我们将重点讨论 Material Design 下如何使用 CollapsingToolbarLayout。
CollapsingToolbarLayout 基本介绍
在我们介绍如何使用 CollapsingToolbarLayout 之前，我们先来了解一下它的一些基本概念和用途。
CollapsingToolbarLayout 主要用来实现两种导航栏效果：
- 当滚动时，导航栏会折叠成一个小图标；
- 当内容滚动到一定位置时，导航栏会逐渐变成全屏显示。
它的主要特性有：
- 它是 AppBarLayout 的一个子控件，可以纵向滚动；
- 它可以设置不同的状态，比如展开状态、折叠状态等；
- 它可以设置不同的效果，比如背景图透明度变化等。
CollapsingToolbarLayout 使用指导
接下来，我们将详细介绍在 Material Design 下如何使用 CollapsingToolbarLayout。
1. 配置依赖
在布局文件中使用 CollapsingToolbarLayout 前，需要进行相关依赖的配置。在 build.gradle 中添加以下依赖：
implementation 'com.android.support:design:28.0.0'
2. 定义布局文件
在布局文件中，可以如下定义 CollapsingToolbarLayout：
-- -------------------- ---- -------
------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------
--------------------------
-----------------------------------
------------------------------------
------------------------------
------------------------------------
---------------------------------- --
---- ------- --------- ---
--------------------------------------------------------上述代码中 app:layout_scrollFlags="scroll|exitUntilCollapsed" 是必要的，它表示在滚动时 CollapsingToolbarLayout 会跟随滚动。
子控件 ImageView 可以用来设置 Toolbar 的背景图，并且使用了 app:layout_collapseMode="parallax" 属性，表示背景图会有一个很小的视差移动的效果。
3. 状态与效果设置
在使用 CollapsingToolbarLayout 的过程中，需要根据实际情况对不同的状态和效果进行设置。比如：
- 点击 Toolbar 中某些控件，可以设置不同的状态变化；
- 根据滚动的距离，可以实现不同的效果，比如透明度变化等。
下面的示例代码演示了如何设置 Toolbar 背景图的透明度根据滚动距离而变化：
-- -------------------- ---- -------
------------ ------------ - ----------------------------------
----------------------- ----------------------- - --------------------------------------
----- --- ------------- - -----------------------------------
----- ----- ---------------- - ------------- - -----
------------------------------------------- -------------------------------------- -
---------
------ ---- ---------------------------- ------------- --- --------------- -
----- ---------- - ------------------------- - ------------------
-- -- ------- ------
--- ----- - ----- ----------- - -----
--------------------------------------------------------
-
---值得注意的是，在添加 OnOffsetChangedListener 监听器后，我们可以获取到 AppBarLayout 的总滚动范围，也就是最大的偏移量。这样我们就可以通过计算当前滚动距离与最大滚动范围的比例，来设置 Toolbar 背景图的透明度，实现一个在滚动时视觉效果逐渐透明的效果。
总结
在这篇文章中，我们从 CollapsingToolbarLayout 的基本概念和用途出发，详细介绍了在 Material Design 下如何使用 CollapsingToolbarLayout，以及如何设置不同的状态和效果。希望这篇文章对你有所帮助，也期待着更多的前端开发者加入到 Material Design 中来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65916536eb4cecbf2d68f3d1