Snackbar + Floating Action Button

另外一篇文章中，有关于Snackbar的相关介绍，这里主要做一个扩展。

Floating Action Button(FAB)

FAB主要在页面展示重要或常用的交互入口，它大多以圆形带阴影的按钮样式“浮”在当前页面上方。

FAB + Snackbar

先看效果：

这里模拟了一个点击FAB让按钮消失的效果，可以看出：

1. 点击FAB后，按钮Snackbar消失，同时底部出现了一条弹出消息snackbar；

2. 如果snackbar和FAB都处于同一个CoordinatorLayout之中时，snackbar出现后，FAB会被挤上去。

源码：

...

findViewById<FloatingActionButton>(R.id.floating_action_button).setOnClickListener {
    btnSnackbar.visibility = View.INVISIBLE
    val snackbar = Snackbar.make(findViewById(R.id.coordinator_layout), "已删除", Snackbar.LENGTH_LONG)
    snackbar.setAction("撤销") { btnSnackbar.visibility = View.VISIBLE }.show()
}

...
1
2
3
4
5
6
7
8
9

有关snackbar的介绍请参考另一篇文章。

这是一个最简单的FAB例子，除此之外还有不少炫酷的用法，如结合多个隐藏的FAB点击后显示并加上一些动画可以模拟一个展开的效果。更多可以参考FAB的Material设计篇：Buttons: floating action button - Material Design