本文将介绍在 Material Design 中如何使用 CollapsingToolbarLayout 实现可折叠的 Toolbar 效果，并提供了实际使用示例和代码实现。
什么是 CollapsingToolbarLayout
CollapsingToolbarLayout 是 Android Design Support Library 中提供的一个组件，可以用于实现可折叠的 Toolbar 效果，它可以通过监听滚动事件来实现 Toolbar 的展开和折叠。
如何使用 CollapsingToolbarLayout
在实际使用 CollapsingToolbarLayout 时，我们需要注意以下几点：
1. 添加支持库
CollapsingToolbarLayout 是 Android Design Support Library 中的一个组件，因此我们需要在项目的 build.gradle 文件中添加以下依赖：
dependencies {
implementation 'com.google.android.material:material:1.2.1'
}2. 布局文件中添加 CollapsingToolbarLayout
在布局文件中添加 CollapsingToolbarLayout 和 Toolbar，通过设置其 layout_scrollFlags 属性来指定其滚动时的行为。
-- -------------------- ---- -------
- ---------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------
---- - ---- ---
------------------------------------------------
-----------------------------------
-------------------------------------
-----------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
--------------------------------------
---------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
-------------------------------------------------------------
--------------------------------------------------
---- - ---- ---
-- ----------------------------------------------------3. 设置滚动事件监听器
在 Activity 或 Fragment 中，通过设置 AppBarLayout 的 OnOffsetChangedListener 来监听 CollapsingToolbarLayout 的滚动事件。
-- -------------------- ---- -------
------------ ------------ - --------------------------------
----------------------- ----------------------- - -------------------------------------------
------------------------------------------- -------------------------------------- -
---------
------ ---- ---------------------------- ------------- --- --------------- -
--- --------- - -----------------------------------
----- ---------- - ------- ------------------------ - ------- ----------
-- ----------- -- -- -- ------- -
-- ----
------ - ------
- ---- -- ----------- - -- -- -------- -
-- ----
------ - -----
-
-
---实践示例
布局文件
-- -------------------- ---- -------
----- ------------- ------------------
- ---------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
----------------------------------------------
-----------------------------------
------------------------------------
------------------------------
------------------------------------------------
------------------------------
-----------------------------------
-------------------------------------
-----------------------------------------------------------
-----------------------------------------
-----------------------------------
------------------------------------
----------------------------------------
--------------------------------------
---------------------------------------------------
----------
--------------------------
-----------------------------------
-----------------------------
------------------------------
---------------------------------
---------------------------------- --
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
----------------------------- --
-------------------------------------------------------------
--------------------------------------------------
---------
---------------------------
-----------------------------------
------------------------------------
-------------------------------
----------------------
---------------------------------
------------------------------------------------------------ --
-- ----------------------------------------------------Java 代码
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ------- ------ - -----
------- --- ---------------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------------------------------------------------
---------------------------------------------------------------------------------
----- ------------ ------------ - --------------------------------
----- ----------------------- ----------------------- - -------------------------------------------
------------------------------------------- -------------------------------------- -
---------
------ ---- ---------------------------- ------------- --- --------------- -
-- --------------- -- -- -
-------------- - -----------------------------------
-
--- --- - -------------------------
-- ---- -- - -- --- -- --------------- -
----- ----- - ------- --- - ---------------
----- ----- - ----- - ----
-------------------------------------------------------------- ------ ---- --- -----
-- ------ -- --- -
-- -------- -
------ - ------
-------------------------------------
-------------------------------------------------------
-
- ---- -
-- --------- -
------ - -----
-----------------------------------------
----------------------------------------------------
-
-
-
-
---
-
-总结
通过 CollapsingToolbarLayout 的使用，我们可以在 Material Design 开发中实现可折叠的 Toolbar 效果，通过以上示例代码，读者可以快速掌握如何正确地使用 CollapsingToolbarLayout 实现类似效果，并在实际开发中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb57b95ad90b6d0420003f