Design Support Library——Snackbar篇

最新推荐文章于 2024-11-05 17:46:54 发布

chiqulao5770

最新推荐文章于 2024-11-05 17:46:54 发布

阅读量90

点赞数

文章标签： ux ui

原文链接：https://my.oschina.net/u/1995545/blog/479384

版权

Snackbar 是 Android design support library 中的另一个组件。使用 Snackbar，可以在屏幕底部快速的显示一条消息，大体与 Toast 相同，但多了几分灵活性：

一小段时间之后、或者用户与屏幕触发交互，Snackbar 会自动消失；
可以包含一个可选的操作；
把 Snackbar 划出屏幕，可以弃用；
作为一条上下文敏感的消息，也是 UI 的一部分，并在屏幕内所有元素的上层显示，而不是像 Toast 消息一样位于屏幕中央；
一个时刻只能有唯一一个 Snackbar 显示。

语法规则 s

Snackbar.make(view, message, duration)
        .setAction(action message, click listener)
        .show();

方法：

make()
setAction()
show()

属性：

make() 方法的第一个参数是一个 view，snackbar 会找到一个父 view，以寄存所赋的 snackbar 值。Snackbar 会沿着 view 的树状路径，找到第一个合适的布局或窗口视图，作为父 view。
上文提到，持续时间属性与 Toast 的相同，可选 LENG_SHORT 或者 LENGTH_LONG。

举例：

Snackbar.make(rootlayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
            @Override
            public void onClick(View v) {        // Perform anything for the action selected
            }
        }).show();

此处 rootlayout 是一个带有 FAB 的 framelayout，可以参考之前的 FAB 示例布局。

点击 FAB 以查看结果：

可以正常运行，但是并不符合标准的 UX，应该按照下图所示，FAB 适当上移：

同时按照文档中描述：

在项目的 view 中添加 CoordinatorLayout，可以支持 snackbar 的更多特性，比如滑动消失，和 FAB 的自动移动。

配置 Snackbar：

可以使用 setActionTextColor 和 setDuration 等选项，配置 snackbar：

 Snackbar.make(rootlayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
            @Override
            public void onClick(View v) {                // Perform anything for the action selected
            }
        }).setActionTextColor(R.color.material_blue).setDuration(4000).show();

转载于:https://my.oschina.net/u/1995545/blog/479384