Material Design 是 Google 推出的一种全新的设计语言，旨在提高用户体验和视觉效果，其中 Snackbar 是其中一种重要的组件，用于快速通知用户某种操作结果。这篇文章将详细介绍 Material Design 中 Snackbars 的使用方法，包括如何创建、设计和应用。
Snackbars （提示条）是什么？
Snackbar 是一个视觉小组件，通常用于在屏幕底部展示短暂的用户信息。一般情况下，Snackbar 会出现在当前活动的前景 UI 的上层，避免遮挡 MainContent。
Snackbar 可以用于以下场景：
- 显示短暂的用户信息；
- 反馈某个操作的结果；
- 提醒用户操作时的错误信息；
- 提示用户在应用中的一些行为，例如某个设置项的状态等。
下面是一个简单的示例，它展示了 Snackbar 的外观和定位方式：
如何创建 Snackbar？
在创建 Snackbar 之前，我们需要确保在 build.gradle 文件中添加了 Material Design 库的依赖：
dependencies {
implementation 'com.google.android.material:material:1.4.0'
}接下来，我们需要执行以下步骤来创建 Snackbar：
- 创建 SnackBar 实例
Snackbar mySnackbar = Snackbar.make(view, "这是我的 Snackbar", Snackbar.LENGTH_SHORT);
上面的代码中，make() 方法接收三个参数：
- 用于显示 Snackbar 的 View；
- 展示的文本内容；
- Snackbar 显示的时长，可选参数 Snackbar.LENGTH_SHORT 或 Snackbar.LENGTH_LONG。
- 设置 Snackbar 的行为
mySnackbar.setAction("Undo", mOnClickListener);setAction 方法用于设置当用户点击 Snackbar 上的操作按钮时的动作。这个方法有两个参数：
- 要显示的操作的文本；
- 按钮的点击事件监听器。
- 显示 Snackbar
mySnackbar.show();
如何自定义 Snackbar？
为了自定义 Snackbar，我们需要创建一个新的布局文件，并将其复制到应用的布局文件中。下面是一个简单的示例布局文件：
-- -------------------- ---- ------- ------------- ----------------------------------------------------------- ------------------------------------ ------------------------------------- --------------------------------- ----------------------- --------------------------------------------- - ----------- --------------------------------- --------------------------------- ------------------------------------- -------------------------------------- ----------------------------- -------------------------------- --- ---------- ---------------------------- ------------------------------------- -------------------------------------- ------------------------- ------------------------------------------ ------------------------ -------- --- ------------ ---------------
接着，加载这个布局文件，并将其放到 Snackbar 中：
-- -------------------- ---- ------- -------- -------- - ------------------------------------------------- --- ---------------------- ---- ------ - ------------------- -------- -------- - ------------------------------------------- --------------------- ----------- ----------------------------------- -------------------------------------- ----------------
如何应用 Snackbar？
Snackbar 除了可以作为反馈工具之外，还有许多应用场景，下面是几种常见的情况：
1. 与 FloatingActionButton 协同
Snackbar 通常与 FloatingActionButton 搭配使用。例如，我们可以在用户单击 FloatingActionButton 时显示 Snackbar：
myFab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "您单击了 FloatingActionButton", Snackbar.LENGTH_LONG).show();
}
});2. 显示长期操作的结果
通过 Snackbar，我们可以告诉用户某一项操作是否已成功或失败。例如，在使用网格视图下载图像时，我们可能想要在图片下载完成后显示 Snackbar。
3. 替代 AlertDialog 窗口
Snackbar 可以用于代替 AlertDialog 窗口。例如，我们可能想在用户单击 FloatingActionButton 时显示可用选项：
Snackbar snackbar = Snackbar.make(findViewById(R.id.myCoordinatorLayout), "", Snackbar.LENGTH_LONG);
snackbar.setAction("添加", new View.OnClickListener() {
@Override
public void onClick(View view) {
// Implement action here.
}
});
snackbar.show();总结
Snackbar 是 Material Design 的一种组件，非常适合用作快速提示和操作反馈。本文详细介绍了如何创建和自定义 Snackbar，以及如何在常见情景中使用它。快去试试吧！
示例代码
本文代码参考了这里。
完整的示例代码也可在我的 Github 上查看：Material Design Snackbar Demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475a0e1968c7c53b02a3cc5