Snackbar和Toast的花式使用,这一篇就够了

Foreword

这一篇是建立在我赌5毛你没见过这样的SpannableString基础上的,所以不会使用SpanUtils的小伙伴快去看看吧。

这一篇我会写得详尽一些,毕竟是为了一劳永逸,让大家也尽可能了解我是怎么做到的,这里,我会用图文结合的方式来为大家开车,好了,开车,嘟嘟嘟嘟~。

Introduce

Snackbar

首先,我介绍下Snackbar,它是support.design包下的一个widget,和Toast用途一样,可用来提示用户操作后的结果,但显示一般是在屏幕底部,较大的设备会在左下角显示,而且同一时间只能显示一条,它可以自动消失,也可以用户手动取消,但和Toast不同的是它会伴随Activity的结束而消失,其在绝对布局中还支持侧滑消失,其用法也和Toast很像,具体基本使用可以自行上网了解,我这里主要讲解其高端使用。

下面我简单介绍一下SnackbarUtils的API,后面演示我会一一细说。

Snackbar相关→SnackbarUtils.javaDemo

with           : 设置snackbar依赖view
setMessage     : 设置消息
setMessageColor: 设置消息颜色
setBgColor     : 设置背景色
setBgResource  : 设置背景资源
setDuration    : 设置显示时长
setAction      : 设置行为
show           : 显示snackbar
showSuccess    : 显示预设成功的snackbar
showWarning    : 显示预设警告的snackbar
showError      : 显示预设错误的snackbar
dismiss        : 消失snackbar
getView        : 获取snackbar视图
addView        : 添加snackbar视图

下面我来为其演示,说了那么多,总算要上图了。

short_snackbar

有些朋友可能会惊讶,卧槽,怎么和我平时看到的Snackbar不太一样,顶部是两圆角,前面还有图标,下面请听老司机分析,先上个代码压压惊。

SnackbarUtils.with(snackBarRootView)
        .setMessage(getMsg(R.string.snackbar_short))
        .setMessageColor(Color.WHITE)
        .setBgResource(R.drawable.shape_top_round_rect)
        .show();

实现如上效果,只需要以上代码即可,首先我们需要为Snackbar传递其parent视图,我用的是with()操作,用过Glide的小伙伴们肯定都知道with(),我觉得这词很好,所以也就拿来用了,后面setMessage()就是设置展示的消息了,其中参数为getMsg(xxx),这是现实图标的关键,下面放上源码。

private SpannableStringBuilder getMsg(@StringRes int resId) {
    return new SpanUtils()
            .appendLine(getString(resId))
            .setFontSize(24, true)
            .setIconMargin(R.mipmap.ic_launcher, 32, SpanUtils.ALIGN_CENTER)
            .append(" ").setFontSize(0)
            .create();
}

看到了吧,这里我使用的是SpannableString,因为展示的消息的容器是TextView,所以可以用各种SpannableString,搭配上我上一篇文章我赌5毛你没见过这样的SpannableString,用起来不要太爽,这里我用的是它的setIconMargin()来设置图标,因为这是属于段落型的SpannableString,所以我要把appendLine()产生的新行,用字体大小为0append(" ").setFontSize(0)代替,从而看起来只有一行存在。为了方便起见,我把设置消息字体颜色setMessageColor()和设置背景色setBgColor()及设置背景资源setBgResource()抽离了出来,所以顶部的两个圆角实现也是一语道破了,其用的是setBgResource()

图中显示的第二个Snackbar右侧还有可点击按钮,源码如下所示。

SnackbarUtils.with(snackBarRootView)
        .setMessage(getMsg(R.string.snackbar_short))
        .setMessageColor(Color.WHITE)
        .setBgResource(R.drawable.shape_top_round_rect)
        .setAction(getString(R.string.snackbar_click), Color.YELLOW, new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtils.showShort(getString(R.string.snackbar_click));
            }
        })
        .show();

这里只比之前多了个setAction(),就是设置点击相关的文字,字体颜色及点击事件。

默认如果不写setDuration(),那么Snackbar的显示时长为短时,Snackbar显示时长共包括三种,可以在setDuration()中传入SnackbarUtils.LENGTH_SHORTSnackbarUtils.LENGTH_LONGSnackbarUtils.LENGTH_INDEFINITE分别表示短时、长时、永久,这里我就不重复演示了。

如果SpanUtils都满足不了各位大佬们的需求,别急,这里柯基实现了其他的接口来帮助你们,这里提醒一下,Snackbar追求的是简洁明了,不要太过花里胡哨哈。

下面展示一下自定义的Snackbar,如下图所示。

custom_snackbar

结合以下源码。

SnackbarUtils.with(snackBarRootView)
        .setBgColor(Color.TRANSPARENT)
        .setDuration(SnackbarUtils.LENGTH_INDEFINITE)
        .show();
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
SnackbarUtils.addView(R.layout.snackbar_custom, params);

这里可以看到我们把Snackbar的背景设为了透明setBgColor(Color.TRANSPARENT),然后先调用了show(),因为只有先show()出来之后,我们才能获取到Snackbar的视图,然后对其加入我们自定义视图addView()即可。

但显示的第二个Snackbar还拥有点击消失的功能,这又是怎么实现的呢,其实答案已经呼之欲出了,我们只需要得到该视图即可,也就是API中的getView(),然后就是你们随心所欲的操作了,源码如下所示。

View snackbarView = SnackbarUtils.getView();
if (snackbarView != null) {
    TextView tvSnackbarCustom = (TextView) snackbarView.findViewById(R.id.tv_snackbar_custom);
    tvSnackbarCustom.setText("点我可消失");
    snackbarView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            SnackbarUtils.dismiss();
        }
    });
}

在此,Snackbar的高端玩法已经基本介绍完毕,除此之外,柯基还为大佬们封装了常用的几种,showSuccessshowWarningshowError,其效果如下图所示。

others_snackbar

方便快捷调用代码如下所示。

case R.id.btn_show_success:
    SnackbarUtils.with(snackBarRootView)
            .setMessage(getMsg(R.string.snackbar_success))
            .showSuccess();
    break;
case R.id.btn_show_warning:
    SnackbarUtils.with(snackBarRootView)
            .setMessage(getMsg(R.string.snackbar_warning))
            .showWarning();
    break;
case R.id.btn_show_error:
    SnackbarUtils.with(snackBarRootView)
            .setMessage(getMsg(R.string.snackbar_error))
            .showError();
    break;

好了,第一部分Snackbar的花式使用已介绍完毕,下面来说说大同小异的Toast

Toast

Toast这玩意家喻户晓,其基本使用我就不介绍了,需要注意的就是在show()之前要把之前的Toast取消掉,否则的话Toast会在队列中排队等待,造成不能及时得到当前需要的;还有一点就是异步show()的话也会报错,这些最基本的在ToastUtils都有解决。我们来看下其API介绍。

吐司相关→ToastUtils.javaDemo

setGravity           : 设置吐司位置
setView              : 设置吐司view
getView              : 获取吐司view
setBackgroundColor   : 设置背景颜色
setBackgroundResource: 设置背景资源
setMessageColor      : 设置消息颜色
showShortSafe        : 安全地显示短时吐司
showLongSafe         : 安全地显示长时吐司
showShort            : 显示短时吐司
showLong             : 显示长时吐司
cancel               : 取消吐司显示

可以看到其包括setView()getView(),没错,有了它们,就可以设置自定义视图了。下面我从最基本用法开始介绍吧,先上图。

normal_toast

可以看到包括短时和长时的Toast两类,我只介绍其一,另一种同理,显示短时Toast的源码如下所示。

case R.id.btn_show_short_toast_safe:
    new Thread(new Runnable() {
        @Override
        public void run() {
            ToastUtils.showShortSafe(R.string.toast_short_safe);
        }
    }).start();
    break;
case R.id.btn_show_short_toast:
    ToastUtils.showShort(R.string.toast_short);
    break;

可以看到我在异步的时候调用的是showShortSafe(),这样就可以安全地使用了,是不是很简洁,只需要传入你要显示的内容即可,而且连续show()也没什么问题。

作为常用操作,还支持设置文字颜色、背景颜色及背景资源,我们看下演示。

font_bg_toast

源码很简单,我就不做过多解释了,如下所示。

case R.id.btn_show_green_font:
    ToastUtils.setMessageColor(Color.GREEN);
    ToastUtils.showLong(R.string.toast_green_font);
    break;
case R.id.btn_show_custom_bg:
    ToastUtils.setBgResource(R.drawable.shape_round_rect);
    ToastUtils.showLong(R.string.toast_custom_bg);
    break;

花式使用?没错,又到了我们的SpanUtils上场了,所以,没了解的小伙伴们还不赶快去看看我赌5毛你没见过这样的SpannableString来提升逼格,再来秀一波。

span_toast

源码如下,和之前介绍Snackbar大相径庭,这里就不细说了。

case R.id.btn_show_span:
    ToastUtils.showLong(new SpanUtils()
            .appendLine(getString(R.string.toast_span))
            .setFontSize(24, true)
            .setIconMargin(R.mipmap.ic_launcher, 32, SpanUtils.ALIGN_CENTER)
            .append(" ").setFontSize(0)
            .create());
    break;

同理,如果SpanUtils满足不了你的需求,那我们就自定义吧,不过Toast真的要这么花哨么,这是在搞事情,上图了。

custom_toast

源码如下,用得真是太简单了,为你们解放双手。

case R.id.btn_show_custom_view:
    ToastUtils.setView(R.layout.toast_custom);
    ToastUtils.showLong("");
    break;

last but not least,Toast还支持位置的变动,我就演示一下居中显示,如下所示。

middle_toast

源码如下,通俗易懂。

case R.id.btn_show_middle:
    ToastUtils.setGravity(Gravity.CENTER, 0, 0);
    ToastUtils.showLong(R.string.toast_middle);
    break;

好了,Toast相关已介绍完毕。

Conclusion

大佬们不用担心使用SnackbarUtilsToastUtils会出现内存泄漏的问题,我一开始设计的时候就使用了弱引用来规避这个问题,所以还不放心大胆来使用他们吧,再配合上SpanUtils,你们也可以玩出花来了,独乐乐不如众乐乐。

马上就要下车了,欢迎各位乘客享受这次长途旅行,这次介绍工具类真是最为详尽的一次,希望大家喜欢,快拿你们的喜欢砸我吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,383评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,522评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,852评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,621评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,741评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,929评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,076评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,803评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,265评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,395评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,039评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2 350

推荐阅读更多精彩内容