Android Material Design系列之SnackBar

前言

Snackbar 是一種針對操作的輕量級反饋機制，常以一個小的彈出框的形式，出現在手機屏幕下方或者桌面左下方。它們出現在屏幕所有層的最上方，包括浮動操作按鈕。

SnackBar會在超時或者用戶在屏幕其他地方觸摸之後自動消失。Snackbar 可以在屏幕上滑動關閉。當它們出現時，不會阻礙用戶在屏幕上的輸入，並且也不支持輸入。屏幕上同時最多只能現實一個 Snackbar。

Android 也提供了一種主要用於提示系統消息的膠囊狀的提示框 Toast。Toast 同 Snackbar 非常相似，但是 Toast 並不包含操作也不能從屏幕上滑動關閉。

效果圖

基本使用

compile 'com.android.support:design:24.0.0' //可修改版本號為自己匹配

Snackbar的基本使用很簡單，與Toast類似。

Snackbar.make(layoutRoot, "Hello SnackBar!", Snackbar.LENGTH_SHORT)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this,"Undo Click",Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();

Snackbar需要一個控件容器view用來容納，官方推薦使用CoordinatorLayout來確保Snackbar和其他組件的交互，比如滑動取消Snackbar、Snackbar出現時FloatingActionButton上移。顯示時間duration有三種類型LENGTH_SHORT、LENGTH_LONG和LENGTH_INDEFINITE。

setAction()方法可設置Snackbar右側按鈕，增加進行交互事件。如果不使用setAction()則只顯示左側message。

自定義Snackbar

修改左側Message的顏色和Snackbar的背景顏色

在源碼中Snackbar中定義了一個繼承自LinearLayout的內部類SnackbarLayout，Snackbar的樣子就是由這個SnackbarLayout實現的。SnackbarLayout由一個TextView和一個Button組成,所以TextView就是Snackbar左側的message。

View view = snackbar.getView();//獲取Snackbar的view
    if(view!=null){
        view.setBackgroundColor(backgroundColor);//修改view的背景色
        ((TextView) view.findViewById(R.id.snackbar_text)).setTextColor(messageColor);//獲取Snackbar的message控件，修改字體顏色
    }

Snackbar中增加圖標

前面提到過Snackbar的view是由SnackbarLayout實現的，而SnackbarLayout是繼承自LinearLayout，所以我們新建一個布局添加進去不就可以實現了

Snackbar snackbar= Snackbar.make(layoutRoot,"Message", Snackbar.LENGTH_LONG);

View snackbarview = snackbar.getView();
        Snackbar.SnackbarLayout snackbarLayout=(Snackbar.SnackbarLayout)snackbarview;

        View add_view = LayoutInflater.from(snackbarview.getContext()).inflate(R.layout.addview,null);

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
        params.gravity= Gravity.CENTER_VERTICAL;

        snackbarLayout.addView(add_view,0,params);

工具類(來源於網上)

package com.example.hfs.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 SnackbarUtils {

    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 params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
        params.gravity= Gravity.CENTER_VERTICAL;

        snackbarLayout.addView(add_view,index,params);
    }

}