Snackbar使用详解

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。

下面举例介绍

配置

在build.gradle中添加依赖

dependencies {    compile 'com.android.support:design:23.4.0'}

main_activity.xml布局如下：

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.dream.snackbardemo.MainActivity">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <Button            android:id="@+id/snackbar1"            android:text="默认的Snackbar"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"/>        <Button            android:id="@+id/snackbar2"            android:text="可点击的Snackbar"            android:layout_below="@id/snackbar1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"/>        <Button            android:id="@+id/snackbar3"            android:text="可改变背景色的Snackbar"            android:layout_below="@id/snackbar2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"/>        <Button            android:id="@+id/snackbar4"            android:text="可改变text和action的字体颜色的Snackbar"            android:layout_below="@id/snackbar3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"/>        <Button            android:id="@+id/snackbar5"            android:text="可添加图标的Snackbar"            android:layout_below="@id/snackbar4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"/>        <android.support.design.widget.CoordinatorLayout            android:id="@+id/container"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"/>    </RelativeLayout></android.support.constraint.ConstraintLayout>

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

Snackbar的样式：

        默认的Snackbar

       

Snackbar.make(container, " Snackbar1 可以左滑取消哦~", Snackbar.LENGTH_LONG)                        .setAction("Action", null).show();

       可点击action的Snackbar

Snackbar.make(container, "Snackbar2 ActionClick", Snackbar.LENGTH_LONG)                        .setAction("Click me", new View.OnClickListener() {                            @Override                            public void onClick(View v) {                                Snackbar.make(v, " Snackbar2 Click test ", Snackbar.LENGTH_LONG).show();                            }                        }).show();

      可改变背景色的Snackbar

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

snackBarView.setBackgroundColor(colorId);

下面是ColoredSnackbar类，它封装了一些方法，可以根据用户指定的类型显示不同背景颜色。

package com.dream.snackbardemo;import android.support.design.widget.Snackbar;import android.view.View;/** * Created by rd0353 on 2017/12/1. */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(container, "Snackbar3 change brackgroudcolor ", Snackbar.LENGTH_SHORT);                ColoredSnackbar.alert(snackbar).show();

     可改变text和action字体颜色的Snackbar

     对于Action可以通过Snack的bar的公开APIsnackbar.setActionTextColor(int color)设置，但是使用的时候不太好用，但是没有找到设置消息文字颜色的API，但是在查看Snackbar.class的时候找到了一个方法:

public View getView() {        return this.mView; }

当去查看setActionTextColor(int color)的时候，发现了这个方法也被调用了，用于获取Snackbar的用于显示Action的TextView实例。继续查看，可以发现，每一个Snackbar的内容通过其内部类SnackbarLayout来呈现，其具体声明如下:

public static class SnackbarLayout extends LinearLayout

而在Snackbar(ViewGroup parent)这个包级声明的方法中发现上面的getView()返回的mView就是SnackbarLayout实例，这个类的布局最终是layout_snackbar_include.xml，这个是Android Support Design Library库中的布局文件,具体内容如下:

<merge xmlns:android="http://schemas.android.com/apk/res/android">    <TextView            android:id="@+id/snackbar_text"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:paddingTop="@dimen/design_snackbar_padding_vertical"            android:paddingBottom="@dimen/design_snackbar_padding_vertical"            android:paddingLeft="@dimen/design_snackbar_padding_horizontal"            android:paddingRight="@dimen/design_snackbar_padding_horizontal"            android:textAppearance="@style/TextAppearance.Design.Snackbar.Message"            android:maxLines="@integer/design_snackbar_text_max_lines"            android:layout_gravity="center_vertical|left|start"            android:ellipsize="end"            android:textAlignment="viewStart"/>    <Button            android:id="@+id/snackbar_action"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="@dimen/design_snackbar_extra_spacing_horizontal"            android:layout_marginStart="@dimen/design_snackbar_extra_spacing_horizontal"            android:layout_gravity="center_vertical|right|end"            android:paddingTop="@dimen/design_snackbar_padding_vertical"            android:paddingBottom="@dimen/design_snackbar_padding_vertical"            android:paddingLeft="@dimen/design_snackbar_padding_horizontal"            android:paddingRight="@dimen/design_snackbar_padding_horizontal"            android:visibility="gone"            android:textColor="?attr/colorAccent"            style="?attr/borderlessButtonStyle"/></merge>

其实到这里，剩下的问题就可以很快解决了。从上面可以看出来，具体Snackbar的内容就是布局中的两个TextView,因此只要能够获取这两个个TextView实例，那么修改属性就非常简单了。而上面的getView()则解决了上面这个问题，因此可以写下面的帮助方法实现设置消息文本的颜色。

使用如下：

Snackbar snackbar = Snackbar.make(container, "Snackbar4 change text and action text color", Snackbar.LENGTH_LONG).setAction("click me", new View.OnClickListener() {                    @Override                    public void onClick(View v) {                        Snackbar snackbar = Snackbar.make(v, "ActionClick", Snackbar.LENGTH_LONG);                        setSnackbarMessageTextColor(snackbar, Color.parseColor("#FF0000"));                        snackbar.show();                    }                });                setSnackbarMessageTextColor(snackbar, Color.parseColor("#FF00FF"));                setSnackbarActionTextColor(snackbar, Color.parseColor("#FFFF00"));                snackbar.show();

 public static void setSnackbarMessageTextColor(Snackbar snackbar, int color) {        View view = snackbar.getView();        ((TextView) view.findViewById(R.id.snackbar_text)).setTextColor(color);    }    public static void setSnackbarActionTextColor(Snackbar snackbar, int color) {        View view = snackbar.getView();        ((Button) view.findViewById(R.id.snackbar_action)).setTextColor(color);    }

     可添加图标的Snackbar

    短文本

通常 Snackbar 的高度应该仅仅用于容纳所有的文本，而文本应该与执行的操作相关。Snackbar 中不能包含图标，操作只能以文本的形式存在。

最多0-1个操作，不包含取消按钮

当一个动作发生的时候，应当符合提示框和可用性规则。当有2个或者2个以上的操作出现时，应该使用提示框而不是 Snackbar，即使其中的一个是取消操作。如果 Snackbar 中提示的操作重要到需要打断屏幕上正在进行的操作，那么理当使用提示框而非 Snackbar。

那在Snackbar中加图标改怎么办呢？前面我们提到过Snackbar的view是由SnackbarLayout实现的，而SnackbarLayout是继承自LinearLayout，那么我们新建一个布局添加进去就可以了

snackbar_addview.xml如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center_vertical"    >    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_vertical"        android:src="@mipmap/ic_launcher"/></LinearLayout>

将常用的Snackbar相关设置封装成了一个类，可以根据自己的需求使用。

package com.dream.snackbardemo;import android.graphics.Color;import android.support.design.widget.Snackbar;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.widget.LinearLayout;import android.widget.TextView;public class SnackbarUtil {    public static final   int Info = 1;    public static final  int Confirm = 2;    public static final  int Warning = 3;    public static final  int Alert = 4;    public static  int red = 0xfff44336;    public static  int green = 0xff4caf50;    public static  int blue = 0xff2195f3;    public static  int orange = 0xffffc107;    /**     * 短显示Snackbar，自定义颜色     * @param view     * @param message     * @param messageColor     * @param backgroundColor     * @return     */    public static Snackbar ShortSnackbar(View view, String message, int messageColor, int backgroundColor){        Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_SHORT);        setSnackbarColor(snackbar,messageColor,backgroundColor);        return snackbar;    }    /**     * 长显示Snackbar，自定义颜色     * @param view     * @param message     * @param messageColor     * @param backgroundColor     * @return     */    public static Snackbar LongSnackbar(View view, String message, int messageColor, int backgroundColor){        Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_LONG);        setSnackbarColor(snackbar,messageColor,backgroundColor);        return snackbar;    }    /**     * 自定义时常显示Snackbar，自定义颜色     * @param view     * @param message     * @param messageColor     * @param backgroundColor     * @return     */    public static Snackbar IndefiniteSnackbar(View view, String message, int duration, int messageColor, int backgroundColor){        Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_INDEFINITE).setDuration(duration);        setSnackbarColor(snackbar,messageColor,backgroundColor);        return snackbar;    }    /**     * 短显示Snackbar，可选预设类型     * @param view     * @param message     * @param type     * @return     */    public static Snackbar ShortSnackbar(View view, String message, int type){        Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_SHORT);        switchType(snackbar,type);        return snackbar;    }    /**     * 长显示Snackbar，可选预设类型     * @param view     * @param message     * @param type     * @return     */    public static Snackbar LongSnackbar(View view, String message, int type){        Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_LONG);        switchType(snackbar,type);        return snackbar;    }    /**     * 自定义时常显示Snackbar，可选预设类型     * @param view     * @param message     * @param type     * @return     */    public static Snackbar IndefiniteSnackbar(View view, String message, int duration, int type){        Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_INDEFINITE).setDuration(duration);        switchType(snackbar,type);        return snackbar;    }    //选择预设类型    private static void switchType(Snackbar snackbar, int type){        switch (type){            case Info:                setSnackbarColor(snackbar,blue);                break;            case Confirm:                setSnackbarColor(snackbar,green);                break;            case Warning:                setSnackbarColor(snackbar,orange);                break;            case Alert:                setSnackbarColor(snackbar, Color.YELLOW,red);                break;        }    }    /**     * 设置Snackbar背景颜色     * @param snackbar     * @param backgroundColor     */    public static void setSnackbarColor(Snackbar snackbar, int backgroundColor) {        View view = snackbar.getView();        if(view!=null){            view.setBackgroundColor(backgroundColor);        }    }    /**     * 设置Snackbar文字和背景颜色     * @param snackbar     * @param messageColor     * @param backgroundColor     */    public static void setSnackbarColor(Snackbar snackbar, int messageColor, int backgroundColor) {        View view = snackbar.getView();        if(view!=null){            view.setBackgroundColor(backgroundColor);            ((TextView) view.findViewById(R.id.snackbar_text)).setTextColor(messageColor);        }    }    /**     * 向Snackbar中添加view     * @param snackbar     * @param layoutId     * @param index 新加布局在Snackbar中的位置     */    public static void SnackbarAddView(Snackbar snackbar, int layoutId, int index) {        View snackbarview = snackbar.getView();        Snackbar.SnackbarLayout snackbarLayout=(Snackbar.SnackbarLayout)snackbarview;        View add_view = LayoutInflater.from(snackbarview.getContext()).inflate(layoutId,null);        LinearLayout.LayoutParams p = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);        p.gravity= Gravity.CENTER_VERTICAL;        snackbarLayout.addView(add_view,index,p);    }}

使用如下：

Snackbar snackbar = SnackbarUtil.ShortSnackbar(container,"Snackbar4 add image",SnackbarUtil.Warning)                        .setActionTextColor(Color.RED)                        .setAction("再次点击", new View.OnClickListener() {                    @Override                    public void onClick(View v) {                        SnackbarUtil.LongSnackbar(v,"hello!!!",SnackbarUtil.Alert).setActionTextColor(Color.WHITE).show();                    }                });                SnackbarUtil.SnackbarAddView(snackbar,R.layout.snackbar_addview,0);                SnackbarUtil.SnackbarAddView(snackbar,R.layout.snackbar_addview,2);                snackbar.show();

源码地址：下载源码

参考文档：

      http://www.jianshu.com/p/cd1e80e64311/

     http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0714/3187.html

     http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0714/3186.html