Android Design Support Library全解:Part 2 Snackbar
Android Design Support Library系列第2弹: Snackbar “Providing lightweight, quick feedback about an operation is a perfect opportunity to use a snackbar.” image.png SnackBar是Design Support Library中很实用的控件,它可以在屏幕的底部展示快速消息,功能类似于Toast,但更加灵活和强大: SnackBar会在交互或者超时之后自动消失; SnackBar可以包含一个Action动作,来触发事件; SnackBar所展示的信息是UI的界面的一部分,它将出现于所有页面元素的之下,而Toast的是覆盖UI界面; 统一时间内,只会显示一条SnackBar。 因为SnackBar和Toast的功能相近,所以SnackBar继承了很多Toast的属性和方法,比如标识显示时间长短的LENGTH_LONG and LENGTH_SHORT。 使用方法 SnackBar的使用方法大致如下: Snackbar.make(view, message, duration) .setAction(action message, click listener) .show(); 其中: make() – 创建SnackBar来显示信息; setAction() – 设置Action事件; show() – 显示SnackBar; 需要说明的参数: make方法的第一个参数view,代表着SnackBar所要依附的父视图(parent view); make方法的最后一个参数duration,代表着SnackBar出现的时间,超过该时间之后便会消失。 下面我们看一个实例: Snackbar.make(rootlayout, "Hello SnackBar!", Snackbar.LENGTH_SHORT) .setAction("Undo", new View.OnClickListener() { @Override public void onClick(View v) { // 点击事件 } }) .show(); 其中,rootlayout为上一节中,包含FAB的framelayout,点击悬浮按钮就会弹出Snackbar。 Snackbar-framelayout 虽然Snackbar出现了,但是和我们预期的还是有差距,我们希望Snarkbar出现在最下方时,FAB等控件可以随之上移,比如下面的效果: Snackbar-with-CoordinatorLayout 这就需要配合CoordinatorLayout 控件来使用,我们会在后续的篇章里介绍。 自定义Snackbar样式 虽然可以通过setActionTextColor方法来设置Action字体样式,但是在实际的使用中,往往需要让Snackbar显示出不同的样式(字体和颜色)来体现出不同的意义。 如何为Snackbar添加背景颜色 你可以通过getView() 方法获取Snackbar所在的View,然后就可以在对它采用任意的背景颜色:snackbar.getView().setBackgroundColor(colorId); 下面是ColoredSnackbar类,它利用装饰器模式封装了一些方法,可以根据用户指定的类型显示不同背景颜色。 //彩色 public class ColoredSnackbar { //红色 private static final int red = 0xfff44336; //绿色 private static final int green = 0xff4caf50; //蓝色 private static final int blue = 0xff2195f3; //橙色 private static final int orange = 0xffffc107; //获得当前SnackBar所在的View private static View getSnackBarLayout(Snackbar snackbar) { if (snackbar != null) { return snackbar.getView(); } return null; } //装饰器 private static Snackbar colorSnackBar(Snackbar snackbar, int colorId) { View snackBarView = getSnackBarLayout(snackbar); if (snackBarView != null) { snackBarView.setBackgroundColor(colorId); } return snackbar; } //使用蓝色表示一般信息 public static Snackbar info(Snackbar snackbar) { return colorSnackBar(snackbar, blue); } //使用橙色表示提醒信息 public static Snackbar warning(Snackbar snackbar) { return colorSnackBar(snackbar, orange); } //使用红色表示警告信息 public static Snackbar alert(Snackbar snackbar) { return colorSnackBar(snackbar, red); } //使用绿色表示确认信息 public static Snackbar confirm(Snackbar snackbar) { return colorSnackBar(snackbar, green); } } 其使用方式很简单,先构建正常的SnackBar,然后调用ColoredSnackBar进行装饰: Snackbar snackbar = Snackbar.make(getView(), R.string.hello_snackbar, Snackbar.LENGTH_SHORT); ColoredSnackBar.alert(snackbar).show(); 效果如下: ColoredSnackBar 更多关于Design Support Library中控件的讲解将会在持续更新,欢迎关注。