Snackbar + Floating Action Button
另外一篇文章中,有关于Snackbar的相关介绍,这里主要做一个扩展。
Floating Action Button(FAB)
FAB主要在页面展示重要或常用的交互入口,它大多以圆形带阴影的按钮样式“浮”在当前页面上方。
FAB + Snackbar
先看效果:
这里模拟了一个点击FAB让按钮消失的效果,可以看出:
-
点击FAB后,按钮Snackbar消失,同时底部出现了一条弹出消息snackbar;
-
如果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()
}
...
有关snackbar的介绍请参考另一篇文章。
这是一个最简单的FAB例子,除此之外还有不少炫酷的用法,如结合多个隐藏的FAB点击后显示并加上一些动画可以模拟一个展开的效果。更多可以参考FAB的Material设计篇:Buttons: floating action button - Material Design