Material Design 是 Google 推出的一种设计语言，旨在为移动设备、桌面应用和 Web 应用提供一致的视觉和交互效果。其中，CoordinatorLayout 和 CollapsingToolbarLayout 是 Material Design 中常用的控件，能够让应用有复杂和新颖的设计效果。
什么是 CoordinatorLayout？
CoordinatorLayout 是 Android 设计库中的一个布局控件，用于协调组件间的交互。它允许组件之间进行交互，并提供一种简单方法来处理诸如响应嵌套滚动、视图之间的交互等行为。
在 CoordinatorLayout 中，可以使用多个子 View（称为 Behavior），每个 Behavior 都能够控制自己的触摸事件、滚动事件、布局大小等特性。这样，就可以将一个组件的行为与其他组件协调起来。
什么是 CollapsingToolbarLayout？
CollapsingToolbarLayout 是一个由 Google 提供的布局控件，它是 Toolbar 的一个扩展，提供了一个可收缩的 Toolbar。当滚动时，CollapsingToolbarLayout 可以隐藏或显示 Toolbar，可以按照需要进行背景图和标题的消失或缩小。
与普通的 Toolbar 不同，CollapsingToolbarLayout 拥有一个可折叠的区域，称为折叠区。折叠区域可以放置图片、文本等元素，与 Toolbar 结合起来，可以实现非常优美的 UI 设计。
如何使用 CoordinatorLayout 和 CollapsingToolbarLayout？
为了演示如何使用 CoordinatorLayout 和 CollapsingToolbarLayout 来实现复杂效果，假设我们要实现一个带有滚动列表的页面，并在顶部放置一张图片和一段描述文字。当向上滚动页面时，图片和描述文字逐渐消失，直到完全隐藏，同时顶部的 Toolbar 变得更加紧密，标题变为应用名。
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------------
-----------------------------------
-----------------------------
---------------------------------------------------
----------
-----------------------------------
------------------------------------
------------------------------
----------------------------------
----------------------------------
---------
-----------------------------
-----------------------------------
------------------------------------
-----------------------
-----------------------------
----------------------------------------
------------------ -- -- ---------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-----------------------------
----------------------------------------------------------
--------------------------------------------------------
---------------------------------------------
---------------------------------------
-----------------------------------
------------------------------------
--------------------------------------------------------------
--------------------------------------------------在代码中，我们使用了 CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout 和 RecyclerView 四个控件。其中，RecyclerView 模拟了一个带有滚动的列表。AppBarLayout、CollapsingToolbarLayout 和 Toolbar 组成了顶部的 ToolBar 区域，ImageView 和 TextView 则是放在 CollapsingToolbarLayout 中的折叠区域内。
其中，CollapsingToolbarLayout 的 layout_scrollFlags 属性设置了两个值，分别是 scroll 和 exitUntilCollapsed。scroll 表示当列表滚动时，CollapsingToolbarLayout 会跟随滚动并且逐渐消失，exitUntilCollapsed 表示当 Toolbar 完全收缩时，折叠区域至少会保留一个像素的高度。
在 ImageView 和 TextView 中，layout_collapseMode 属性分别设置为 parallax 和 pin，parallax 表示在滚动时，ImageView 会产生一些视觉上的错觉，而 TextView 会在 Toolbar 完全收缩时固定在顶部。
在 CollapsingToolbarLayout 中使用 app:srcCompat 属性来引入背景图片，这里使用了一张名为 header 的示例图片。
总结
通过本文的讲解，我们学会了如何使用 CoordinatorLayout 和 CollapsingToolbarLayout 实现复杂的 UI 效果。这种方法可以让应用更加生动、有趣，强烈推荐给前端开发者学习掌握。
完整的实例代码可访问 Github 链接：https://github.com/Felix811009/MaterialDesignDemo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d2c3848841e98949e66fe