Material Design 中 SnackBar 控件如何实现定时关闭?

阅读时长 3 分钟读完

背景

Material Design 是 Google 推出的一种设计语言,旨在为移动和 Web 应用程序提供一致、美观、生动和功能强大的界面。SnackBar 是 Material Design 中经常使用的一种交互控件,它类似于通知,经常用于提供一些简短的提示信息。

SnackBar 控件默认是不自动关闭的,需要用户手动或程序关闭。但有时候我们希望 SnackBar 能自动定时关闭,这时候该如何实现呢?

实现方法

方法一:使用 Handler 定时关闭

我们可以使用 Handler 来实现 SnackBar 的定时关闭。首先在弹出 SnackBar 时,记录下当前时间(单位为毫秒),然后开启一个定时任务,规定在一定时间后自动关闭 SnackBar。定时任务的实现可以使用 Handler 的 postDelayed 方法,该方法接收两个参数: Runnable 对象和延迟时间(单位为毫秒)。当延迟时间到达时,Handler 就会自动去执行 Runnable 中的代码,这时候我们就可以在该 Runnable 中关闭 SnackBar 了。

示例代码如下:

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

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

上面的代码中,我们规定了 SnackBar 显示 3 秒钟后自动关闭。

方法二:使用 RxJava 定时关闭

如果我们的项目中已经集成了 RxJava,那么使用 RxJava 也是一种方便实现 SnackBar 定时关闭的方法。

首先我们需要在 Gradle 中导入 RxJava:

然后我们可以使用如下代码实现 SnackBar 定时关闭:

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

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

上面的代码中,我们使用了 RxJava 的 timer 方法,该方法接收两个参数:延迟时间和时间单位。当延迟时间到达时,就会执行 subscribe 中的代码,我们可以在该代码块中关闭 SnackBar。

总结

本文介绍了两种方法实现 SnackBar 的定时关闭。第一种方法使用了 Handler,第二种方法使用了 RxJava。这两种方法都很简单,你可以根据自己的实际情况选择使用哪种。实现 SnackBar 的定时关闭能够让用户获得更好的交互体验,是优化 App 的一种有效方法。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64ed88c3f6b2d6eab37ae6b5

纠错
反馈