Material Design 是一种引导着用户进行全新体验的设计语言，添加了许多全新的元素和交互方式。气泡提示框是其设计中常用的元素之一，可以在用户操作时提供有用的提示和反馈。本文将分享如何在 Material Design 中实现气泡提示框。
基础概念
在 Material Design 中，气泡提示框被称为 Snackbar。Snackbar 是一个轻量级视图，以浮动形式显示在屏幕底部，并在一定时间后自动弹出。Snackbar 通常用于向用户提供短暂的反馈或通知，例如表单验证、操作成功或失败等。
Snackbar 通常包括一个短消息和一个或多个操作按钮。消息可以是文本或包含文本和图标的视图，操作按钮通常用于执行有关消息的操作或关闭消息。
实现步骤
步骤 1：添加依赖
在使用 Snackbar 之前，您需要将其添加到项目的依赖中。在 Gradle 中，可以通过以下方式添加：
implementation 'com.google.android.material:material:1.0.0'
步骤 2：添加布局
在布局文件中添加 Snackbar 视图。Snackbar 视图通常位于 CoordinatorLayout 中，并与其他视图共享同一个父布局。
-- -------------------- ---- ------- ---------------------------------------------------- ------------------------------------ ----------------------------------- ------------------------------------- ----------- ----------------------------------- ------------------------------------- ---- --- ----- ----- ---- --- ------------- -------------------------------------------------- ----------------------------------- ----------------------------------- ------------------------------------ ------------------ --------- ------------------------------------------ --------------------------------------- ------------------------------------------------------展开代码
步骤 3：显示 Snackbar
使用以下代码显示 Snackbar：
Snackbar.make(view, "Snackbar message", Snackbar.LENGTH_SHORT).show();
make()方法创建一个 Snackbar 对象，并接受三个参数：视图对象、消息文本和持续时间。show()方法显示 Snackbar。
示例：
-- -------------------- ---- ------- ------ ------------ - ------------------------------------- ----------------------------------- ---------------------- - --------- ------ ---- ------------ -- - ---------------- --------- --------- ------------------------------------------ --- ---------------------- - --------- ------ ---- ------------ -- - -- ------- ------ ---- - ---------- - ---展开代码
上面的代码会在单击按钮时显示一个含有消息文本和一个操作按钮的 Snackbar。操作按钮通过 setAction() 方法添加，并在单击时触发回调。
步骤 4：自定义 Snackbar
在 Material Design 中，Snackbar 可以被定制以匹配您的应用程序的颜色、字体和布局。例如，您可以更改 Snackbar 背景颜色、消息文本颜色、字体和图标。
您可以通过创建自定义 Snackbar 布局并使用 Snackbar.SnackbarLayout 类将其设置为 Snackbar 布局来实现此目的。还可以通过设置一个回调来处理更高级别的交互，例如定制进入和退出动画。
在下面的示例中，我们将自定义 Snackbar 的布局以改变气泡提示框的样式。
步骤 4.1：创建自定义 Snackbar 布局
-- -------------------- ---- ------- ---- ------------------- --- ---------------------------------------------------- ---------------------------------------------------------- --------------------------------------------------- --------------------------------- ----------------------------------- ------------------------------------ ---------------------------- ---------------------- ------------------------------------------ -------------------------------------- ---------- ----------------------------------- --------------------------- ---------------------------- ----------------------------------------- --------- ---------------------------------- ----------------------------------- ------------------------------------ --------------------------- ------------------------- ------------------------------------------------------展开代码
在此自定义 Snackbar 布局中，我们添加了一个 ImageView 和一个 TextView。ImageView 用于显示图标，TextView 用于显示消息文本。
步骤 4.2：创建自定义 Snackbar
-- -------------------- ---- ------- ---- -------------- - ----------------------------------------------------- ------ -------- -------- - -------------------------------- --- ----------------------- ----------------------- ------ - ------------------------- ------------------- -------- -------- - --------------------------------------------------- ------------------------ -------- ---------- -------------------- -- -- --- ------------------------------ --- ----------------展开代码
在此代码中，我们首先创建了一个包含空消息文本的 Snackbar 对象。然后，我们从 Snackbar 中获取它的布局，并将 Padding 设置为 0，并将自定义 Snackbar 布局添加为其第一个子视图。最后，我们显示 Snackbar。
结束语
以上是在 Material Design 中实现气泡提示框的详细过程。Snackbar 是提供有用反馈和通知的快速简便方法。如果您循序渐进，使用以上步骤，可以轻松实现气泡提示框，并自定义 Snackbar 布局以显示符合您应用程序设计的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c51cac6e1fc40e36e657ef
