在 Material Design 中，CollapsingToolbarLayout 是一个非常常用的组件，它可以实现一个可折叠的工具栏，可以在滚动时自动折叠或展开。本文将介绍如何使用 CollapsingToolbarLayout 实现一个完美的可折叠工具栏，并提供示例代码和指导意义。
一、CollapsingToolbarLayout 的基本使用
CollapsingToolbarLayout 可以包含一个 Toolbar 和一个可折叠的头部布局，如下所示：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
-----------------------------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------------------------------
-----------------------------------
-------------------------------------------
----------------------------- --
----------
-----------------------------------
------------------------------------
------------------------------------
------------------------------
----------------------------------
------------------------------------------- --
-------------------------------------------------------------
------------------------------------------
-----------------------------------
------------------------------------
------------------------------------------------------------ --
------------------------------------------------------上面的布局中，CoordinatorLayout 是必须的，因为它提供了滚动行为和协调子视图的能力。CollapsingToolbarLayout 中包含了一个 Toolbar 和一个 ImageView，ImageView 用来展示头部的图片。Toolbar 和 ImageView 都使用了 layout_collapseMode 属性来指定它们在折叠过程中的行为。
在 RecyclerView 中，我们使用了 app:layout_behavior="@string/appbar_scrolling_view_behavior" 属性来指定它的滚动行为，这样在滚动 RecyclerView 时，CollapsingToolbarLayout 就会自动折叠或展开。
二、CollapsingToolbarLayout 的进阶使用
除了基本的使用方法，CollapsingToolbarLayout 还有一些进阶的用法，下面将介绍其中的两个。
1. CollapsingToolbarLayout 的折叠模式
CollapsingToolbarLayout 的折叠模式有两种，分别是 pin 和 parallax。
- pin：在折叠过程中，Toolbar 会停留在顶部，不会消失。
- parallax：在折叠过程中，ImageView 的图片会跟着滚动，产生一种视差效果。
我们可以通过 app:layout_collapseMode 属性来指定子视图的折叠模式，如下所示：
-- -------------------- ---- -------
-----------------------------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------------------------------
-----------------------------------
-------------------------------------------
----------------------------- --
----------
-----------------------------------
------------------------------------
------------------------------------
------------------------------
----------------------------------
------------------------------------------- --
-------------------------------------------------------------2. CollapsingToolbarLayout 的折叠范围
CollapsingToolbarLayout 的折叠范围也可以通过属性来指定，我们可以使用 app:layout_collapseMode 属性来指定子视图的折叠范围，如下所示：
-- -------------------- ---- -------
-----------------------------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------------------------------
-----------------------------------
-------------------------------------------
-----------------------------
------------------------------------------- --
----------
-----------------------------------
------------------------------------
------------------------------------
------------------------------
----------------------------------
-------------------------------------------
-------------------------------------- --
-------------------------------------------------------------在上面的例子中，ImageView 的折叠范围是 parallax 和 pin，这意味着在折叠过程中，ImageView 会先产生视差效果，然后停留在顶部，不会消失。
三、完美实现可折叠工具栏
为了实现一个完美的可折叠工具栏，我们需要注意以下几点：
- 头部图片的高度应该和屏幕宽度成比例。
- 在折叠过程中，Toolbar 应该停留在顶部，不应该消失。
- 在折叠过程中，图片应该产生一定的视差效果。
下面是完美实现可折叠工具栏的布局代码：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
-----------------------------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------
-----------------------------------
------------------------------------
------------------------------------
------------------------------
----------------------------------
------------------------------------------- --
----------------------------------
-----------------------------------
-------------------------------------------
----------------------------- --
-------------------------------------------------------------
------------------------------------------
-----------------------------------
------------------------------------
------------------------------------------------------------ --
------------------------------------------------------上面的布局中，ImageView 的高度是 match_parent，这样在折叠过程中，图片的高度会随着屏幕高度的变化而变化，保持和屏幕宽度成比例。Toolbar 使用了 pin 折叠模式，这样在折叠过程中，Toolbar 会停留在顶部，不会消失。ImageView 使用了 parallax 折叠模式，这样在折叠过程中，图片会产生一定的视差效果。
四、总结
通过本文的介绍，我们了解了 CollapsingToolbarLayout 的基本用法和进阶用法，并实现了一个完美的可折叠工具栏。在实际开发中，我们可以根据自己的需求来使用 CollapsingToolbarLayout，达到更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bda02dadd4f0e0ff74f6e5