首页 > 代码库 > Snackbar Toast

Snackbar Toast

官方文档中文翻译地址:https://github.com/1sters/material_design_zh/blob/master/SOURCE/components/snackbars-and-toasts.md

Snackbar 是一种针对操作的轻量级反馈机制,常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方,包括浮动操作按钮。它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时,不会阻碍用户在屏幕上的输入,并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。
Android 也提供了一种主要用于提示系统消息的胶囊状的提示框 Toast。Toast 同 Snackbar 非常相似,但是 Toast 并不包含操作也不能从屏幕上滑动关闭。

手机端 Snackbar 规格
  • 单行 Snackbar 高度:48 dp
  • 多行 Snackbar 高度:80 dp
  • 文本:Roboto Regular 14 sp
  • 操作按钮:Roboto Medium 14 sp, 大写文本
  • 默认背景填充色:#323232 100%
技术分享

Snackbar是Android Support Design Library库中的一个控件,可以在屏幕底部快速弹出消息,比Toast更加好用,官方推荐使用Snackbar代替Toast。
Snackbar显示在所有屏幕其它元素之上(屏幕最顶层),同一时间只能显示一个,当上一个还没显示完时调用show方法,会把上一个消失掉,直接显示最新的。
Snackbar的make方法的第一个参数是一个view,任何一个view都可以,但是官方推荐使用CoordinatorLayout,有两个好处:
  • 1、用户可以右滑消除掉snackbar
  • 2、当snackbar出现的时候,布局会移动一些UI元素,比如右下角的悬浮按钮会自动上移
view不一定直接就是CoordinatorLayout,该方法触发的时候,会一级一级的向上找,如果找到顶层还没找到就是没有,所以,还是建议直接使用CoordinatorLayout来当做这个参数,而不用系统浪费力气去找。
如果你的布局已经写好了,没有CoordinatorLayout,那么可以在最外面一层镶嵌上CoordinatorLayout,CoordinatorLayout就是相当于一个超级FrameLayout。

显示时间duration有三种类型LENGTH_SHORT、LENGTH_LONG和LENGTH_INDEFINITE。
setAction()方法可设置Snackbar右侧按钮,增加进行交互事件。如果不使用setAction()则只显示左侧message。
如果你想在Snackbar的显示时或消失时做些什么,可以调用Snackbar的setCallback方法(废弃了)。
  1. public class MainActivity extends ListActivity {
  2. protected void onCreate(Bundle savedInstanceState) {
  3. super.onCreate(savedInstanceState);
  4. String[] array = {"默认样式,SHORT", //
  5. "默认样式,LONG", //
  6. "点击事件,setAction", //
  7. "设置Snackbar的文字和背景颜色",};
  8. setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, new ArrayList<String>(Arrays.asList(array))));
  9. }
  10. @Override
  11. protected void onListItemClick(ListView l, View view, int position, long id) {
  12. switch (position) {
  13. case 0:
  14. Snackbar.make(view, "默认样式的Snackbar", Snackbar.LENGTH_SHORT).show();
  15. break;
  16. case 1:
  17. Snackbar.make(view, "默认样式的Snackbar默认样式的Snackbar默认样式的Snackbar", Snackbar.LENGTH_LONG).show();
  18. break;
  19. case 2:
  20. Snackbar.make(view, "点击事件", Snackbar.LENGTH_LONG)
  21. .setAction("点击", new View.OnClickListener() {
  22. @Override
  23. public void onClick(View v) {
  24. Toast.makeText(MainActivity.this, "点击事件", Toast.LENGTH_SHORT).show();
  25. }
  26. })
  27. .setActionTextColor(0xffff0000)//设置右侧文字的颜色
  28. .show();
  29. break;
  30. case 3:
  31. Snackbar snackbar = Snackbar.make(view, "设置Snackbar的文字和背景颜色", Snackbar.LENGTH_LONG);
  32. snackbar.getView().setBackgroundColor(0xff0000ff);//设置Snackbar背景颜色
  33. ((TextView) snackbar.getView().findViewById(R.id.snackbar_text)).setTextColor(0xffff0000);//设置Snackbar文字颜色
  34. snackbar.show();
  35. break;
  36. }
  37. }
  38. }
2017-5-22


null


Snackbar Toast