前言
Material Design 是 Google 推出的一种全新的设计语言，旨在为移动端和 Web 应用程序带来一致性的设计风格和用户体验。其中 CoordinatorLayout 是 Material Design 中重要的 UI 控件之一，它可以与其他控件配合使用，实现各种丰富的效果，并且可适配不同的移动设备。
概述
CoordinatorLayout 是一种专门用来协调其他控件并提供交互反馈的布局容器，它的主要作用在于控制子视图之间的行为，例如在滚动时，一个视图可以跟随着另一个视图一起滚动，或者把一个视图固定在屏幕的某个位置等等。
实现方式
CoordinatorLayout 布局结构介绍：
CoordinatorLayout 包含一个或者多个子视图（View）， 这些子视图可以是任何布局。在 CoordinatorLayout 布局内，每个子视图（称之为 Behavior View）可以使用 CoordinatorLayout.Behavior 实现特定的交互效果，这些效果包括：浮动动作按钮、拉伸式头部等效果。
这里我们以 FloatingActionButton（浮动动作按钮） 为例来说明：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------
--------------------------------
-----------------------------------
--------------------------------------
----------------------------------------------------------------------
--------------------------
-----------------------------------
------------------------------------
----------------------------
------------------------------
-------------------------------------
----------------------------------------
------------------------------------------------------在这个布局中，RecyclerView 作为一个列表的容器，浮动按钮 FloatingActionButton 指定了其在 CoordinatorLayout 中的位置关系，通过android.support.design.widget.CoordinatorLayout.LayoutParams 这样一个自定义属性布局可以达到效果
app:layout_anchorGravity="bottom|end" app:layout_anchor="@id/main_list_view"
- app:layout_anchor：是指定子视图的“锚点”。
- app:layout_anchorGravity：是指定子视图的重心（重心是指水平和竖直方向上的对齐方式）。
Behavior 实现方式
CoordinatorLayout.Behavior 类是负责实现视图交互的类。只需要实现 Behavior 类，然后协调它与相应的视图进行配对即可，例如，FloatingActionButton 的效果是随着 RecyclerView 的滚动而上下浮动。
-- -------------------- ---- -------
------ ----- ---------------------- ------- ----------------------------- -
------ ------------------------------ -------- ------------ ------ -
-------------- -------
-
---------
------ ------- ------------------------------------- ------- -------------------- ------
---- ------------------ ---- ------- --- ----------------- -
------ ---------------- -- ------------------------------- --
--------------------------------- ------ ------------------ ------- ------------------
-
---------
------ ---- -------------------------------- ------------------ -------------------- ------
---- ------- --- ----------- --- -----------
--- ------------- --- ------------- -
--------------------------------------- ------ ------- ----------- ----------- ------------- --------------
-- ----------- - - -- --------------------- -- ------------- -
-------------
- ---- -- ----------- - - -- --------------------- -- ------------- -
-------------
-
-
-在代码中我们通过继承 Behavior 类，并重写 onNestedScroll() 方法，该方法在滑动时被调用 。我们判断滑动方向，当向上滑动时悬浮按钮隐藏，向下时悬浮按钮显示。
在布局 xml 文件中，我们需要指定该 Behavior类，在 FloatingActionButton 的属性中添加 android:layout_behavior 属性
app:layout_behavior=".ScrollAwareFabBehavior"
总结
CoordinatorLayout 可以灵活地布局子视图，为 Material Design UI 控件提供了优异的支持。我们可以通过使用 CoordinatorLayout.Behavior 实现个性化的视图交互效果，来满足不同应用场景的需求。了解和掌握这些技能，对于前端开发来说将有很大的指导意义。
完整代码如下：
-- -------------------- ---- -------
------ ----- ---------------------- ------- ----------------------------- -
------ ------------------------------ -------- ------------ ------ -
-------------- -------
-
---------
------ ------- ------------------------------------- ------- -------------------- ------
---- ------------------ ---- ------- --- ----------------- -
------ ---------------- -- ------------------------------- --
--------------------------------- ------ ------------------ ------- ------------------
-
---------
------ ---- -------------------------------- ------------------ -------------------- ------
---- ------- --- ----------- --- -----------
--- ------------- --- ------------- -
--------------------------------------- ------ ------- ----------- ----------- ------------- --------------
-- ----------- - - -- --------------------- -- ------------- -
-------------
- ---- -- ----------- - - -- --------------------- -- ------------- -
-------------
-
-
-
----- ------------- ------------------
----------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
-----------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------
--------------------------------
-----------------------------------
--------------------------------------
----------------------------------------------------------------------
--------------------------
-----------------------------------
------------------------------------
----------------------------
------------------------------
-------------------------------------
--------------------------------------
-----------------------------------------------
------------------------------------------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a2181fadd4f0e0ffa28ac5