Material Design 下的 SnackBar 应用-JavaScript中文网-JavaScript教程资源分享门户

什么是 SnackBar？

SnackBar 是 Material Design 中一种常见的提示框，类似于 Android 系统中的 Toast，但它不会遮挡用户当前正在操作的界面，而是会在底部弹出，并在一段时间后自动消失。SnackBar 通常用于提示用户当前操作的结果或需要用户注意的信息。

SnackBar 的使用

添加依赖

在使用 SnackBar 之前，需要在项目中添加相关依赖。如果你使用的是 Android Studio，可以在 build.gradle 文件中添加以下代码：

dependencies {
    implementation 'com.google.android.material:material:1.0.0'
}

显示 SnackBar

SnackBar 的显示有两种方式：在 Activity 中显示和在 Fragment 中显示。

在 Activity 中显示

在 Activity 中显示 SnackBar 很简单，只需要调用 Snackbar.make() 方法即可：

Snackbar.make(view, "Hello, SnackBar!", Snackbar.LENGTH_SHORT).show();

其中，view 参数是当前界面中任意一个 View 的实例，SnackBar 会根据该 View 的位置来确定弹出位置。第二个参数是要显示的文本，第三个参数是 SnackBar 显示的持续时间，可以是 Snackbar.LENGTH_SHORT 或 Snackbar.LENGTH_LONG。

在 Fragment 中显示

在 Fragment 中显示 SnackBar 和在 Activity 中显示类似，只需要将 view 参数改为当前 Fragment 的根视图即可：

Snackbar.make(getView(), "Hello, SnackBar!", Snackbar.LENGTH_SHORT).show();

添加操作按钮

有时候，SnackBar 中不仅需要显示文本，还需要添加操作按钮，让用户可以直接执行某些操作。这时候，可以使用 setAction() 方法：

Snackbar.make(view, "File deleted", Snackbar.LENGTH_LONG)
        .setAction("Undo", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 撤销删除操作
            }
        })
        .show();

上面的代码中，setAction() 方法的第一个参数是操作按钮的文本，第二个参数是一个 OnClickListener 实例，用于处理按钮的点击事件。

自定义 SnackBar 样式

SnackBar 的样式可以通过 Snackbar 类的 setActionTextColor()、setTextColor()、setBackgroundTint() 等方法来修改。例如，下面的代码将 SnackBar 的背景色修改为蓝色：

Snackbar snackbar = Snackbar.make(view, "Hello, SnackBar!", Snackbar.LENGTH_SHORT);
snackbar.getView().setBackgroundColor(Color.BLUE);
snackbar.show();

在 SnackBar 中添加图标

如果需要在 SnackBar 中添加图标，可以通过自定义布局来实现。首先，创建一个包含图标和文本的布局文件 snackbar_layout.xml：

-- -------------------- ---- -------
------------- ----------------------------------------------------------
    -----------------------------------
    ------------------------------------
    --------------------------------
    -----------------------

    ----------
        -----------------------------------
        ------------------------------------
        ---------------------------------------
        ------------------------------------------

    ---------
        -----------------------------------
        ------------------------------------
        ------------------ ---------
        -----------------------
        ----------------------------------------
        ----------------------------------------
        -----------------------------------

---------------

然后，在代码中使用 Snackbar 的 setView() 方法将该布局文件设置为 SnackBar 的视图：

Snackbar snackbar = Snackbar.make(view, "", Snackbar.LENGTH_SHORT);
View customView = getLayoutInflater().inflate(R.layout.snackbar_layout, null);
snackbar.setView(customView);
snackbar.show();

总结

通过本文的介绍，我们了解了 Material Design 下的 SnackBar 应用，并学习了 SnackBar 的基本使用、添加操作按钮、自定义样式和添加图标等操作。在实际开发中，SnackBar 是一个非常实用的提示工具，可以帮助我们更好地向用户展示信息和操作结果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/663dc9c5d3423812e4be3993