介绍
在现代的移动应用和网站开发中，往往需要处理复杂的视图交互和布局。为此，Google在设计 Material Design 时专门为我们带来了 CoordinatorLayout 控件，它能够提供多种高级的布局特性。
CoordinatorLayout 是一个 FrameLayout 的子类，在处理视图交互和布局方面有着极强的功能扩展性。它能够对子控件进行动态的位置调整、大小调整、布局调整等，而且支持多个子控件间的相互触发和联动。此外，它还提供了 AppBarLayout 控件的支持，能够与其协同工作实现丰富的应用交互。
本文将介绍 CoordinatorLayout 的高级用法和示例代码，帮助你深入理解这一控件的特性，并掌握如何使用它完成复杂的移动应用和网站布局。
布局特性
协调视图位置
CoordinatorLayout 提供了 CoordinatorLayout.LayoutParams 类，允许我们使用 app:layout_anchor 和 app:layout_anchorGravity 定义一个控件相对于另一个控件的位置，这样它就可以随着另一个控件的位置而移动。具体来说，它的用法是：
<android.support.design.widget.CoordinatorLayout>
<!-- anchor控件 -->
<View android:id="@+id/anchor1"/>
<!-- 被锚定控件 -->
<View android:id="@+id/floatingView"
app:layout_anchor="@id/anchor1"
app:layout_anchorGravity="top|left|right" />
</android.support.design.widget.CoordinatorLayout>其中，app:layout_anchor 用于指定被锚定的控件，app:layout_anchorGravity 则指定相对位置。
相互触发
当我们需要实现两个控件间的相互触发时，可以使用 app:layout_behavior 属性。此属性用于指定一个行为类，当一个控件与另一个控件发生交互时，这个行为类将被调用。
比如，我们可以使用 Snackbar 控件来实现浮动消息提示，当用户点击消息后，我们希望底部的 FAB 按钮消失。具体来说，它的实现方法是：
-- -------------------- ---- -------
-------------------------------------------------
----------------------------------------------------------------------
---------------------
------------------------------
-------------------------------------
------------------------------
-----------------------------------
--------------------------------------
----- --------------------------
--------------------------------------------------val snackbar = Snackbar.make(coordinatorLayout, ... , Snackbar.LENGTH_INDEFINITE)
snackbar.setAction(..., View.OnClickListener() {
fab.hide()
})
snackbar.show()其中，我们需要在 FAB 上设置 app:layout_anchor 和 app:layout_anchorGravity，将其与 anchor 控件进行关联。接着，在用户点击 Snackbar 消息时，我们可以通过 fab.hide() 方法处理 FAB 按钮的消失。
AppBarLayout 支持
AppBarLayout 控件是 CoordinatorLayout 的重要补充，它允许我们轻松实现 Material Design 风格的应用头部和导航栏。AppBarLayout 支持丰富的滚动交互和位置调整功能，包括以下几个常见的用法：
- 顶部水平导航栏：结合 TabLayout 控件实现顶部的水平导航栏；
- 抽屉效果：根据滚动方向和距离展开或收起应用头部；
- 可折叠头部：将应用头部和页面内容一起滚动，并支持下拉刷新等手势操作。
具体使用方法可参考 Android Developers 的文档。
示例代码
以下代码演示了如何使用 CoordinatorLayout 和 AppBarLayout 实现一个具有浮动消息提示的主界面布局：
-- -------------------- ---- -------
-------------------------------------------------
-------------------------------------------
------------------------------
------------------------------------
------------------------------------
----------------------------------
-------------------------
------------------------------------
-----------------------------------
------------- --- -----
-------------------------------------------
-----------------------------------------------
---------------------------------------------
------------
---------------------------
------------------------------------
-----------------------------------
--------------------------------------------------------------
----------------------------------------------------------------------
---------------------
------------------------------------
-----------------------------------
-----------------------------------
----------------------------
------------------------------
------------------------------
------------------------------------- --
----- --------------------------
---------------------------------------------------- -------------------- ---- -------
--- ------------------ ----------------- - ------------------------------------
--- ------------- ------------ - -------------------------------
--- -------- ------- - --------------------------
--- ---------- ----------- - ----------------------------
--- ---- -------------------- - ----------------------
---
--- -------- - -------------------------------- ------- -------- ---------------------------
------------------------ ----- ---------------------- -
----------
--
---------------其中，通过 app:layout_scrollFlags 指定 Toolbar 悬浮和滑动退出的特性，通过 app:layout_behavior 属性将 FrameLayout 绑定到 AppBarLayout 上。在代码中我们使用了 Snackbar 控件实现了浮动消息提示，并通过在 OnClickListener 中调用 fab.hide() 方法实现了 FAB 按钮的隐藏。
总结
通过本文的介绍，你已经了解到了 Material Design 中 CoordinatorLayout 的高级用法。希望可以帮助你更好地设计和开发移动应用和网站，并实现更丰富的用户交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6651c0c4d3423812e4613878