Material Design 中 Snackbar 的使用详解

阅读时长 7 分钟读完

在 Material Design 中,Snackbar 是一种轻量级的通知组件,通常用于向用户提供短期信息和简单的操作。Snackbar可以在操作成功、失败、警告等场景中使用,以便于在不打断用户操作的情况下,及时向用户反馈信息。本文将介绍Snackbar的使用方法,并提供实用的示例代码。

Snackbar 介绍

Snackbar 的外观

Snackbar有一个悬浮于屏幕底部的外观,与底部 Navigation Bar 间距为 8dp。外观包括一段文本和一个可选的操作按钮。

Snackbar 的交互

当用户与 Snackbar 中的操作按钮交互时,Snackbar 会消失,并执行相应的操作。如果没有操作按钮,Snackbar 会在一定时间后自动消失。

Snackbar 的时间

Snackbar 的持续时间默认为短时间,通常为 3 秒钟。可以设置Snackbar的持续时间为长时间,通常为 5 秒钟。

Snackbar 的使用

依赖

使用 Snackbar 需要在 project 根目录的 build.gradle 文件中增加如下依赖:

基本使用

创建Snackbar 需要三个参数:一个父布局 View,显示的文本以及显示时间。下面是一个示例:

其中 view 为 Snackbar 的父布局,可以是任何一个 View,Snackbar 在其下方显示。"Hello Snackbar!" 为 Snackbar 的显示文本。Snackbar.LENGTH_SHORT 指定了 Snackbar 的显示时间类型。

操作按钮

要给 Snackbar 添加操作按钮,需要通过 setAction 方法,按照以下方式创建一个 Snackbar:

其中 "Undo" 是操作按钮的文本, new View.OnClickListener() 是操作按钮的点击事件。点击操作按钮后,Snackbar 会消失,执行相应的操作。

自定义 Snackbar

如果要自定义 Snackbar 的外观和行为,可以通过 Snackbar.Callback 对象,按照以下方式创建 Snackbar:

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

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

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

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

此示例中创建了一个 Snackbar,设置了 Snackbar 的显示时间为 10 秒,并添加了一个自定义操作按钮。同时,通过 Snackbar.Callback 对象添加了 Snackbar 显示和消失的回调方法。

示例代码

下面是一个完整的示例代码:

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

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

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

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

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

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

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

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

其中,R.layout.activity_main 是包含 Button 控件的布局文件,R.id.button 是 Button 控件的 ID。

总结

Snackbar 是 Material Design 中常用的通知组件,旨在为用户提供短期信息和简单的操作。通过设置文本、显示时间和操作按钮,可以轻松创建 Snackbar。一旦 Snackbar 显示,通过响应回调来处理 Snackbar 的消失事件。希望本文对于您使用 Snackbar 有所帮助!

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

纠错
反馈