在 Material Design 中，CollapsingToolbarLayout 是一个非常有用的布局控件。通过它，我们可以实现一个折叠式标题栏，让 UI 更加美观、动感，同时也提高了用户体验。
本文将详细介绍 Material Design 中的 CollapsingToolbarLayout 控件，包括如何创建折叠式标题栏，并提供示例代码，以便大家更好地学习和实践。
CollapsingToolbarLayout 简介
CollapsingToolbarLayout 控件是支持 Material Design 折叠式标题的布局控件。它可以实现以下几种效果：
- 在滚动时折叠、展开标题栏。
- 根据滚动位置调整标题栏的透明度和大小。
- 内嵌 Toolbar、TabLayout、ImageView 等控件。
使用 CollapsingToolbarLayout 实现折叠式标题栏
使用 CollapsingToolbarLayout 实现折叠式标题栏的步骤如下：
1. 布局文件中添加 CollapsingToolbarLayout
在布局文件中，我们需要添加一个 CollapsingToolbarLayout 控件，然后在其中添加一个 Toolbar、一张背景图片和一个 ImageView 控件（用于显示头像等），实现如下所示：
-- -------------------- ---- -------
------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
-------------
----------
---------------------------
---------------------------
----------------------------
------------------------------
------------------------------
------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-----------------------------
-----------------
----------
-----------------------
-----------------------------------
------------------------------------
--------------------------
------------------------------
------------------------------------
--------------------------------------------------------其中，app:title 用于设置标题栏的标题（当没有 Toolbar 控件时才生效），app:layout_collapseMode 用于设置折叠方式，parallax 表示设置视差效果，pin 表示固定在顶部。
2. 将 CollapsingToolbarLayout 设置给 AppBarLayout
在布局文件中，我们需要将 CollapsingToolbarLayout 控件设置给 AppBarLayout，实现如下所示：
-- -------------------- ---- -------
-------------------------------------------
-------------------------
-----------------------------------
------------------------------------
---------------------------------
------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
-------------
---- --------- ---
--------------------------------------------------------
---- ---------- ---
---------------------------------------------并且在 Java 代码中，需要通过 findViewById() 方法获取 AppBarLayout 控件，然后通过 setSupportActionbar() 方法将 Toolbar 设置为 ActionBar：
Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar);
至此，我们就可以实现一个基本的折叠式标题栏了。
示例代码
完整的代码如下所示：
-- -------------------- ---- -------
------------------------------------------------
------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-------------------------
-----------------------------------
------------------------------------
---------------------------------
------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
-------------
----------
---------------------------
---------------------------
----------------------------
------------------------------
------------------------------
------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-----------------------------
-----------------
----------
-----------------------
-----------------------------------
------------------------------------
--------------------------
------------------------------
------------------------------------
--------------------------------------------------------
---------------------------------------------
---------------------------------------
----------------------------
-----------------------------------
------------------------------------
-----------------------------
--------------------------------------------------------------
--------------------------------------------------Java 代码如下所示：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ----------------- -------------------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------- ------- - ---------------------------
-----------------------------
------------------ - --------------------------------------
------------------
-
------- ---- ----------------- -
------------ ------------ - ------------------------------
------------------- ------------- - --- --------------------------
---------------------------------------------
------------ -------- - --- --------------
--- ---- - - -- - - --- ---- -
---------------- - - ---
-
-------------------- ------- - --- --------------------
---------------------------------
-
------- ------ ----- --------- ------- -------------------------------------------- -
------- ------------ ----------
------- ---------------------- --------- -
--------- - ---------
-
------ ----- ------------ ------- ----------------------- -
------- -------- ----------
----------------- --------- -
----------------
--------- - ------------------------------------------
-
-
--------
---------
------ ------------ --------------------------- --------- ------- --- --------- -
---- -------- - ----------------------------------------
--------------------------------------------- ------- -------
------ --- -----------------------
-
---------
------ ---- ------------------------- ------------ ------- --- --------- -
--------------------------------------------------
-
---------
------ --- -------------- -
------ -----------------
-
-
-总结
CollapsingToolbarLayout 是 Material Design 中非常实用的布局控件，通过它，我们可以实现一个漂亮、有动感的折叠式标题栏。本文详细介绍了 CollapsingToolbarLayout 控件的使用方法，并提供了相应的示例代码，希望可以帮助大家更好地学习和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cdb8041519ea946c186adf