（4.0.27.2）design support library：Snackbar

design support library第二部分：放弃Toast吧，用Snackbar

Design Support Library第三部分：Snackbar样式

编辑推荐：稀土掘金，这是一个针对技术开发者的一个应用，你可以在掘金上获取最新最优质的技术干货，不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎，想成为全栈工程师的朋友不要错过！

原文：http://davinci42.github.io/AndroidDesignSupportLibrary-2-Snackbar/ 

本文翻译自 Part 2 – Welcome Snackbar, Goodbye Toast!，

作者 Paresh Mayani

Snackbar 是 Android design support library 中的另一个组件。使用 Snackbar，可以在屏幕底部快速的显示一条消息，大体与 Toast 相同，但多了几分灵活性：

 

• 一小段时间之后、或者用户与屏幕触发交互，Snackbar 会自动消失；

• 可以包含一个可选的操作；

• 把 Snackbar 划出屏幕，可以弃用；

• 作为一条上下文敏感的消息，也是 UI 的一部分，并在屏幕内所有元素的上层显示，而不是像 Toast 消息一样位于屏幕中央；

• 一个时刻只能有唯一一个 Snackbar 显示。

语法规则 

Snackbar.make(view, message, duration)
        .setAction(action message, click listener)
        .show();

 

 

方法：

• make()

• setAction()

• show()

属性：

• make() 方法的第一个参数是一个 view，snackbar 会找到一个父 view，以寄存所赋的 snackbar 值。Snackbar 会沿着 view 的树状路径，找到第一个合适的布局或窗口视图，作为父 view。

• 上文提到，持续时间属性与 Toast 的相同，可选 LENG_SHORT 或者 LENGTH_LONG。

举例：

 

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 是一个带有 FAB 的 framelayout，可以参考之前的 FAB 示例布局。

点击 FAB 以查看结果：

 

可以正常运行，但是并不符合标准的 UX，应该按照下图所示，FAB 适当上移：

 

同时按照文档中描述：

在项目的 view 中添加 CoordinatorLayout，可以支持 snackbar 的更多特性，比如滑动消失，和 FAB 的自动移动。

我们将在这个系列的下一部分讨论CoordinatorLayout。

 

配置 Snackbar：

可以使用 setActionTextColor 和 setDuration 等选项，配置 snackbar：

 

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

 

 

 

 

 

Github 源代码下载

参考： Snackbar | Android Developers

 

 

 

 

Snackbar样式

 

前一篇文章  中我们看到了如何显示Snackbar，但是今天我们将看到如何显示不同颜色的snackbar，向用户传递更多暗示信息，比如snackbar背景显示成红色表明这是一个警告提示。

实际上，我已经在GDG 应用中用Snackbar替代Crouton，但是Crouton可以提供不同的样式，比如STYLE.ALERT，TYLE.INFO。因此我在思考如何显示相同类型的彩色的snackbar，Gabriele Mariotti在Gist上的分享给了我灵感。这里是我刚刚对GDG应用做的Snackbar 改进 。

 

如何为Snackbar添加背景颜色

你可以通过getView() 方法获取Snackbar的核心视图，然后就可以在对它采用任意颜色了。

比如：

 

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;
 
    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 snackbar = Snackbar.make(getView(), R.string.hello_snackbar, Snackbar.LENGTH_SHORT);
ColoredSnackBar.alert(snackbar).show();

 

这里，我使用的是fragment的getView()方法来获得view，不过你也可以使用FrameLayout或者CoordinatorLayout。

 

顺便，如果你知道如何自定义Snackbar文字左边的图标，请分享一下！下篇文章见。