Material Design 是 Google 推出的一种设计语言，旨在提供更为一致、更为美观和更为直观的用户界面，同时它也是移动端设计的趋势之一。在实现 Material Design 中，CoordinatorLayout 和 AppBarLayout 是常用的布局方式，下面就详细介绍一下 CoordinatorLayout 和 AppBarLayout 的使用方法。
CoordinatorLayout
CoordinatorLayout 是 Android Support Library 中新增的布局，它是一个能够相互协调的视图容器。它可以用来协调子 View 之间的布局以及响应它们的交互行为。与其他的布局比如 LinearLayout、RelativeLayout 等相比，CoordinatorLayout 可以更加灵活地管理子 View 的位置，通过设置子 View 的 Behaviors 可以让它们在特定的情况下执行特定的行为。
下面是一个 CoordinatorLayout 的示例：
-- -------------------- ---- -------
------------------------------------------------
----
----------
------------------------------------------------------------
--- --
-----------------------
-------------------------------------
--- --
--------------------------------------------------在上述代码中，CoordinatorLayout 是一个容器，里面包裹了两个子 View：一个 ImageView 和一个自定义的 CustomView。这两个子 View 都使用了 app:layout_behavior 属性，用来设置它们的 Behavior。其中 ImageView 使用了 AppBarLayout.ScrollingViewBehavior，是一个提供了滑动特性的 Behavior，它可以与 AppBarLayout 配合实现特殊的滑动效果。
AppBarLayout
AppBarLayout 是可滑动的 ActionBar，与 Toolbar 类似，可以包含类似于标题、操作按钮等元素。AppBarLayout 可以与 CoordinatorLayout 配合起来使用，使得 Toolbar 可以变得具有滑动效果，并且当 AppBarLayout 中的 View 滑动时可以实现一些特别的效果，比如 Toolbar 变成一个小号的悬浮框，甚至消失不见。
下面是一个 AppBarLayout 的示例：
-- -------------------- ---- -------
-------------------------------------------
----
----------------------------------
--- --
----------------------------------------
--- --
---------------------------------------------在上述代码中，AppBarLayout 拥有一个 Toolbar 和一个 TabLayout。其中 Toolbar 是 AppBarLayout 的主要内容，而 TabLayout 是用来实现 Tab 界面的。
CoordinatorLayout 与 AppBarLayout 的使用
为了实现更多的交互效果，通常使用 CoordinatorLayout 和 AppBarLayout 会需要以下几个步骤：
- 设置 CoordinatorLayout 作为根布局。
- 在 CoordinatorLayout 中设置 AppBarLayout。
- 在 AppBarLayout 中放置 Toolbar。
- 在 AppBarLayout 中放置其他控件，如 TabLayout。
- 在子控件中设置各种不同的 Behavior，例如 AppBarLayout.ScrollingViewBehavior、NestedScrollingChild 等。
在实现 CoordinatorLayout 和 AppBarLayout 中，还需要注意以下事项：
- 在 CoordinatorLayout 中的子 View 必须设置 Behavior。
- 在 AppBarLayout 中，最好使用 android:fitsSystemWindows="true" 来处理状态栏固定情况。
- AppBarLayout 中的子 View 会具有 NestedScrollingChild 特性，而在 CoordinatorLayout 中的子 View 则不能直接与之交互。
下面是一个使用 CoordinatorLayout 和 AppBarLayout 的示例代码：
-- -------------------- ---- -------
------------------------------------------------
----
-------------------------------------------
--------------------------------
----
----------------------------------
--- --
----------------------------------------
--- --
---------------------------------------------
----------------------------------
-----------------------------------
------------------------------------
------------------------------------------------------------ --
--------------------------------------------------在上述代码中，ViewPager 使用了 app:layout_behavior 属性，值为 AppBarLayout.ScrollingViewBehavior，这使得 ViewPager 具有了 AppBarLayout 的滑动效果。在实际使用中，可以根据自己的需求选择不同的 Behavior，从而实现私人定制的交互体验。
总结
在实现 Material Design 中，CoordinatorLayout 和 AppBarLayout 是常用的布局方式，它们可以通过 Behaviors 实现扩展性的体验。通过上述内容的介绍，您已经掌握了如何使用 CoordinatorLayout 和 AppBarLayout 以及相关细节和注意事项。同时，您还可以根据需求自定义 Behavior，实现更加独特的交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f05844f6b2d6eab3a59253