Part 3 – 装饰我们的Snackbar（翻译）

翻译

原文地址：http://www.technotalkative.com/part-3-styling-snackbar/

这是 Android design support library 教程的第三部分。到目前为止，我们在这一系列教程中只讲了 Floating action button (FAB) 和 Snackbar ，并且还没有讲到它们的真正迷人之处，come on. 今天我们继续。

装饰 Snackbar

在上一篇文章，我们学会了如何显示一个 Snackbar，今天我们来看看如何显示一个不同 Snackbar，使用户可以得到一个更有意义的指示，例如显示一个红色的 Snackbar 来表示警告信息。

对了，我还对 GDG android application做了一个改进，就是用 Snackbar 替换了Crouton，但 Crouton 提供了不同的样式，例如 STYLE.ALERT, STYLE.INFO ，所以我也想 Snackbar 能显示和 Crouton 一样类型的颜色，然后我从Gabriele Mariotti的 Gist 中得到了一个灵感。这就是我修改后的GDG android app 的 Snackbar 部分 。

如何改变 Snackbar 的背景颜色

你可以通过 getView() 这个方法获取到 Snackbar 这个 view，然后就可以设置你随心所欲的颜色。

example：

1

snackbar.getView().setBackgroundColor(colorId);

以下这个 ColoredSnackbar 类包含了一些显示不同颜色的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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;
 
    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);
    }
}

如何使用？

1
2

Snackbar snackbar = Snackbar.make(getView(), R.string.hello_snackbar, Snackbar.LENGTH_SHORT);
ColoredSnackBar.alert(snackbar).show();

这里我是在 fragment 里用getView()方法，你可以使用在 FrameLayout 或 CoordinatorLayout。

还有，如果你知道如何在 Snackbar 的左边显示一个 icon 的话，记得分享一下哦。下次再见。