Android Material Design 系列之 Snackbar 使用詳解

前言

本文是 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 種

  1. 滑動消失的時候調用

    public static final int DISMISS_EVENT_SWIPE=0;

  2. 點擊 Action 消失的時候調用

    public static final intDISMISS_EVENT_ACTION=1;

  3. 超時消失的時候調用

    public static final intDISMISS_EVENT_TIMEOUT=2;

  4. 手動調用 dismiss()方法時調用

    public static final intDISMISS_EVENT_MANUAL=3;

  5. 一個新的 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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章