还在用Toast?你Out啦,试试Snackbar吧!

欢迎来到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用于设置显示时长。

如何使用

我们看一下如何使用:

1
2
3
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,不能是其它任何随机数。

示例:

1
2
3
4
5
6
7
8
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,比如setActionTextColorsetDuration:

1
2
3
4
5
6
7
8
9
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,在该系列文章中后续会讨论它。