在 Material Design 中，CoordinatorLayout 和 AppBarLayout 是两个常用的布局控件。它们的联动效果可以让应用界面变得更加流畅和美观，同时提高用户体验。本文将详细讲解这两个控件的使用以及如何实现它们的联动效果。
CoordinatorLayout
CoordinatorLayout 是一个可以协调子视图（view）之间交互的布局控件，它可以让子视图之间产生联动效果，比如当用户滑动一个子视图时，其他子视图会做出相应的变化。CoordinatorLayout 的用法与 FrameLayout 很相似，但它提供了更加高级的联动效果。
在使用 CoordinatorLayout 时，需要注意以下几点：
- CoordinatorLayout 必须是子视图的容器（即包含其他子视图）。
- 每个子视图都需要通过 app:layout_behavior 属性来指定它们的布局行为（即 CoordinatorLayout.Behavior 类）。
- 各个子视图之间的联动效果需要通过 Behavior 类的重写实现。
下面是一个简单的 CoordinatorLayout 示例代码：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
---------
-----------------------------------
-----------------------------
-------------------
-------------------------------------------------------------------------------------- --
-------
-----------------------------------
------------------------------------
-------------------
-----------------------------
--------------------------------- --
--------------------------------------------------其中，TextView 是一个可滚动的子视图，它通过 app:layout_behavior 属性指定了 ScrollingViewBehavior 类作为它的布局行为，这样就能让它与其他子视图产生联动效果。而 Button 则是一个不能滚动的子视图，它通过 app:layout_anchor 和 app:layout_anchorGravity 属性指定了一个锚点（即视图 1）和它与视图 1 的关系，这样就能让它跟随视图 1 同时移动。
AppBarLayout
AppBarLayout 是一个与 CoordinatorLayout 配合使用的高级布局控件，它通常用于创建一个应用栏（action bar）或者一个可收起或可展开的工具栏（toolbar）。AppBarLayout 可以与 Toolbar、TabLayout、CollapsingToolbarLayout 等控件结合使用，产生丰富的联动效果。
需要注意的是，AppBarLayout 必须放在 CoordinatorLayout 中，并且必须指定一个 Behavior。
下面是一个简单的 AppBarLayout 示例代码：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-----------------------------------
-------------------------------------
----------------------------------
-----------------------------------
------------------------------------ --
---------------------------------------------
---------
-----------------------------------
-----------------------------
-------------------
-------------------------------------------------------------------------------------- --
--------------------------------------------------其中，AppBarLayout 包含了一个 Toolbar，这是一个经典的对联动效果的实现方式。AppBarLayout 和 Toolbar 之间具有自动的联动效果，当 AppBarLayout 的高度发生变化时，Toolbar 的高度会自动调整。而 TextView 则是一个滚动视图，它也指定了一个 ScrollingViewBehavior 类作为它的布局行为，在滚动过程中可以与其他视图产生联动效果。
联动效果实现
在实现联动效果时，我们需要重写 Behavior 类的若干方法。下面就以 AppBarLayout 和 Toolbar 为例，说明具体的实现过程。
-- -------------------- ---- -------
------ ----- --------------------- ------- ----------------------------------- -
------ ----------------------------- -------- ------------ ------ -
-------------- -------
-
---------
------ ------- --------------------------------- ------- ------- ------ ---- ----------- -
------ ---------- ---------- -------------
-
---------
------ ------- ---------------------------------------- ------- ------- ------ ---- ----------- -
--- ------ - ---------------------
------------------------------
------ -----
-
-在上面的代码中，我们重写了 layoutDependsOn 和 onDependentViewChanged 两个方法。layoutDependsOn 方法用于确定该 Behavior 是否依赖于某一个子视图，这里我们指定了该 Behavior 依赖于 AppBarLayout。onDependentViewChanged 方法用于在依赖视图发生变化时进行相应的操作，这里我们计算了 AppBarLayout 与 Toolbar 之间的偏移量 offset，并将 Toolbar 移动到相应位置。
最后，我们在布局文件中将 Toolbar 的 app:layout_behavior 属性指定为我们自定义的 Behavior，就能实现 AppBarLayout 和 Toolbar 之间的联动效果了。
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-----------------------------------
-------------------------------------
----------------------------------
-----------------------------------
------------------------------------
-------------------------------------------- --
---------------------------------------------
---------
-----------------------------------
-----------------------------
-------------------
-------------------------------------------------------------------------------------- --
--------------------------------------------------总结
本文详细介绍了 Material Design 中 CoordinatorLayout 和 AppBarLayout 的基本用法和联动效果实现方法，并通过示例代码给出了具体的实现步骤。使用 CoordinatorLayout 和 AppBarLayout 能够使应用界面更加流畅和美观，同时提高用户体验。对于前端开发者来说，掌握这两个控件的用法和实现原理，是提高 UI 设计能力和编写高质量代码的重要一环。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65920ee3eb4cecbf2d6f763a