还在用Toast？你Out啦，试试Snackbar吧！

Question

欢迎来到 Android design support library 系列教程第二部分，第一部分我们讨论了 Floating action button 的一些 attributes 和 常见 issues。

今天我们讨论一下另一个组件 Snackbar.

Welcome Snackbar, Goodbye Toast!

“Providing lightweight, quick feedback about an operation is a perfect opportunity to use a snackbar.”

Snackbar 是 design support library 中另一个组件，使用 Snackbar 我们可以在屏幕底部（大多时候) 快速弹出消息，它和 Toast 非常相似，但是它更灵活一些。

• 当它显示一段时间后或用户与屏幕交互时它会自动消失。
• 可以自定义 action-可选操作。
• swiping it off the screen 可以让 FAB 消失
• 它是 context sensitive message(自己理解吧),所以这些消息是 UI screen 的一部分并且它是显示在所有屏幕其它元素之上（屏幕最顶层)，并不是像 Toast 一样覆盖在屏幕上。
• 同一时间只能显示一个 snackbar。

Snackbar 基本上继承了和 Toast 一样的方法和属性，例如 LENGTH_LONG 和 LENGTH_SHORT 用于设置显示时长。

如何使用

我们看一下如何使用:

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

方法:

• make() – 生成 Snackbar 消息
• setAction() – 设置 action
• make() – 显示 Snackbar 消息

属性:

• make() 方法的第一个参数是一个 view, snackbar 会试着寻找一个父 view 来 hold 这个 view. Snackbar 将遍历整个 view tree 来寻找一个合适的父 view，它可能是一个 coordinatorLayout 也可能是 window decor’s content view,随便哪一个都行。
• 正如上面所提到，duration 参数和 Toast 中的 duration 参数类似，只能是 LENGTH_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 是 framelayout 并且添加了 FAB(Floating action button)，看一下 FAB 示例：

点击 FAB 查看结果：

程序没问题，但是对于用户体验来说并不太好，它应该向上移一些，如下图所示：

Having a CoordinatorLayout in your view hierarchy allows Snackbar to enable certain features, such as swipe-to-dismiss and automatically moving of widgets like FloatingActionButton.

我们在该系列文章的下一部分讨论 CoordinatorLayout。

配置 Snackbar 可选操作

我们可以使用额外的可选操作来配置 snackbar，比如setActionTextColor 和 setDuration:

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://github.com/PareshMayani/DesignSupportLibraryExamples

参考文档： https://developer.android.com/reference/android/support/design/widget/Snackbar.html

总结

在这部分文章中，我们讨论了 Snackbar，它和 TOAST 很相似，但是它更灵活一些。Snackbar 中可以定义 action，当用户与屏幕交互时或者显示一段时间后会自动消失。

通过 CoordinatorLayout 我们可以看到更多的 effects 和 behaviours，在该系列文章中后续会讨论它。