相比于 Toast，Snackbar 的好處十分明顯，可讀性更強(qiáng)，還可以兼容 1-2 個(gè)次要操作，適用場(chǎng)景更加廣泛。因此，我整理了 Snackbar 的常見樣式以及設(shè)計(jì)注意事項(xiàng)。

在學(xué)習(xí)控件的設(shè)計(jì)方法之前，先來補(bǔ)充下基礎(chǔ) → 《這個(gè)控件叫什么？》

什么是Snackbar

Snackbar 是 Google Material Design 中提供的一種兼容提示與操作的消息控件。這也就意味著所有 Android 開發(fā)都可以直接通過官方插件來調(diào)用此控件。

此控件與 Toast 比較相似，通常用于低干擾度的消息提示，該消息可被忽略且不會(huì)打斷用戶當(dāng)前的操作。但相對(duì) Toast 而言，Snackbar 的優(yōu)勢(shì)在于可讀性更強(qiáng)，還可以兼容 1-2 個(gè)次要操作，適用場(chǎng)景會(huì)更加廣泛，有興趣的同學(xué)不妨可以在設(shè)計(jì)開發(fā)中嘗試使用，你會(huì)發(fā)現(xiàn)確實(shí)比 Toast 好用太多了。

下面就詳解 Snackbar 的一些特性和玩法。

Snackbar的常見樣式

Snackbar 的樣式可以根據(jù)設(shè)備的寬度進(jìn)行適配改變。

1. 窄屏：純文案

通常用于移動(dòng)設(shè)備豎屏。最多展示兩行，每行最大展示字?jǐn)?shù)可定義，超出兩行信息展示為……

2. 窄屏：文案+按鈕

通常用于移動(dòng)設(shè)備豎屏。文案最多展示兩行，每行最大展示字?jǐn)?shù)可定義，超出兩行信息展示為……

支持展示 1-2 個(gè)操作按鈕，按鈕顏色需突出（可自定義），當(dāng)按鈕展示不下時(shí)（文案過長(zhǎng)或按鈕文本過長(zhǎng)）允許折行顯示。

3. 寬屏：純文案

通常用于移動(dòng)設(shè)備橫屏。文案最多展示一行，最大展示字?jǐn)?shù)可定義，超出的字?jǐn)?shù)展示為……

4. 寬屏：文案+按鈕

通常用于移動(dòng)設(shè)備橫屏。文案最多展示一行，最大展示字?jǐn)?shù)可定義，超出的字?jǐn)?shù)展示為…...支持展示 1-2 個(gè)操作按鈕，按鈕顏色需突出（可自定義）。

Snackbar的顯示與消失機(jī)制

顯示時(shí)不會(huì)打斷用戶操作，在以下情況下會(huì)消失：

• 用戶點(diǎn)擊 Snackbar 上的操作，觸發(fā)操作的同時(shí)消失；
• 用戶點(diǎn)擊屏幕任意位置時(shí)立即消失；
• 用戶不進(jìn)行任何操作，持續(xù) 4～10 秒后自動(dòng)消失（時(shí)長(zhǎng)可自定義）。

Snackbar的顯示位置

當(dāng)頁有 Bottom app bar 或 Bottom Navigation 時(shí)，顯示在其上方（不可貼邊或發(fā)生重疊）。

當(dāng)頁無 Bottom app bar 或 Bottom Navigation 時(shí)，顯示在頁面底部（不可貼邊或發(fā)生重疊）。

當(dāng)頁底部有 Floating action button 時(shí)，顯示在其上方（不可貼邊或發(fā)生重疊）。

橫屏?xí)r，顯示在頁面左下方（不可貼邊）。

Snackbar的唯一性

需展示多個(gè) Snackbars 時(shí)，每次僅能顯示 1 個(gè)，之后的 Snackbar 應(yīng)在前一個(gè)消失后再顯示。

Snackbar的超時(shí)重置

在 Snackbar 顯示期間出現(xiàn)了 Dialogs，關(guān)閉 Dialog 后，重新顯示該 Snackbar 并重置顯示時(shí)長(zhǎng)，以確保用戶能讀完 Snackbar 上的信息。

Snackbar的幾點(diǎn)「不要」

• 不要使用與操作結(jié)果或進(jìn)程無關(guān)的文案描述；
• 不要使用「忽略」或「取消」的按鈕文案，因?yàn)?snackbar 會(huì)自動(dòng)消失；
• 不要使用 text button 之外的按鈕樣式，因?yàn)?snackbar 不會(huì)用于承載重要操作；
• 不要使用 2 個(gè)以上的按鈕，若確實(shí)需要，請(qǐng)考慮使用 Dialogs；
• 不要用于承載很重要的操作，若確實(shí)需要，請(qǐng)考慮使用 Dialogs；
• 不要遮擋 FAB 或底部導(dǎo)航。

使用范例

當(dāng)用戶手動(dòng)將某道題目成功添加至錯(cuò)題本時(shí)，使用 snackbar 告知用戶收藏是否成功并顯示「添加標(biāo)簽」按鈕引導(dǎo)，用戶可選擇點(diǎn)擊按鈕去添加標(biāo)簽，也可以選擇置之不理。

當(dāng)用戶成功提交問題反饋時(shí)，使用 snackbar 告知用戶提交是否成功。

歡迎關(guān)注作者的微信公眾號(hào)：「愚者筆記」