介绍
Material Design 是由 Google 推出的一种全新的设计风格，这种设计风格融合了平面化、动态效果、卡片设计等多种元素，在近些年的应用界面设计中得到了广泛的应用。
CoordinatorLayout 是 Google 在 Material Design 中介绍的控件容器，它可以协调布局中的多个视图，实现各种复杂的交互效果。本文将从基础概念、使用方法、代码示例和常用案例等方面来详细剖析 CoordinatorLayout 的使用。
基础概念
布局交互行为
在 Material Design 中，布局交互行为是一个非常重要的概念，它描述的是布局中不同元素之间的交互关系。CoordinatorLayout 可以理解为一个布局交互行为的容器，它可以协调多个不同元素之间的交互效果，比如吸顶、瀑布流、滑动隐藏等交互效果。
CoordinatorLayout 属性
在 CoordinatorLayout 中，有几个特殊的属性需要注意：
app:layout_behavior：表示当前 View 的布局行为，也就是菜单、悬浮按钮、列表等在 CoordinatorLayout 中的位置和交互关系。app:layout_anchor：表示当前 View 参考的锚点，可以是别的 View 或者 id。app:layout_anchorGravity：表示当前 View 的相对位置，可以是left、right、top、bottom、center_vertical、center_horizontal等。
使用方法
- 导入依赖
在项目的 build.gradle 文件中加入以下依赖：
implementation 'com.android.support:design:28.0.0'
- 使用 CoordinatorLayout
在布局文件中使用 CoordinatorLayout 作为容器，例如：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
---- --- ---- - ---
-----
-----------------------
-----------------------------------
------------------------------------
----------------------------------------------
-----------------------------
--------------------------------- --
---- --- ---- - ---
-----
-----------------------
-----------------------------------
------------------------------------
-------------------------------------------------
------------------------------------------------------------ --
---- --- ---- - ---
-----
-----------------------
-----------------------------------
------------------------------------
-------------------------------------------------
-----------------------------
------------------------------ --
--------------------------------------------------在这个例子中，我们使用 CoordinatorLayout 作为容器，并创建了三个自定义 View：view1、view2、view3，它们之间存在一定的布局交互行为。
View1 定位在 view2 的下方，通过设置 app:layout_anchor 和 app:layout_anchorGravity 属性，让它随着 view2 的移动而移动。
View2 使用 app:layout_behavior 属性设置了 appbar_scrolling_view_behavior，它与应用程序栏之间形成了滚动距离依存的关系。
View3 也定位在 view2 的下方，但是通过设置 app:layout_anchor 和 app:layout_anchorGravity 属性，让它处于了 view2 的上方。
代码示例
下面为大家提供一个完整的例子，在这个例子中我们在 CoordinatorLayout 中创建了一个 Toolbar、一个 FloatingActionButton（浮动操作按钮）和一个 RecyclerView（列表）：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
---- --- ---
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
------------------------------------------- --
---- ------ ---
---------------------------------------------------
---------------------
-----------------------------------
------------------------------------
------------------------------
------------------------------------
------------------------------------- --
---- -- ---
---------------------------------------
------------------------------
-----------------------------------
------------------------------------
------------------------------------------------------------ --
--------------------------------------------------在这个例子中，我们设置了浮动操作按钮，让它随着列表的滚动而滚动。另外，Toolbar 的 app:layout_scrollFlags 属性设置为 scroll|enterAlways，表示滚动的时候 Toolbar 一直保持在屏幕上方。
常用案例
- 应用栏滚动隐藏
应用栏是一个非常常见的控件，而在 Material Design 中，应用栏可以通过 CoordinatorLayout 实现滚动隐藏效果。需要在应用栏的布局文件中设置 app:layout_scrollFlags 属性，将它设置为 scroll|enterAlways|snap，然后在 RecyclerView 中嵌入应用栏。
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
---- --- ---
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
------------------------------------------------ --
---- -- ---
---------------------------------------
------------------------------
-----------------------------------
------------------------------------
------------------------------------------------------------ --
--------------------------------------------------- 背景色渐变
在 Material Design 中，背景颜色可以通过 CoordinatorLayout 实现渐变效果。在布局文件中，使用一个带有渐变背景色的 View 作为底部，然后在 RecyclerView 中设置 app:layout_behavior 属性为 @string/appbar_scrolling_view_behavior，让列表可以随着滚动而滑动，从而实现背景色渐变效果。
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
---- ---- ---
-----
-----------------------------
-----------------------------------
------------------------------------
------------------------------------------ --
---- -- ---
---------------------------------------
------------------------------
-----------------------------------
------------------------------------
------------------------------------------------------------ --
--------------------------------------------------总结
以上就是 Material Design 下 CoordinatorLayout 的详解与使用的全部内容，希望大家可以通过学习本文，对于这个控件容器有更深入的了解，并且可以熟练地使用它来实现更加丰富的布局交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649f624d48841e9894bbbfe7