简介
Material Design 是一套由 Google 推出的设计语言，它提供了一组可以方便地在移动设备和 Web 上使用的界面元素和交互方式，为用户提供更好的使用体验。其中，CoordinatorLayout 是 Material Design 中非常重要的一个布局，它提供了一种灵活的方式来协调 App 内的各个元素。
CoordinatorLayout 的优点
在传统的布局中，各个组件都是固定的，不具备互动性。而在 CoordinatorLayout 中，我们可以通过添加一些特殊的子 View，使得子 View 之间可以有所交互，并且可以在用户操作时实现动态的效果。这种交互方式让用户感到更为自然，也能提升应用的质感。
以下是 CoordinatorLayout 的一些优点：
可以方便地实现一些复杂的布局效果。
具有互动性，可以在用户操作时实现动态的效果。
可以很好地适应各种屏幕大小和分辨率。
使用 CoordinatorLayout
在使用 CoordinatorLayout 进行布局之前，我们需要先添加如下依赖项：
implementation 'com.android.support:design:27.1.1'
接着，在布局文件中，我们可以像使用其他布局一样，添加 CoordinatorLayout 标签，并在其内部添加需要的子 View。子 View 可以是任何类型的 View，但是如果需要实现 CoordinatorLayout 的交互效果，必须要定义 CoordinatorLayout 的特殊 View，如 AppBarLayout、TabLayout、FloatingActionButton、Snackbar 等。
接下来，我们将对 CoordinatorLayout 中常用的 View 进行详细说明。
AppBarLayout
AppBarLayout 是一个可以实现滑动效果的 View，通常用于顶部导航栏的实现。我们可以在 AppBarLayout 中添加 Toolbar 和 TabLayout 等子 View，并且通过设置 AppBarLayout 的属性，来实现各种不同的效果。
以下是一些常用的 AppBarLayout 属性：
| 属性名 | 描述 |
|---|---|
| scrollFlags | 滑动属性，可以设置为 scroll、enterAlways、enterAlwaysCollapsed、exitUntilCollapsed 和 snap 等。 |
| elevation | 阴影效果，用于突出 AppBarLayout。 |
| liftOnScroll | 在滚动时使 AppBarLayout 浮起来，用于提升应用的质感。 |
-- -------------------- ---- ------- ------------------------------------------- ------------------------------- ----------------------------------- ------------------------------------ --------------------------------------------- ------------------- ------------------------------------------------------------- ---------------------------------- ------------------------- ----------------------------------- ------------------------------------ ------------------------------------------- --------------------------------------------- -- ---------------------------------------------展开代码
FloatingActionButton
FloatingActionButton 是一个浮动按钮，可以支持多种动效。当用户点击它时，可以触发相关操作。例如在一个列表中，点击 FloatingActionButton 可以返回到列表顶部。
以下是一些常用的 FloatingActionButton 属性：
| 属性名 | 描述 |
|---|---|
| fabSize | 设置按钮的大小，可以设置为 normal 或 mini。 |
| backgroundTint | 设置按钮的背景颜色。 |
| rippleColor | 设置点击按钮时的水波纹效果。 |
-- -------------------- ---- ------- --------------------------------------------------- -------------------------- ----------------------------------- ------------------------------------ ----------------------------------- ----------------------------------------- ------------------------------- ---------------------------------------- -------------------- ------------------------------------ --展开代码
TabLayout
TabLayout 可以实现一组 Tab 之间的切换效果。通过设置 TabLayout 的属性，我们可以自定义 Tab 的样式和布局，并且可以与 ViewPager 等组件进行结合。
以下是一些常用的 TabLayout 属性：
| 属性名 | 描述 |
|---|---|
| tabGravity | 设置 Tab 的对齐方式，可以设置为 center、fill 和 fill_with。 |
| background | 设置 TabLayout 的背景颜色或背景图片。 |
| tabMode | 设置 Tab 的模式，可以设置为 fixed 和 scrollable。 |
<android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" app:tabTextColor="@android:color/white" app:tabMode="scrollable" app:tabGravity="center" />
Snackbar
Snackbar 可以用于向用户显示简短的通知消息。当用户与应用程序交互时，Snackbar 可以立即弹出一条消息，以提供反馈。
以下是一些常用的 Snackbar 属性：
| 属性名 | 描述 |
|---|---|
| message | 设置 Snackbar 显示的消息文本。 |
| duration | 设置 Snackbar 显示的时长，可以设置为 LENGTH_SHORT 和 LENGTH_LONG。 |
| action | 设置 Snackbar 的操作按钮文本和点击事件。 |
Snackbar.make(view, "Snackbar Message", Snackbar.LENGTH_LONG) .setAction("Action", new View.OnClickListener() { @Override public void onClick(View view) { // Do something } }).show();
结束语
CoordinatorLayout 是 Material Design 中非常重要的一个布局，可以方便地实现一些复杂的布局效果，并且可以在用户操作时实现动态的效果。在进行布局时，我们可以使用一些特殊的 CoordinatorLayout View，如 AppBarLayout、TabLayout、FloatingActionButton 和 Snackbar，来实现更加灵活的布局。这些 View 除了提供标准的 UI 组件外，还提供了与应用程序交互的机制，为用户提供更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd0bf1e46428fe9e65fb73
