介绍
Material Design 是 Google 推出的新一代设计语言，它提供了一套标准的 UI 设计风格，可以帮助开发者快速的开发出漂亮的应用。其中，CollapsingToolbarLayout 是 Material Design 中非常重要的一个组件，它可以让头部随着页面的滚动而发生变化，从而提供了更加生动和醒目的效果。
CollapsingToolbarLayout 在设计上采用了折叠式布局的思路，可以将页眉部分收缩至指定高度，同时伴随一个逐渐透明的过渡区域，使得页面滑动效果更加美观和自然。
实现过程
Step1：添加依赖
首先，我们需要在项目中添加 CollapsingToolbarLayout 的库文件。在 gradle 中添加以下依赖即可：
implementation 'com.android.support:design:28.0.0'
Step2：布局文件
接下来，在布局文件中，我们需要对页面进行分层布局，最下层放置一个 RecyclerView，用来显示列表中的内容，在最上方放置一个 CollapsingToolbarLayout，用于展示头部内容，并且随着页面的滑动，实现折叠和展开的效果。
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------
------------------------------
-----------------------------------
------------------------------------
--------------------------------------------------------------
-----------------------------------------------------------
-----------------------------------
-----------------------------------
------------------------------------
-------------------------------------
---------------------------------------------------
---
-------------------------------------------------------------
------------------------------------------------------我们可以发现，在 CollapsingToolbarLayout 中设置了两个比较重要的属性：
- contentScrim：表示当 CollapsingToolbarLayout 处于折叠状态时，显示的颜色
- layout_scrollFlags：表示该组件的滚动类型，在这里，我们设置了 scroll 和 exitUntilCollapsed，表示可以随着页面的滑动而滚动，并在达到最小高度后不再滚动，即代码中对应的
app:layout_scrollFlags="scroll|exitUntilCollapsed"。如果只需要实现滑动效果，可以设置为app:layout_scrollFlags="scroll"
Step3：添加 Toolbar 控件
在 CollapsingToolbarLayout 中，一般需要添加一个 Toolbar 控件，用于显示标题、菜单等内容。添加 Toolbar 的方法很简单，只需要在 CollapsingToolbarLayout 中放置一个 Toolbar 控件即可。
-- -------------------- ---- -------
-----------------------------------------------------------
-----------------------------------
-----------------------------------
------------------------------------
-------------------------------------
---------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
-------------------------------------------------------------Toolbar 控件和 CollapsingToolbarLayout 有一个关键的属性：app:layout_collapseMode，它用来设置 Toolbar 的折叠模式，可以设置为 pin 或 parallax。pin 表示 Toolbar 会在折叠到一定高度之后停止折叠，并固定在屏幕顶部，而 parallax 则会在折叠的同时添加一些视差滑动效果。我们在这里将其设置为 pin。
Step4：添加背景图片
随后，在 CollapsingToolbarLayout 中添加一张背景图片，用于展示应用的主题。我们在这里使用一个 ImageView 来承载图片。
-- -------------------- ---- -------
-----------------------------------------------------------
-----------------------------------
-----------------------------------
------------------------------------
-------------------------------------
---------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
----------
------------------------
-----------------------------------
-----------------------------
------------------------------
------------------------------
------------------------------------
-------------------------------------------------------------在这里，我们设置 ImageView 的折叠模式为 parallax，表示它会随着页面滑动而发生视差滚动的效果。
Step5：添加标题和子标题
在 CollapsingToolbarLayout 中，我们还可以添加一些额外的文字信息，比如标题和子标题等。这些信息显示的位置和样式取决于具体的布局方式。我们在这里使用了简单的 FrameLayout 布局方式。
-- -------------------- ---- -------
-----------------------------------------------------------
-----------------------------------
-----------------------------------
------------------------------------
-------------------------------------
---------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
----------
------------------------
-----------------------------------
-----------------------------
------------------------------
------------------------------
------------------------------------
------------
-----------------------------------
------------------------------------
-----------------------------
--------------------------------------------
---------
-----------------------
-----------------------------------
------------------------------------
-----------------
-----------------------
-----------------------------
---------
--------------------------
-----------------------------------
------------------------------------
------------------
-----------------------
---------------------------
------------------------------
---------------------------------
--------------
-------------------------------------------------------------在这里，我们使用了 FrameLayout 来承载标题和子标题，同时也设置了相应的折叠模式和折叠视差参数。
Step6：代码实现
最后，我们需要在 Java 代码中实现具体的功能逻辑。这里我们主要用到了 AppBarLayout 和 OnOffsetChangedListener 两个类。
-- -------------------- ---- -------
------------ ------------ - --------------------------------
------------------------------------------- -------------------------------------- -
---------
------ ---- ---------------------------- ------------- --- --------------- -
--- ------ - -----------------------------------
--- ------ - -------------------------
-- ------- - ------ - -- -
----------------------------------------------------------
-----------------------
- ---- -
----------------------------------------------------------------
---------------------
-
-
---在 onOffsetChanged 方法中，我们监听了 AppBarLayout 的滑动变化，根据滑动的相对位置和总高度来调整标题和菜单的显示状态。
示例代码
下面是一个完整的应用示例代码。
activity_main.xml
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------
------------------------------
-----------------------------------
------------------------------------
--------------------------------------------------------------
-----------------------------------------------------------
-----------------------------------
-----------------------------------
------------------------------------
-------------------------------------
---------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
----------
------------------------
-----------------------------------
-----------------------------
------------------------------
------------------------------
------------------------------------
------------
-----------------------------------
------------------------------------
-----------------------------
--------------------------------------------
---------
-----------------------
-----------------------------------
------------------------------------
-----------------
-----------------------
-----------------------------
---------
--------------------------
-----------------------------------
------------------------------------
------------------
-----------------------
---------------------------
------------------------------
---------------------------------
--------------
-------------------------------------------------------------
------------------------------------------------------MainActivity.java
-- -------------------- ---- -------
------ -----------------------------------------
------ ----------------------------------
------ -------------------------------------------------
------ ------------------------------------------
------ -----------------------
------ ------------------
------ ------------------------------------------------
------ -----------------------------------------------------------
------ --------------------
------ ---------------
------ ----- ------------ ------- ----------------- -
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------- ------- - ---------------------------
-----------------------------
------------ ------------ - --------------------------------
------------ ---- - --- --------------
--- ---- - - -- - - --- ---- -
-------------- - - ---
-
--------------------------------- ---------------------------
--------------------------- --------------------- -------
----- ----------------------- ----------------- - -------------------------------------
------------ ------------ - --------------------------------
------------------------------------------- -------------------------------------- -
---------
------ ---- ---------------------------- ------------- --- --------------- -
--- ------ - -----------------------------------
--- ------ - -------------------------
-- ------- - ------ - -- -
----------------------------------------------------------
-----------------------
- ---- -
----------------------------------------------------------------
---------------------
-
-
---
-
-RecyclerAdapter.java
-- -------------------- ---- -------
------ ------------------------
------ ----------------------------
------ ------------------
------ -----------------------
------ ------------------------
------ ----------------------------
------ ------------------------------------------
------ ---------------
------ ----- --------------- ------- ------------------------------------------------ -
------- ------- ---------
------- ------------ ------
------ ----------------------- -------- ------------ ----- -
-------- - --------
----- - -----
-
--------
---------
------ ---------- --------------------------- --------- ------- --- --------- -
---- ---- - ------------------------------------------------------------- ------- -------
------ --- -----------------
-
---------
------ ---- ------------------------- ---------- ------- --- --------- -
----------------------------------------------
-
---------
------ --- -------------- -
------ -------------
-
------ ----- ---------- ------- ----------------------- -
------- -------- ----------
------ ------------------- ---- --------- -
----------------
--------- - -------------------------------------
-
-
-item_recycler.xml
-- -------------------- ---- -------
------------- ----------------------------------------------------------
------------------------------
-----------------------------------
------------------------------------
-----------------------
---------
--------------------------
-----------------------------------
------------------------------------
-------------------
-------------------------
---------------结论
CollapsingToolbarLayout 是 Material Design 中非常重要的一个组件，它提供了折叠式布局的思路，可以让头部随着页面的滚动而发生变化，从而提供了更加生动和醒目的效果。在实现过程中，我们需要对页面进行分层布局，使用 Toolbar 和 ImageView 等控件来实现具体的效果。
在代码实现中，我们主要用到了 AppBarLayout 和 OnOffsetChangedListener 两个类。AppBarLayout 表示一个可以响应滚动事件的容器，OnOffsetChangedListener 表示一个监听滚动事件的监听器。通过监听 AppBarLayout 的滚动变化，我们可以通过设置页面元素的透明度等属性，实现具有各种效果的滑动效果。
当然，还有很多细节需要自己去调整和完善。我们需要根据具体的需求来对折叠式布局进行各种变化和调整，通过对各个属性的设置和生动的界面动画，让我们的应用更加生动和吸引人。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bffdb14b275ea6fdf635b