一只大二狗的Android历程--Snackbar的使用

2017年5月13日 13：49
又是很长时间没有写博客了，其实是偷懒了，，，最近在网上看见一个很有意思的控件，叫Snackbar，和Toast一样属于轻量级的消息通知控件，如图所示

但是，Snackbar要比Toast的实用性要高的多，而且可以通过重写View的形式改变样式，下面先简单介绍下Snackbar的使用方法。

Snackbar

配置Snackbar

Snackbar不像Toast一样随手拿来就能用的，因为它属于一种拓展性的新功能，需要手动配置 Android Support Design Library，当然这个相当好配置，只需要在Android目录下找到build.gradle(Module:app)并添加上以下语句然后sync一下就好了(PS：下面的版本号是自己的，我只是列举的我的buildtool的版本号)

dependencies {

    compile 'com.android.support:support-v4:25.3.0'
    compile 'com.android.support:design:25.3.0'

}

配置完成以后我们就可以使用Snackbar类了

使用Snackbar

和Toast一样，Snackbar使用make来自定义容器，文本和显示的时长,使用show来显示，但是Snackbar可以通过setAction来做出相应的动作比如上面图片中显示Toast，以上图效果为例代码片段为

CoordinatorLayout coordinatorLayout=(CoordinatorLayout)findViewById(R.id.container);
            Snackbar.make(coordinatorLayout,"Message",Snackbar.LENGTH_LONG).setAction("Toast", new OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this, "I am a Toast", Toast.LENGTH_LONG).show();
                }
            }).show();

其中你们可能会疑惑的是参数1，coordinatorLayout是什么东西，Snackbar的显示需要继承单独的容器，这个容器随便什么类型的布局都可以，但是官方推荐使用CoordinatorLayout，之所以推荐是因为继承这个容器可以实现左右滑动取消Snackbar的显示，如果有悬浮按钮存在在父容器的底部时可以实现上移的效果，其实Toast也需要继承容器，但是这个容器必须是父容器

现在给出这个布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.eee.snackbar.MainActivity">

    <Button
        android:id="@+id/show"
        android:onClick="Snack"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

这里需要说的一点是，如果想要Snackbar填充满底部的话需要取消总布局中的padding值，不然只有左右会有空隙

以上就是最简单的用法了，为了体现Snackbar的优越之处，我们还可以实现下面的效果

其实这个还有能在指定位置插入图片的功能，但是我做的都失败了，文本和图片都覆盖在一块效果不好所以就没写出来

我借鉴了网上的写法，自己封装了一个可以自定义Snackbar的类，大家可以借鉴一下

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;

/**
 * Created by li124 on 2017/5/13.
 */

public class SnackbarUtil {

    /**
    *预设显示的模式
     * Info--->通知模式
     * Confirm--->确认模式
     * Warning--->警示模式
     * Alert--->警告模式
     *
     * 调用实例
     * SnackbarUntil.Info/Confirm/Warning/Alert
     */

    public static final int Info =1;
    public static final int Confirm =2;
    public static final int Warning =3;
    public static final int Alert =4;

    /**
     * 预设前景色和背景色
     * blue--->蓝色
     * red--->红色
     * origin--->橙色
     * green--->绿色
     *
     * 调用实例
     * SnackbarUtil.blue/red/origin/green
     */

    public static final String blue = "#6495ED";
    public static final String red = "#FF0000";
    public static final String origin = "#FF7F00";
    public static final String green = "#7CFC00";


    /**ShortSnackbar 设置短时间的 SnackBar
     * 参数设置
     * @param view ---> 包含SnackBar的布局
     * @param message ---> 显示的信息
     * @param messageColor ---> 设置信息的文本颜色
     * @param backgroundColor ---> 设置SnackBar的背景颜色
     * @return
     */
    public static Snackbar ShortSnackbar(View view,String message,int messageColor,int backgroundColor){
        Snackbar snackbar = Snackbar.make(view,message,Snackbar.LENGTH_SHORT);
        setSnackbarColors(snackbar,messageColor,backgroundColor);
        snackbar.show();
        return snackbar;
    }
    /**
     * @param view ---> 包含SnackBar的布局
     * @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);
        snackbar.show();
        return  snackbar;
    }



    /**LongSnackBar 设长时间的 SnackBar
     * 参数设置
     * @param view ---> 包含SnackBar的布局
     * @param message ---> 显示的信息
     * @param messageColor ---> 设置信息的文本颜色
     * @param backgroundColor ---> 设置SnackBar的背景颜色
     * @return
     */
    public static Snackbar LongSnackbar(View view,String message,int messageColor,int backgroundColor){
        Snackbar snackbar = Snackbar.make(view,message,Snackbar.LENGTH_LONG);
        setSnackbarColors(snackbar,messageColor,backgroundColor);
        snackbar.show();
        return snackbar;
    }
    /**
     * @param view ---> 包含SnackBar的布局
     * @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);
        snackbar.show();
        return  snackbar;
    }


    /**IndefiniteSnackBar 设永久存在的 SnackBar
     * 参数设置
     * @param view ---> 包含SnackBar的布局
     * @param message ---> 显示的信息
     * @param messageColor ---> 设置信息的文本颜色
     * @param backgroundColor ---> 设置SnackBar的背景颜色
     * @return
     */
    public static Snackbar IndefiniteSnackbar(View view,String message,int messageColor,int backgroundColor){
        Snackbar snackbar = Snackbar.make(view,message,Snackbar.LENGTH_INDEFINITE);
        setSnackbarColors(snackbar,messageColor,backgroundColor);
        snackbar.show();
        return snackbar;
    }
    /**
     * @param view ---> 包含SnackBar的布局
     * @param message ---> 显示的信息
     * @param type ---> 显示的模式
     * @return
     */
    public static Snackbar IndefiniteSnackbar(View view,String message,int type){
        Snackbar snackbar = Snackbar.make(view,message,Snackbar.LENGTH_INDEFINITE);
        switchType(snackbar,type);
        snackbar.show();
        return  snackbar;
    }


    /**
     *设置模式
     */
    private  static  void switchType(Snackbar snackbar,int type){
        switch (type){
            case Info:
                setSnackbarColors(snackbar,blue);
                break;
            case Confirm:
                setSnackbarColors(snackbar,green);
                break;
            case Warning:
                setSnackbarColors(snackbar,origin);
                break;
            case Alert:
                setSnackbarColors(snackbar,red);
                break;
        }
    }

    /**
     * 只设置背景颜色
     * @param snackbar
     * @param backgroundColor
     */

    public static void setSnackbarColors(Snackbar snackbar,String backgroundColor){
        View view = snackbar.getView();
        if (view!=null){
            view.setBackgroundColor(Color.parseColor(backgroundColor));
            ((TextView)view.findViewById(R.id.snackbar_text)).setTextSize(20);
        }
    }

    /**
     * 设置文本颜色和背景颜色
     * 如果想要设置Action文本的颜色可以使用API提供的 setActionTextColor();方法，括号内填写颜色的RGB
     * @param snackbar
     * @param messageColor
     * @param backgroundColor
     */
    public static void setSnackbarColors(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);
            ((TextView)view.findViewById(R.id.snackbar_text)).setTextSize(20);
        }
    }

    /**
     * 以下内容是设置背景图片的，但是遇见一个小问题，文本和图片会重叠，所以弃用了。。。。
     */
//    public static void SnackBarAddView(Snackbar snackbar,int layoutId,int index){
//        View view = snackbar.getView();
//        Snackbar.SnackbarLayout snackbarLayout=(Snackbar.SnackbarLayout)view;
//        View add_view = LayoutInflater.from(view.getContext()).inflate(layoutId,null);
//        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
//        params.gravity= Gravity.RIGHT;
//        snackbarLayout.addView(add_view,index,params);
        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);
//    }

}

使用方法很简单，下面给出一个实例

SnackbarUtil.ShortSnackbar(coordinatorLayout,"Message",SnackbarUtil.Info).setAction("Next",null).setActionTextColor(Color.WHITE);

到这里就差不多写完了，如果我写出能添加图片来的，我会再说的，如果现在还在用low low的Toast 那就赶紧来学习下使用Snackbar吧