在 Material Design 中，Toolbar 是一个非常重要的组件，用于展示应用程序的标题、操作按钮和其他重要信息。折叠式 Toolbar 能够将 Toolbar 的高度缩小，给用户更多的屏幕空间，并在用户滑动时自动展开或折叠。本文将详细介绍如何在 Material Design 中使用折叠式 Toolbar 的技巧，并包含示例代码，以帮助你更好地实现折叠式 Toolbar。
折叠式 Toolbar 的基本原理
在 Material Design 中，折叠式 Toolbar 的基本原理是利用 CoordinatorLayout 和 AppBarLayout 来实现。CoordinatorLayout 是一个强大的布局容器，它能够自动处理子布局之间的交互和动画效果。AppBarLayout 是一个特殊的 LinearLayout，用于展示 Toolbar 和其他与 Toolbar 相关的组件。
在实现折叠式 Toolbar 时，我们需要在 AppBarLayout 中添加两个子 View，分别是 Toolbar 和一个可滑动的 View，例如 NestedScrollView。然后，我们需要在 Toolbar 中添加 app:layout_scrollFlags 属性，用于指定 Toolbar 在滑动时的行为。常用的属性值有以下几种：
- scroll: Toolbar 在滑动时会被滚动出屏幕之外。
- enterAlways: 如果当前滑动操作是向下滑动，Toolbar 会立刻重新进入屏幕。
- exitUntilCollapsed: Toolbar 在滑动到一定高度后固定在顶部并折叠，不再继续滑动。
因此，我们可以通过指定不同的 layout_scrollFlags 来实现折叠式 Toolbar 的效果。
折叠式 Toolbar 的实现步骤
下面，我们将详细介绍折叠式 Toolbar 的实现步骤：
1. 添加依赖项
在实现折叠式 Toolbar 之前，我们需要在 build.gradle 文件中添加依赖项。具体方法如下：
implementation 'com.google.android.material:material:1.2.0'
2. 在布局文件中定义 CoordinatorLayout 和 AppBarLayout
在布局文件中，我们需要定义一个 CoordinatorLayout 和一个 AppBarLayout。具体方法如下：
-- -------------------- ---- -------
----------------------------------------------------
------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
--------------------------------
-----------------------------------
---------------------------------------------
----------------------------------------------
--------------------------------------------------
---- ---- ---
------------------------------------------------------3. 在 AppBarLayout 中添加 Toolbar 和可滑动的 View
在 AppBarLayout 中，我们需要添加 Toolbar 和一个可滑动的 View（例如 NestedScrollView）。具体方法如下：
-- -------------------- ---- -------
------------------------------------------------
--------------------------------
-----------------------------------
---------------------------------------------
----------------------------------------------
-----------------------------------------------------------
-------------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
----------------------------- --
-------------------------------------------------------------
--------------------------------------------------
---- ---- ---- ---
--------------------------------------
------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
---- -- ---
----------------------------------------在上面的代码中，我们使用了 CollapsingToolbarLayout，它是一个可折叠的 Toolbar，能够自动折叠到指定高度。然后，我们在 Toolbar 的父容器上使用了 app:layout_scrollFlags="scroll|exitUntilCollapsed" 属性，用于指定 Toolbar 在滑动时的行为。同时，在 Toolbar 上使用了 app:layout_collapseMode="pin"，用于指定 Toolbar 在折叠时固定在顶部。
4. 编写 Java 代码
最后，在 Java 代码中，我们需要获取 AppBarLayout，并将其设置为可滑动的。具体方法如下：
AppBarLayout appBarLayout = findViewById(R.id.app_bar_layout); appBarLayout.setExpanded(true);
在上述代码中，我们通过 findViewById() 方法获取 AppBarLayout，并将其设置为可滑动的。
完整示例代码
最后，我们提供一个完整的示例代码，包括布局文件和 Java 代码。你可以将它们复制到你的项目中，然后根据实际需要进行修改。
activity_main.xml
-- -------------------- ---- -------
----- ------------- ------------------
----------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
--------------------------------
-----------------------------------
---------------------------------------------
----------------------------------------------
-----------------------------------------------------------
-------------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
----------------------------- --
-------------------------------------------------------------
--------------------------------------------------
---- ---- ---- ---
--------------------------------------
------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
---------
-----------------------------------
------------------------------------
--------------------------------- --
----------------------------------------
------------------------------------------------------MainActivity.java
-- -------------------- ---- -------
------ -----------------------------------------
------ ------------------
------ ------------------------------------------------
------ ----- ------------ ------- ----------------- -
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
-- -- -----------------------
------------ ------------ - ----------------------------------
-------------------------------
-
-总结
本文详细介绍了在 Material Design 中使用折叠式 Toolbar 的技巧，包括布局文件和 Java 代码。折叠式 Toolbar 能够为用户提供更好的视觉体验和更多的屏幕空间，是一个非常实用的功能。如果你正在开发 Material Design 应用程序，并且需要实现折叠式 Toolbar，本文将能够帮助到你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e34f86f6b2d6eab3eb8f68