介绍
前端开发中，很多 web 应用都需要使用到标题栏，以提供页面的导航和提示信息。在 Material Design 设计语言中，折叠式标题栏（CollapsingToolbarLayout）是一个非常常用的组件，可以将标题栏与内容区域紧密地结合起来，提供良好的用户体验。
本文将介绍如何在 Material Design 中使用 CollapsingToolbarLayout 实现折叠式标题栏，并提供一个完整的示例代码，帮助读者快速上手。
实现步骤
第一步：添加依赖
将以下依赖添加到项目的 build.gradle 文件中：
implementation 'com.google.android.material:material:1.3.0'
第二步：定义布局
在布局文件中，添加 AppBarLayout 和 CollapsingToolbarLayout 组件，如下所示：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
------------------------------
-----------------------------------
---------------------------------------------
----------------------------------------------
-----------------------------------------------------------
-----------------------------------------
-----------------------------------
------------------------------------
-------------------------------------
---------------------------------------------------
----------
---------------------------
-----------------------------------
------------------------------------
------------------------------
----------------------------------
---------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
-------------------------------------------------------------
--------------------------------------------------
--------------------------------------
----------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
---------
-----------------------------------
------------------------------------
---------------------------------------
----------------------------------
-------------------------------------------
----------------------------------------
------------------------------------------------------布局文件中包含三个组件：
- AppBarLayout：顶部布局，用于包含 CollapsingToolbarLayout 组件。
- CollapsingToolbarLayout：折叠式标题栏布局，包含一个图片和一个 Toolbar 组件。
- NestedScrollView：可滚动的内容区域。
值得注意的是，CollapsingToolbarLayout 中必须包含一个 ImageView，用于展示背景图片。同时，Toolbar 组件需要添加 app:layout_collapseMode="pin" 属性，以提供折叠式标题栏的 pin 功能。
第三步：设置数据
在代码中，可以使用以下方法设置 CollapsingToolbarLayout 中的图片和 Toolbar 中的标题：
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbarLayout);
ImageView imageView = findViewById(R.id.imageView);
Toolbar toolbar = findViewById(R.id.toolbar);
collapsingToolbarLayout.setTitle("CollapsingToolbarLayout");
imageView.setImageResource(R.drawable.sample_image);
setSupportActionBar(toolbar);第四步：添加滚动效果
为了实现折叠式标题栏的效果，需要在布局文件和代码中添加一些配置：
-- -------------------- ---- -------
-----------------------------------------------------------
-----------------------------------------
-----------------------------------
------------------------------------
-------------------------------------
---------------------------------------------------
----------
---------------------------
-----------------------------------
------------------------------------
------------------------------
----------------------------------
---------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
-------------------------------------------------------------
--------------------------------------
----------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
----------------------------------------在 CollapsingToolbarLayout 中，需要添加以下属性：
- app:layout_scrollFlags="scroll|exitUntilCollapsed"：设置当滚动布局时，折叠式标题栏将退出屏幕，并跟随布局一起滚动。
- app:layout_collapseMode="parallax"：设置滚动时，图片会以视差效果进行动画。
- app:layout_collapseParallaxMultiplier="0.7"：设置视差效果的速度。
在 NestedScrollView 中，需要添加以下属性：
- app:layout_behavior="@string/appbar_scrolling_view_behavior"：通知 NestedScrollView 与折叠式标题栏一起滚动。
同时，在代码中，可以通过监听 AppBarLayout 的滚动状态，实现标题栏的颜色和 Toolbar 字体的改变：
-- -------------------- ---- -------
------------ ------------ - --------------------------------
----- ----------------------- ----------------------- - -------------------------------------------
----- ------- ------- - ---------------------------
------------------------------------------- -------------------------------------- -
---------
------ ---- ---------------------------- ------------- --- --------------- -
--- --------- - -----------------------------------
----- ---------- - ------- ------------------------ - ------- ----------
-- ----------- -- -- -- ------- -
----------------------------------------------
------------------------------------------------------
---------------------------------------- ---------------------- -
---------
------ ---- ------------ ----- -
----------------
-
---
------ - --------
- ---- -- ----------- - -- -- -------- -
-----------------------------------------------
-------------------------------------------------------
------ - --------
-
-
---效果示例
完整的示例代码如下：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ------- ------ - -----
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
----------------------- ----------------------- - -------------------------------------------
--------- --------- - -----------------------------
------- ------- - ---------------------------
------------------------------------------------------------
----------------------------------------------------
-----------------------------
------------ ------------ - --------------------------------
------------------------------------------- -------------------------------------- -
---------
------ ---- ---------------------------- ------------- --- --------------- -
--- --------- - -----------------------------------
----- ---------- - ------- ------------------------ - ------- ----------
-- ----------- -- -- -- ------- -
----------------------------------------------
------------------------------------------------------
---------------------------------------- ---------------------- -
---------
------ ---- ------------ ----- -
----------------
-
---
------ - --------
- ---- -- ----------- - -- -- -------- -
-----------------------------------------------
-------------------------------------------------------
------ - --------
-
-
---
-
-效果如下图所示：
总结
本文介绍了在 Material Design 中使用 CollapsingToolbarLayout 实现折叠式标题栏的方法，并提供了示例代码。CollapsingToolbarLayout 是一个功能强大的 UI 组件，可以改善网页体验，给用户带来更好的交互体验。
在实际开发中，也可以结合网页的需求，将 CollapsingToolbarLayout 与其他组件结合起来，实现更加复杂的交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6521ae7995b1f8cacd9224cc