作为一名前端开发者，一定会遇到 Material Design 这个话题，因为它是谷歌推出的 UI 设计指南，可以为我们的应用带来更好的用户体验。而其中一个重要的组件就是 CooridinatorLayout，它是 Material Design 中重要的布局模式之一。本文将详细介绍 CooridinatorLayout 的使用，帮助大家理解其深层次的原理，以及明确如何使用。
CooridinatorLayout 简介
CooridinatorLayout 是一个布局容器，它可以让子 View 协作展示，实现比较复杂的UI效果。它是 FrameLayout 的子类，仅承载了一种完全不同的布局行为。而其实现的核心则是 Behaviors。
Behaviors 是一种在 CoordinatorLayout 中被子 View 调用的类，它们影响子 View 的布局方式和交互方式。使用 Behaviors，可以定义一个 View 在它的 sibling Views 中的交互方式，常见的一些 Behaviors 包括：Anchor Behavior，Hide Bottom View On Scroll Behavior，Scrolling View Behavior 等。
与其他布局容器对比，CooridinatorLayout 最具有优势的一点就是它的「分离性」。每个 View 的 Behaviors 都在自己的类中，它们彼此独立，如果要修改某个 Behaviors，不需要修改整个布局文件。
CooridinatorLayout 使用
基本使用
在布局文件中定义 CooridinatorLayout
<android.support.design.widget.CoordinatorLayout android:id="@+id/cl_main" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 子视图 --> </android.support.design.widget.CoordinatorLayout>
此时，CoordinatorLayout 中放置的子 View 就可以使用 Behaviors 控制。在布局文件中，需要指定要使用的 Behavior 类来实现一些特殊效果。可以使用 layout_behavior 属性或者通过 setBehavior() 方法来实现。
例如，应用一个简单的滚动行为：
-- -------------------- ---- ------- ------------------------------------------------ ------------------------- ----------------------------------- ------------------------------------- --------------------------------------- ------------------------- ----------------------------------- ------------------------------------ ------------------------------------------------------------ -- --------------------------------------------------展开代码
自定义 Behavior
Android 提供了一些基本的 Behaviors，但是有时候我们需要自定义一个 Behavior。自定义的 Behaviors 主要有三个部分组成：
- 继承自 CoordinatorLayout.Behavior<view> 或者其子类；
- 重载一些方法；
- 在子 View 中通过布局属性指定 Behavior 类。
重载方法
CooridinatorLayout 的 Behavior 分为两种类型：Layout 和 Scroll。
Layout 类型的 Behavior 用于处理子 View 的布局，常见的 Layout Behaviors 包括：Anchor Behavior，Swipe Behavior 等。而 Scroll 类型的 Behavior 则用于在一组协作的 View 中控制滚动。因此，当我们自定义一个 Behavior 时，需要根据自己的需要，继承相应的类型，重载相应的方法。其中一些主要的方法如下：
- onDependentViewChanged(CoordinatorLayout parent, V child, View dependency) 当依赖 View 出现变化时调用，可以在此方法中控制子 View 的位置和大小。
- onStartNestedScroll(CoordinatorLayout parent, V child, View directTargetChild, View target, int nestedScrollAxes) 当一个嵌套的滑动开始时调用，可以在此方法中监听滚动事件。
- onStopNestedScroll(CoordinatorLayout parent, V child, View target) 当所有嵌套的滑动结束时调用，可以在此方法中处理一些事件（比如回弹等）。
示例代码
下面是一个简单的实例，用于说明 CooridinatorLayout 和 Behavior 的使用。
布局文件
-- -------------------- ---- ------- ------------------------------------------------ ------------------------- ----------------------------------- ------------------------------------- ---- ------------ ---------- --- ------------------------------------------- ----------------------------- ----------------------------------- ------------------------------------ ------------------------------------------------------------- ------------- ----------------------------------- ------------------------------------ ------------------------------- ---- -- --- --------- -------------------------- ----------------------------------- ------------------------------------ ----------------------- ------------------------- ------- ------ -------- ---------------------- -- ---- -- --- ---------- -------------------------- ----------------------------------- ------------------------------------ ------------------------------------ ------------------------------- ------------------------------ -- ---- -- --- --------- ---------------------------- ----------------------------------- ------------------------------------ ----------------------- ------------------ -- - ------ ---- --- ---- -------- -- --------------- --------------------------------------------- ---- ------- --- ---------------------------------- ------------------------- ----------------------------------- ------------------------------------------- -------------------------------------------- --------- ----------------------------------- ------------------------------------ ------------------------- ------- ------ -------- ----------------------- ------------------------ ------------------------------- -- ------------------------------------ --------------------------------------------------展开代码
Behavior 代码
-- -------------------- ---- ------- ------ ----- --------------- ------- ----------------------------------- - ------- --- --------------- ------ ----------------------- -------- ------------ ------ - -------------- ------- - --------- ------ ------- --------------------------------- ------- ------- ------ ---- ----------- - -- -- ---------------------------------- ------ ------ ---------- ---------- ----------------- - --------- ------ ------- ---------------------------------------- ------- ------- ------ ---- ----------- - -- --------------- -- -- - -------------- - ------------------ - -- ------ ----- -------- - - - ------- ----------------------- - --------------- ----- ----------- - ---------------------- - --------- ------------------------------------ ------ ----- - -展开代码
结语
CooridinatorLayout 作为 Material Design 中非常重要的一部分，能够帮助我们实现更多的 UI 效果。但是，要发挥它的优势，需要进一步研究和掌握其细节。本文从 CooridinatorLayout 的基本使用和自定义 Behavior 入手，介绍了 CooridinatorLayout 的使用方法。希望读者在实际开发中能够灵活运用，创造出更多令人惊艳的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6ac24a941bf7134c74d84
