前言
本文是 Material Design 系列第二篇:SnackBar 的提出實際上介於 Toast 和 Dialog 的中間產物,SnackBar 提供有關操作的輕量級反饋,它們在移動設備的屏幕底部顯示一條簡短消息。SnackBar 出現在屏幕上所有其他元素的上方,一次只能顯示一個。
它們在超時後或在屏幕上其他位置的用戶交互之後自動消失,特別是在召喚新的表面或活動的交互之後。
Snackbar 與 Toast 的主要區別是:Snackbar 可以滑動退出,也可以處理用戶交互(點擊)事件。
一、SnackBar 特徵
- Snackbar 會在超時或者用戶在屏幕其他地方觸摸之後自動消失
- 可以在屏幕上滑動關閉
- 出現時不會阻礙用戶在屏幕上的輸入
- 屏幕上同時最多隻能顯示一個 Snackbar
- 可以在 Snackbar 中添加一個按鈕,處理用戶點擊事件
- Snackbar 一般需要 CoordinatorLayout 來作爲父容器,CoordinatorLayout 保證 Snackbar 可以右滑退出
二、SnackBar 方法介紹
以下整理 SnackBar 常用的 API 方法:
方法 | 介紹 |
---|---|
make(View view, CharSequence text, int duration) | 創建 SnackBar 以顯示消息 |
setAction(int resId, View.OnClickListener listener) | 設置要在此顯示的動作 |
setActionTextColor(ColorStateList colors) | 設置指定操作的文本顏色 |
setBackgroundTint(int color) | 設置背景 Drawable 的色調顏色 |
setCallback(Snackbar.Callback callback) | 添加回調方法 |
show() | 顯示 SnackBar |
dismiss() | 隱藏 Snackbar |
getContext() | 獲取父佈局所使用的 Context |
isShown() | 判斷當前 Snackbar 是否正在顯示 |
isShownOrQueued() | 判斷當前 Snackbar 是否正在顯示或者已經添加到隊列裏 |
setDuration(int duration) | 設置消失時間 |
getView() | Snackbar 所對應的 SnackbarBaseLayout,自定義 Sanckbar 時需要使用 |
三、SnackBar 使用
Snackbar 基本上繼承了和 Toast 一樣的方法和屬性,例如 LENGTH_LONG 和 LENGTH_SHORT 用於設置顯示時長。
1、基礎使用
Snackbar.make(view, message, duration).show();
參數:
-
view:Snacker 要設置一個 View,Snacker 就顯示在該 View 上面
-
message:Snacker 左邊顯示是文字內容
-
duration:Snacker 顯示的時間,
- Snackbar.LENGTH_SHORT// 短時間顯示,然後自動取消
- Snackbar.LENGTH_LONG// 長時間顯示,然後自動取消
- Snackbar.LENGTH_INDEFINITE// 不消失顯示,除非手動取消
-
show():最後 Snaker 要加上這個纔會顯示
Snackbar.make(view, "提示:您有新消息", Snackbar.LENGTH_SHORT).show();
2、設置 SnackBar 文本顏色和背景顏色
Snackbar 的官方 API 只提供了 setActionTextColor()這個方法修改 Action 的文字顏色。在源碼中我們看到 Snackbar 中定義了一個繼承自 LinearLayout 的內部類 SnackbarLayout,Snackbar 的樣子就是由這個 SnackbarLayout 實現的。
-
通過 findViewById(R.id.snackbar_text)找到 SnackBar 的 id,然後強轉 TextView,調用 setTextColor()方法就可以完成字體顏色設置。
-
snackbar.getView()獲取到 SnackBar 背景佈局 View,調用 setBackgroundColor 完成背景顏色設置。
Snackbar snackbar = Snackbar.make(view, "提示:您有新消息", Snackbar.LENGTH_SHORT);
View snackbarView = snackbar.getView();
if (snackbarView != null) {
snackbarView.setBackgroundColor(Color.GRAY);
((TextView) snackbarView.findViewById(R.id.snackbar_text)).setTextColor(Color.YELLOW);
}
snackbar.show();
3、設置 setAction
setAction(CharSequence text, final OnClickListener listener)
參數:
- text 設置 SnackBar 右側文本
- listener 設置右側文本點擊事件
Snackbar.make(view, "提示:您有新消息", Snackbar.LENGTH_SHORT)
//設置Action,右邊一個按鈕
.setAction("確定", click -> {
Toast.makeText(SnackBarActivity.this,"Open Message",Toast.LENGTH_SHORT).show();
}).show();
以上案例給 Action 設置點擊事件,彈出一個 Toast,效果如下:
4、設置 setAction 文本顏色
setActionTextColor(int color)
參數:
- color:設置文本字體顏色
Snackbar.make(view, "提示:您有新消息", Snackbar.LENGTH_SHORT)
//設置Action,右邊一個按鈕
.setAction("確定", click -> {
})
//設置Action文本顏色
.setActionTextColor(Color.YELLOW)
.show();
5、設置 SnackBar 監聽事件
addCallback(BaseTransientBottomBar.BaseCallback<B> callback)
SnackBar 的回調中有個 onshow()和 onDismissed()兩個重要的方法。
- 一個是顯示的時候調用
- 一個是消失的時候調用
Snackbar.make(view, "提示:您有新消息", Snackbar.LENGTH_SHORT)
//設置Action,右邊一個按鈕
.setAction("確定", click -> {
})
//添加SnackBar監聽事件
.addCallback(new Snackbar.Callback() {
@Override
public void onShown(Snackbar sb) {
super.onShown(sb);
Toast.makeText(SnackBarActivity.this,"onShown",Toast.LENGTH_SHORT).show();
}
@Override
public void onDismissed(Snackbar transientBottomBar, int event) {
super.onDismissed(transientBottomBar, event);
Toast.makeText(SnackBarActivity.this,"onDismissed",Toast.LENGTH_SHORT).show();
}
})
.show();
onDismissed()方法中的 event 事件有 5 種:
-
滑動消失的時候調用
public static final int DISMISS_EVENT_SWIPE=0;
-
點擊 Action 消失的時候調用
public static final intDISMISS_EVENT_ACTION=1;
-
超時消失的時候調用
public static final intDISMISS_EVENT_TIMEOUT=2;
-
手動調用 dismiss()方法時調用
public static final intDISMISS_EVENT_MANUAL=3;
-
一個新的 SnackBar 出現的時候調用
public static final intDISMISS_EVENT_CONSECUTIVE=4;
四、Snackbar 與 Dialog 和 Toast 的比較
Dialog
模態對話框。也就說,此刻該對話框中的內容獲取了焦點,想要操作對話框以外的功能,必須先對該對話框進行響應。
應用場景:對於刪除確認、版本更新等重要性提示信息,需要用戶做出選擇的情況下,使用 Dialog。
Toast
非模態提示框。也就說提示框的顯示並不影響我們對其他地方的操作,Toast 無法手動控制隱藏,需要設置 Toast 的顯示時長,一旦顯示時間結束,Toast 會自動消失。如果多次點擊並顯示 Toast,就會出現 Toast 重複創建並顯示,給用戶造成一種 Toast 長時間不隱藏的幻覺。
應用場景:對於無網絡提示、刪除成功、發佈操作完成等這類不重要的提示性信息,使用 Toast。
Snackbar
Snackbar 和 Toast 比較相似,但是用途更加廣泛,並且它是可以和用戶進行交互的。Snackbar 使用一個動畫效果從屏幕的底部彈出來,過一段時間後也會自動消失。
應用場景:刪除操作時,彈出 Snackbar 用於確認刪除操作;消息發送失敗時,彈出 Snackbar,用於重新發送操作;當然重要的是與 MD 組件相結合,用戶體驗效果更佳。
源碼下載 源碼包含 Material Design 系列控件集合,定時更新,敬請期待!
五、總結
SnackBar 效果比 Toast 美觀的多,Material Design 系列的控件大多都是模仿 ios 的原生效果,所以現在好多項目應該都已經採用 SnackBar 來取代 Toast 了吧,本文對 SnackBar 的使用方法已經講解的很詳細了,源碼中作者日常開發中整理了一個 SnackBarUtils 工具類,歡迎下載源碼使用。希望看完本篇文章對你學習 SnackBar 有所幫助。
歡迎點評,誠邀 Android 程序員加入微信交流羣,加我微信備註拉你入羣:Jaynm888