Material Design 是安卓平台上非常流行的 UI 设计风格，它有着丰富的动画、交互效果和视觉效果，可以极大的增强用户体验。而在 Material Design 中，CoordinatorLayout 是一个非常重要的控件，它可以很好的帮助 UI 组件进行协调，并支持各种交互行为。本文将详细介绍 CoordinatorLayout 的使用方法，并给出相应的示例代码。
什么是 CoordinatorLayout
CoordinatorLayout 是一个继承自 ViewGroup 的控件，它的主要作用是协调其他组件的行为。可以理解为一个控制器，它根据布局的结构和各个组件之间的关系，协调各元素的协作运用，使得整个页面看起来更加协调和美观。
CoordinatorLayout 的特点
- 协调各个组件的位置和大小。
- 自动根据布局结构协调各个组件在 z 轴方向的位置关系。
- 支持各种交互行为，如滑动、拖动、折叠等。
- 可以定制各种 Behaviors，使用 Behavior 可以定制各个子控件的协作方式，比如让一个控件固定在 CoordinatorLayout 上方等。
- CoordinatorLayout 可以嵌套多层，这样就可以更灵活的协调各个组件的关系。
CoordinatorLayout 常见的 Behaviors
CoordinatorLayout 的 Behaviors 是协调各个子控件的关系的核心手段。在 CoordinatorLayout 中提供了一些默认的 Behaviors，我们可以根据需要进行定制。下面介绍几个比较常用的 Behaviors：
AppBarLayout.Behavior
AppBarLayout 是一个实现了 Toolbar 可以随着滑动向上或向下隐藏的控件，它的默认 Behavior 是 AppBarLayout.Behavior。我们可以通过 AppBarLayout.Behavior 修改 AppBarLayout 的行为，并可以控制其他控件的协调方式。
ScrollingViewBehavior
ScrollingViewBehavior 是用于实现能够滑动的组件的 Behavior，比如 RecyclerView，NestedScrollView 等，它可以协调 ScrollingView 向上滑动时其他控件往下滑动。
FloatingActionButton.Behavior
FloatingActionButton 是一个悬浮在屏幕上方的按钮，用于响应一些重要的用户交互，如范例中的返回顶部按钮。默认情况下，FloatingActionButton 的 Behavior 是 FloatingActionButton.Behavior。我们可以通过 FloatingActionButton.Behavior 修改 FloatingActionButton 的行为。
SwipeDismissBehavior
SwipeDismissBehavior 可以实现可以左右滑动消失的控件，比如卡片式列表中的每一项项目。
CoordinatorLayout 示例代码
下面以一个简单的范例演示 CoordinatorLayout 的使用方法。
布局文件如下：
-- -------------------- ---- ------- ----- ------------- ------------------ ------------------------------------------------ ----------------------------------- ------------------------------------ ---------------------------------------------------------- --------------------------------------------------- - ------------------------------------------- ----------------------------------- ------------------------------------ ------------------------------------------------------------ - ---------------------------------- ------------------------- ----------------------------------- ------------------------------------------- --------------------------------------- ------------------------------------------- -- ---------------------------------------- ---------------------------- ----------------------------------- ------------------------------------ -- --------------------------------------------- ---------------------------------- ---------------------------- ----------------------------------- ------------------------------------ ------------------------------------------------------------ -- --------------------------------------------------展开代码
Activity 代码如下：
-- -------------------- ---- ------- ------ ----- ------------ ------- ----------------- - ------- -------------- ------------ - --- -------------- ------- -------- ------ - ----- --- ---- --- ---- ---- --------- --------- ---- --------------- ------------------- - ----------------------------------- --------------------------------------- ------- ------- - --------------------------- ----------------------------- --------- --------- - ------------------------------ --------- --------- - ------------------------------ -------------------- --------------- -------------------- --------------- -------------------- --------------- -------------- ------- - --- ------------------------------------------- ------------- -------- ------------------------------ ---------------------------------------- - ----- -------------- ------- -------------------- - ------- -------------- ------------- ------- -------- ------- ------ ------------------------------ --- -------------- ------------- -------- ------- - ---------- ----------------- - ------------- ----------- - ------- - --------- ------ -------- ----------- --------- - ------ --------------------------- - --------- ------ --- ---------- - ------ -------------------- - --------- ------ ------------ ---------------- --------- - ------ ----------------- - - -展开代码
滑动 TabFragment 代码如下：
-- -------------------- ---- ------- ------ ----- ----------- ------- -------- - ------ ------------- - - --------- ------ ---- --------------------------- --------- --------- ---------- ------ ------------------- - ---- ---- - --------------------------------------- ---------- ------- ------------ ------------ - -------------------------------------- --------------------------------- ----------------------------------- --------- ------- - --- ------------ --------------------------------- ------ ----- - ----- --------- ------- ------------------------------------------ - --------- ------ ---------- ---------------------------- ------- --- --------- - ---- ---- - --------------------------------------------------------------- ------- ------- ------ --- ----------------- - --------- ------ ---- --------------------------- ------- --- --------- - ----------------------- - - ---------- - --------- ------ --- -------------- - ------ --- - ----- ---------- ------- ----------------------- - -------- --- ------ --------------- --------- - ---------------- -- - ------------------------------- - - - -展开代码
实现滑动效果
只要给需要包含在 AppBar 内的 view 设置 layout_scrollFlags 即可实现滑动效果。比如将 Toolbar 设置为滑动对象：
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" />
- enterAlways：向下滑动时，该控件会立即显示出来。
- scroll：向上滑动时，该控件会滑出屏幕，即隐藏该控件。
结语
本文详细介绍了 CoordinatorLayout 的作用和 Behaviors 的使用方法，并通过一个简单的范例示例了 CoordinatorLayout 的使用。要想用好 CoordinatorLayout，最重要的是要理解各种 Behaviors 的作用，只有掌握了 Behaviors 的使用方法，才能实现好协调各个组件的关系。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c54ddc6e1fc40e36ecbc98
