Snackbar使用详解

最新推荐文章于 2023-11-01 14:36:32 发布

xiaorulou

最新推荐文章于 2023-11-01 14:36:32 发布

阅读量2.1k

点赞数 2

分类专栏： ----1. Android应用文章标签： android 控件

本文链接：https://blog.csdn.net/xiaorulou/article/details/78683814

版权

----1. Android应用专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

xiaorulou

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Snackbar使用详解

Snackbar 是 Android design support library 中的另一个组件。使用 Snackbar，可以在屏幕底部快速的显示一条消息，大体与 Toast 相同，但多了几分灵活性：一小段时间之后、或者用户与屏幕触发交互，Snackbar 会自动消失；可以包含一个可选的操作；把 Snackbar 划出屏幕，可以弃用；作为一条上下文敏感的消息，也是 UI 的一部分，并在屏
复制链接

扫一扫