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

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

Android 也提供了一種主要用于提示系統(tǒng)消息的膠囊狀的提示框 Toast。Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作也不能從屏幕上滑動關(guān)閉。

用法

短文本

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

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_do_20_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_dont_20_large_mdpi.png" alt="" />

(上圖)不可取

暫時性

為了保證可用性，Snackbar 不應(yīng)該成為通往核心操作的唯一方式。作為在所有層的上方，Snackbar 不應(yīng)該持續(xù)存在或相互堆疊。

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_do_22_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_dont_22_large_mdpi.png" alt="" />

(上圖)不可取

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

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

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_do_24_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_dont_24_large_mdpi.png" alt="" />

(上圖)不可取

不要阻擋了浮動操作按鈕

垂直移動浮動操作按鈕到 Snackbar 的上方。

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_do_26_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_dont_26_large_mdpi.png" alt="" />

(上圖)不可取

規(guī)格

手機端 Snackbar

• 單行 Snackbar 高度：48 dp
• 多行 Snackbar 高度：80 dp
• 文本：Roboto Regular 14 sp
• 操作按鈕：Roboto Medium 14 sp, 大寫文本
• 默認背景填充色：#323232 100%

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-spec_toast_03_1_large_mdpi.png" alt="" /> http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-spec_toast_03_2_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-3-spec_toast_06_large_mdpi.png" alt="" />

平板/桌面端 Snackbar

• 單行 snackbar 高度：48 dp 以上
• 最小寬度：288 dp
• 最大寬度：568 dp
• 2 dp 圓角
• 文本：Roboto Regular 14 sp
• 操作按鈕：Roboto Medium 14 sp, 大寫文本
• 默認背景填充色：#323232 100%

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-snackbar_toast_08_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-snackbar_toast_10_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-spec_toast_12_large_mdpi.png" alt="" />

Android toast

開發(fā)者可以自定義的 Toast 和它在屏幕上的位置。如果你打算自定義 Toast 的話，強烈建議按照上述 Snackbar 的樣式來設(shè)計。

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts--specs-snackbar_toast_14_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-snackbar_toast_16_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-spec_toast_18_large_mdpi.png" alt="" />

原文：Snackbars and Toasts 翻譯：chenzimu7 校對：PoppinLp