當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

SnackBar使用详解

發(fā)布時間：2023/12/20 编程问答 56 豆豆

生活随笔收集整理的這篇文章主要介紹了 SnackBar使用详解小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Snackbar是Android Support Design Library庫中的一個控件，可以在屏幕底部快速彈出消息，比Toast更加好用。本文對原生Snackbar進(jìn)行了修改，使其更加靈活。

前瞻：

1）SnackBars 提供了一個輕量級的反饋操作，他們在屏幕的底部顯示一條簡短的信息，如果是較大的設(shè)備就顯示在左下角。SnackBar出現(xiàn)在屏幕中所有其他元素的上方，同一時間只能顯示一條SnackBar。

2）在超時或者用戶在屏幕上完成了交互的時候SnackBar會自動消失，特別是在召喚了新的表層（意思是SnackBar本來是最外層的，然后在SnackBar上又新添加了一層）或者Activity的時候。SnackBar能在屏幕上側(cè)滑。

3）SnackBar能包含一個action使用setAction方法

4）你可以通過它的CallBack來得知Snackbar是顯示還是隱藏

從上面注釋的簡單介紹，我們拿它與Toast進(jìn)行比較，是不是覺得SnackBar有好多優(yōu)勢啊：

1.SnackBar可以自動消失，也可以手動取消(側(cè)滑取消，但是需要在特殊的布局中，后面會仔細(xì)說)

2.SnackBar可以通過setAction（）來與用戶進(jìn)行交互

3.通過CallBack我們可以獲取SnackBar的狀態(tài)

1.Snackbar基本介紹

使用Snackbar要導(dǎo)入com.android.support:design庫。如：

dependencies {compile fileTree(include: ['*.jar'], dir: 'libs')testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.3.0' compile 'com.android.support:design:23.3.0' }

Snackbar顯示在所有屏幕其它元素之上(屏幕最頂層)，同一時間只能顯示一個snackbar。

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

Snackbar.make(view, message_text, duration).setAction(action_text, click_listener).show();

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

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

Snackbar.make(coordinatorLayout,"這是massage", Snackbar.LENGTH_LONG).setAction("這是action", new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this,"你點擊了action",Toast.LENGTH_SHORT).show();}}).show();

下面這張圖演示了上面代碼所實現(xiàn)的效果：Snackbar長顯示、點擊Action彈出toast提示以及Snackbar在CoordinatorLayout中滑動取消。

基礎(chǔ)演示.gif

如果你想在Snackbar的顯示時或消失時做些什么，可以調(diào)用Snackbar的setCallback()方法。

顯示時間（有三種狀態(tài)）：Snackbar.LENGTH_SHORT// 短時間顯示，然后自動取消

Snackbar.LENGTH_LONG// 長時間顯示，然后自動取消

Snackbar.LENGTH_INDEFINITE// 不消失顯示，除非手動取消

2.多彩Snackbar

Snackbar和Toast的默認(rèn)樣式都很單一，但是有時我們希望把不同類型信息區(qū)別顯示，從而使用戶更容易注意到提示信息。所以使Snackbar變色是一個好主意。

Snackbar的官方API只提供了setActionTextColor()這個方法修改Action的文字顏色，這怎么辦？查源碼吧，哪里不會點哪里。(><)

在源碼中我們看到Snackbar中定義了一個繼承自LinearLayout的內(nèi)部類SnackbarLayout，Snackbar的樣子就是由這個SnackbarLayout實現(xiàn)的。

SnackbarLayout中加載了R.layout.design_layout_snackbar_include布局文件，打開后看到下面這段代碼（我把padding、margin的具體數(shù)值也打了出來）：

由命名可知，以snackbar_text為名的TextView就是Snackbar左側(cè)的message。

好了，我們開始修改Snackbar的背景顏色和message字體顏色吧。

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

很簡單，沒有幾行代碼。

本文最后提供的Snackbar封裝類代碼中定義了4種不同類型的信息：Info(妹子向你發(fā)來一條消息)、Confirm(妹子已收到你發(fā)出的消息)、Warning(妹子刪除了你發(fā)出的消息)、Alert(妹子已將你拉黑)，分別用藍(lán)色、綠色、橙色、紅色來表示。

消息信息.png
警告和錯誤信息演示.gif

3.在Snackbar中增加圖標(biāo)

短文本

通常 Snackbar 的高度應(yīng)該僅僅用于容納所有的文本，而文本應(yīng)該與執(zhí)行的操作相關(guān)。Snackbar 中不能包含圖標(biāo)，操作只能以文本的形式存在。

最多0-1個操作，不包含取消按鈕

當(dāng)一個動作發(fā)生的時候，應(yīng)當(dāng)符合提示框和可用性規(guī)則。當(dāng)有2個或者2個以上的操作出現(xiàn)時，應(yīng)該使用提示框而不是 Snackbar，即使其中的一個是取消操作。如果 Snackbar 中提示的操作重要到需要打斷屏幕上正在進(jìn)行的操作，那么理當(dāng)使用提示框而非 Snackbar。

上面這段是谷歌 Material Design設(shè)計規(guī)范中的話。

但是我就是想在Snackbar中加圖標(biāo)增加趣味性，引起用戶注意怎么辦？我就是想在Snackbar中放兩個按鈕進(jìn)行可選非必要操作怎么辦？我就是想整幺蛾子。︿(￣︶￣)︿

設(shè)計規(guī)范中的說法是有道理的，因為官方認(rèn)為“Snackbar是一種針對操作的輕量級反饋機(jī)制”，做的麻煩了影響視覺感受。但是對于上述任性的開發(fā)者（或者是接了奇葩需求的苦逼開發(fā)者）我們也有解決方法。

前面我們提到過Snackbar的view是由SnackbarLayout實現(xiàn)的，而SnackbarLayout是繼承自LinearLayout，那么我們新建一個布局添加進(jìn)去不就行了么。(～o￣￣)～o...

public static void SnackbarAddView(Snackbar snackbar,int layoutId,int index) {View snackbarview = snackbar.getView();//獲取snackbar的View(其實就是SnackbarLayout)Snackbar.SnackbarLayout snackbarLayout=(Snackbar.SnackbarLayout)snackbarview;//將獲取的View轉(zhuǎn)換成SnackbarLayoutView add_view = LayoutInflater.from(snackbarview.getContext()).inflate(layoutId,null);//加載布局文件新建ViewLinearLayout.LayoutParams p = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);//設(shè)置新建布局參數(shù)p.gravity= Gravity.CENTER_VERTICAL;//設(shè)置新建布局在Snackbar內(nèi)垂直居中顯示snackbarLayout.addView(add_view,index,p);//將新建布局添加進(jìn)snackbarLayout相應(yīng)位置 }

上面的代碼中，如果我們不設(shè)置向Snackbar中添加的布局文件的布局參數(shù)，新布局會顯示在Snackbar內(nèi)的頂部。使用上述任性方法的時候要注意新加布局的大小和Snackbar內(nèi)文字長度，Snackbar過大或過于花哨了可不好看。

下面是使用示例。我們先新建一個布局，暫時命名為snackbar_addview.xml,簡單的放進(jìn)了一個ImageView，圖片就是android默認(rèn)圖標(biāo)。

<?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" > <ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:src="@mipmap/ic_launcher"/> </LinearLayout>

然后在activity中寫下snackbar的設(shè)置：

Snackbar snackbar= Snackbar.make(coordinatorLayout,"這是massage", Snackbar.LENGTH_LONG);SnackbarUtil.setSnackbarColor(snackbar,SnackbarUtil.blue); SnackbarUtil.SnackbarAddView(snackbar,R.layout.snackbar_addview,0);snackbar.show();
添加圖標(biāo)演示.gif

4.SnackbarUtil

我將我常用的Snackbar相關(guān)設(shè)置封裝成了一個類，大家可以根據(jù)自己的需求使用。

/*** Created by 趙晨璞 on 2016/5/1.*/ 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，可選預(yù)設(shè)類型* @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，可選預(yù)設(shè)類型* @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，可選預(yù)設(shè)類型* @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; }//選擇預(yù)設(shè)類型 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;} }/*** 設(shè)置Snackbar背景顏色* @param snackbar* @param backgroundColor*/ public static void setSnackbarColor(Snackbar snackbar, int backgroundColor) {View view = snackbar.getView();if(view!=null){view.setBackgroundColor(backgroundColor);} }/*** 設(shè)置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); }}

簡單的使用示例：

SnackbarUtil.ShortSnackbar(coordinator,"妹子向你發(fā)來一條消息",SnackbarUtil.Info).show();
消息演示.gif

整出幺蛾子的使用示例：

Snackbar snackbar= SnackbarUtil.ShortSnackbar(coordinator,"妹子刪了你發(fā)出的消息",SnackbarUtil.Warning).setActionTextColor(Color.RED).setAction("再次發(fā)送", new View.OnClickListener() {@Overridepublic void onClick(View v) {SnackbarUtil.LongSnackbar(coordinator,"妹子已將你拉黑",SnackbarUtil.Alert).setActionTextColor(Color.WHITE).show();}});SnackbarUtil.SnackbarAddView(snackbar,R.layout.snackbar_addview,0);SnackbarUtil.SnackbarAddView(snackbar,R.layout.snackbar_addview2,2);snackbar.show();

這個示例中調(diào)用了兩次SnackbarAddView()方法向Snackbar中添加了兩個不同的自定義布局，效果如下（不建議大家這么玩 _(:з」∠)＿）：

添加多布局.gif

暫時就是這些。[]~(￣￣)~*

總結(jié)

以上是生活随笔為你收集整理的SnackBar使用详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：利用PPT的平滑变换功能以及Onekey
下一篇：删除提示框插件