Android 中的自定义 Snackbar

前言

Snackbars 在 Android 应用程序中很常见。几乎每个应用程序都使用 Snackbars 来显示有关应用程序中正在发生的事情的一些信息。您可以将 Snackbar 视为 Android 中 Toasts 的替代品或更好的版本。

默认情况下，Snackbar 显示在屏幕底部，它出现在屏幕上所有元素的顶部。它与某些视图相关联，并且仅当视图在屏幕上时才会显示 Snackbar。

所以，总的来说，我们可以说 Snackbars 很棒。但是为了将这种令人敬畏的感觉提升到一个新的水平，我们可以根据我们的需要自定义 Snackbar。在本博客中，我们将学习如何在 Android 中制作自定义 Snackbar。所以，让我们开始使用普通的 Snackbar。

使用普通 Snackbar

要在您的应用程序中使用 Snackbar，您需要做的就是在您的应用程序中拥有 Material Design 依赖项。build.gradle因此，在您的文件中添加以下依赖项：

implementation "com.google.android.material:$latest_version"

然后你可以像 Toast 一样使用 Snackbar。例如：

Snackbar.make(view, "Show some message here", Snackbar.LENGTH_SHORT).show()

上面的代码将在 Snackbar 中显示一条简单的消息。Snackbar 提供了一些功能。例如：

• setAction()：这可用于对 Snackbar 进行一些操作。例如，您可以使用 Snackbar 来显示网络错误消息并执行名为 Retry 的操作。
• setBackgroundColor()：这可以用来改变 Snackbar 的背景颜色。
• setAnchorView()：默认情况下，Snackbar 出现在屏幕底部。setAnchorView但是你可以在函数的帮助下改变它的位置。

还有其他功能可以与 Snackbar 一起使用。

定制Snackbar

现在，是时候创建我们自己的 Snackbar 了。

所以，我们要做的第一件事就是为 Snackbar 创建一个自定义布局。因此，为此，我们需要创建一些文件。创建两个名为CustomSnackbar和的类CustomSnackbarView。创建两个名为item_custom_snackbar和的 XML 文件layout_custom_snackbar。

将item_custom_snackbar包含 Snackbar 的元素。在这里，我们将在 Snackbar 中拥有一个文本视图和一个图像视图。您可以根据需要更改 UI。因此，将的代码item_custom_snackbar是：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="60dp">

    <ImageView
        android:id="@+id/ivCheck"
        android:layout_width="60dp"
        android:layout_height="match_parent"
        android:src="@drawable/ic_check_circle"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvMessage"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:padding="8dp"
        android:text="Payment Successful!"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/ivCheck"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

现在，要创建自定义 Snackbar 视图，您需要实现ContentViewCallback。这用于告诉 Snackbar 的内容何时开始出现以及何时从屏幕上消失。因此，将的代码CustomSnackbarView是：

class CustomSnackbarView @JvmOverloads constructor(
    context: Context,
    attributeSet: AttributeSet? = null,
    defaultStyle: Int = 0
) : ConstraintLayout(context, attributeSet, defaultStyle), ContentViewCallback {

    init {
        View.inflate(context, R.layout.item_custom_snackbar, this)
    }

    override fun animateContentIn(delay: Int, duration: Int) {
        // TODO("Use some animation")
    }

    override fun animateContentOut(delay: Int, duration: Int) {
        // TODO("Use some animation")
    }

}

在这里，我们有两个函数叫做animateContentIn和animateContentOut，它们用于在 Snackbar 的内容出现和从屏幕上消失时有一些动画。

现在，我们的自定义视图已准备就绪，我们可以在任何布局文件中使用此视图。所以，我们将在我们的layout_custom_snackbar 相同的代码将是：

<?xml version="1.0" encoding="utf-8"?>
<com.example.snackbarexample.CustomSnackbarView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

最后，CustomSnackbar遗嘱的代码是：

class CustomSnackbar(
    parent: ViewGroup,
    content: CustomSnackbarView
) : BaseTransientBottomBar<CustomSnackbar>(parent, content, content) {

    init {
        getView().setBackgroundColor(
            ContextCompat.getColor(
                view.context,
                android.R.color.transparent
            )
        )
        getView().setPadding(0, 0, 0, 0)
    }

    companion object {

        fun make(viewGroup: ViewGroup): CustomSnackbar {
            val customView = LayoutInflater.from(viewGroup.context).inflate(
                R.layout.layout_custom_snackbar,
                viewGroup,
                false
            ) as CustomSnackbarView

            customView.tvMessage.text = "Some Custom Message"

            return CustomSnackbar(viewGroup, customView)
        }
        
    }

}

在这里，您可以在代码本身中自定义 Snackbar 的内容，即您可以更改文本消息，也可以更改图像。默认情况下，Snackbar 的背景为灰色。因此，在init区块中，我们已将其设为透明。

现在，您可以通过调用make方法（通过传递父视图组）来使用这个类，就像普通的 Snackbar 一样。例如，您可以通过以下方式调用此类：

CustomSnackbar.make(window.decorView.rootView as ViewGroup).show()

这就像调用一个普通的 Snackbar 一样简单。这是您使用上述代码时得到的结果：

这样你可以通过这种方式，制作自己的自定义 Snackbar。