Snackbar样式

编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过!

英文原文:Part 3 – Styling Snackbar 


欢迎来到design support library 教程的第三部分。目前为止我们已经在这个系列中讨论了浮动操作按钮 (FAB) 以及 Snackbar 。

Snackbar样式

前一篇文章  中我们看到了如何显示Snackbar,但是今天我们将看到如何显示不同颜色的snackbar,向用户传递更多暗示信息,比如snackbar背景显示成红色表明这是一个警告提示。

实际上,我已经在GDG 应用中用Snackbar替代Crouton,但是Crouton可以提供不同的样式,比如STYLE.ALERT,TYLE.INFO。因此我在思考如何显示相同类型的彩色的snackbar,Gabriele Mariotti在Gist上的分享给了我灵感。这里是我刚刚对GDG应用做的Snackbar 改进 。

1436865972120032.png1436865983111538.png

如何为Snackbar添加背景颜色

你可以通过getView() 方法获取Snackbar的核心视图,然后就可以在对它采用任意颜色了。

比如:

 
 
  1. snackbar.getView().setBackgroundColor(colorId);

下面是ColoredSnackbar类,它封装了一些方法,可以根据用户指定的类型显示不同背景颜色。

 
 
  1. public class ColoredSnackbar {
  2.  
  3.     private static final int red = 0xfff44336;
  4.     private static final int green = 0xff4caf50;
  5.     private static final int blue = 0xff2195f3;
  6.     private static final int orange = 0xffffc107;
  7.  
  8.     private static View getSnackBarLayout(Snackbar snackbar) {
  9.         if (snackbar != null) {
  10.             return snackbar.getView();
  11.         }
  12.         return null;
  13.     }
  14.  
  15.     private static Snackbar colorSnackBar(Snackbar snackbar, int colorId) {
  16.         View snackBarView = getSnackBarLayout(snackbar);
  17.         if (snackBarView != null) {
  18.             snackBarView.setBackgroundColor(colorId);
  19.         }
  20.  
  21.         return snackbar;
  22.     }
  23.  
  24.     public static Snackbar info(Snackbar snackbar) {
  25.         return colorSnackBar(snackbar, blue);
  26.     }
  27.  
  28.     public static Snackbar warning(Snackbar snackbar) {
  29.         return colorSnackBar(snackbar, orange);
  30.     }
  31.  
  32.     public static Snackbar alert(Snackbar snackbar) {
  33.         return colorSnackBar(snackbar, red);
  34.     }
  35.  
  36.     public static Snackbar confirm(Snackbar snackbar) {
  37.         return colorSnackBar(snackbar, green);
  38.     }
  39. }

如何使用?

 
 
  1. Snackbar snackbar = Snackbar.make(getView(), R.string.hello_snackbar, Snackbar.LENGTH_SHORT);
  2. ColoredSnackBar.alert(snackbar).show();

这里,我使用的是fragment的getView()方法来获得view,不过你也可以使用FrameLayout或者CoordinatorLayout。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
又一个snackbar控件,但效果更丰富    集成:compile 'com.nispok:snackbar:2.11. '使用Snackbar.with(getApplicationContext()) // context     .text("Single-line snackbar") // text to display     .show(this); // activity where it is displayed或// Dismisses the Snackbar being shown, if any, and displays the new oneSnackbarManager.show(    Snackbar.with(myActivity)     .text("Single-line snackbar"));添加点击监听:SnackbarManager.show(         Snackbar.with(getApplicationContext()) // context         .text("Item deleted") // text to display         .actionLabel("Undo") // action button label         .actionListener(new ActionClickListener() {            @Override             public void onActionClicked(Snackbar snackbar) {                Log.d(TAG, "Undoing something");             }         }) // action button's ActionClickListener      , this); // activity where it is displayed如果想监听展开、关闭:SnackbarManager.show(     Snackbar.with(getApplicationContext()) // context         .text("This will do something when dismissed") // text to display         .eventListener(new EventListener() {             @Override             public void onShow(Snackbar snackbar) {                 myFloatingActionButton.moveUp(snackbar.getHeight());             }             @Override             public void onShowByReplace(Snackbar snackbar) {                 Log.i(TAG, String.format("Snackbar will show by replace. Width: %d Height: %d Offset: %d",                                         snackbar.getWidth(), snackbar.getHeight(),                                         snackbar.getOffset()));             }             @Override             public void onShown(Snackbar snackbar) {                 Log.i(TAG, String.format("Snackbar shown. Width: %d Height: %d Offset: %d",                         snackbar.getWidth(), snackbar.getHeight(),                         snackbar.getOffset()));             }             @Override             public void onDismiss(Snackbar snackbar) {                 myFloatingActionButton.moveDown(snackbar.getHeight());             }             @Override             public void onDismissByReplace(Snackbar snackbar) {                 Log.i(TAG, String.format(                                 "Snackbar will dismiss by replace. Width: %d Height: %d Offset: %d",                                 snackbar.getWidth(), snackbar.getHeight(),                                 snackbar.getOffset()));             }             @Override             public void onDismissed(Snackbar snackbar) {                 Log.i(TAG, String.format("Snackbar dismissed. Width: %d Height: %d Offset: %d",                                     snackbar.getWidth(), snackbar.getHeight(),                                     snackbar.getOffset()));             }         }) // Snackbar's EventListener     , this); // activity where it is displayed
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值