查看: 986|回复: 0

[手机开发] 超简单实现Android自定义Toast示例(附源码)

发表于 2017-8-1 08:00:04
尚学堂AD

Bamboy的自定义Toast,(以下称作“BToast”)

特点在于使用简单, 并且自带两种样式:

1)普通的文字样式;

2)带图标样式。

其中图标有√和×两种图标。

BToast还有另外一个特点就是:

系统自带Toast采用的是队列的方式,当前Toast消失后,下一个Toast才能显示出来;

而BToast会把当前Toast顶掉, 直接显示最新的Toast。

那么,简单三步,我们现在就开始自定义一下吧!

(一)、Layout:

要自定义Toast,

首先我们需要一个XML布局。

但是在布局之前我们需要三个资源文件,分别是背景、√和×。

背景可以用XML画出来:

toast_back.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <corners android:radius="12dp" />
  4. <solid android:color="#CC000000"/>
  5. </shape>
复制代码

√和×就最好用图片啦,源码里面有这两张图片,这里就不贴出来了。

现在就可以写布局了:

toast_layout.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. android:background="@drawable/toast_back"
  6. android:gravity="center_vertical"
  7. android:padding="13dp"
  8. android:orientation="vertical" >
  9. <ImageView
  10. android:id="@+id/toast_img"
  11. android:layout_width="50dp"
  12. android:layout_height="50dp"
  13. android:background="@drawable/toast_y"
  14. android:layout_gravity="center_horizontal"
  15. android:layout_marginBottom="5dp" />
  16. <TextView
  17. android:id="@+id/toast_text"
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"
  20. android:layout_gravity="center_horizontal"
  21. android:layout_marginLeft="10dp"
  22. android:layout_marginRight="10dp"
  23. android:textColor="#FFFFFF"
  24. android:gravity="center"
  25. android:textSize="17sp" />
  26. </LinearLayout>
复制代码

所需要的XML现在已经OK, 剩下的就是Java部分了。

(二)、Java:

写一个BToast类,继承Toast、成员变量自身单例、还有构造函数:

  1. public class BToast extends Toast {
  2. /**
  3. * Toast单例
  4. */
  5. private static BToast toast;
  6. /**
  7. * 构造
  8. *
  9. * @param context
  10. */
  11. public BToast(Context context) {
  12. super(context);
  13. }
  14. }
复制代码

为了实现可以吧当前Toast顶下去的需求,我们需要重写几个方法

  1. /**
  2. * 隐藏当前Toast
  3. */
  4. public static void cancelToast() {
  5. if (toast != null) {
  6. toast.cancel();
  7. }
  8. }
  9. public void cancel() {
  10. try {
  11. super.cancel();
  12. } catch (Exception e) {
  13. }
  14. }
  15. @Override
  16. public void show() {
  17. try {
  18. super.show();
  19. } catch (Exception e) {
  20. }
  21. }
复制代码

现在我们就可以写我们的逻辑了,首先当然是引入我们的布局咯:

  1. /**
  2. * 初始化Toast
  3. *
  4. * @param context 上下文
  5. * @param text 显示的文本
  6. */
  7. private static void initToast(Context context, CharSequence text) {
  8. try {
  9. cancelToast();
  10. toast = new BToast(context);
  11. // 获取LayoutInflater对象
  12. LayoutInflater inflater =
  13. (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  14. // 由layout文件创建一个View对象
  15. View layout = inflater.inflate(R.layout.toast_layout, null);
  16. // 吐司上的图片
  17. toast_img = (ImageView) layout.findViewById(R.id.toast_img);
  18. // 吐司上的文字
  19. TextView toast_text = (TextView) layout.findViewById(R.id.toast_text);
  20. toast_text.setText(text);
  21. toast.setView(layout);
  22. toast.setGravity(Gravity.CENTER, 0, 70);
  23. } catch (Exception e) {
  24. e.printStackTrace();
  25. }
  26. }
复制代码

一切准备工作都已就绪,接下来就是显示Toast的方法了:

  1. /**
  2. * 图标状态 不显示图标
  3. */
  4. private static final int TYPE_HIDE = -1;
  5. /**
  6. * 图标状态 显示√
  7. */
  8. private static final int TYPE_TRUE = 0;
  9. /**
  10. * 图标状态 显示×
  11. */
  12. private static final int TYPE_FALSE = 1;
  13. /**
  14. * 显示Toast
  15. *
  16. * @param context 上下文
  17. * @param text 显示的文本
  18. * @param time 显示时长
  19. * @param imgType 图标状态
  20. */
  21. private static void showToast(Context context, CharSequence text, int time, int imgType) {
  22. // 初始化一个新的Toast对象
  23. initToast(context, text);
  24. // 设置显示时长
  25. if (time == Toast.LENGTH_LONG) {
  26. toast.setDuration(Toast.LENGTH_LONG);
  27. } else {
  28. toast.setDuration(Toast.LENGTH_SHORT);
  29. }
  30. // 判断图标是否该显示,显示√还是×
  31. if (imgType == TYPE_HIDE) {
  32. toast_img.setVisibility(View.GONE);
  33. } else {
  34. if (imgType == TYPE_TRUE) {
  35. toast_img.setBackgroundResource(R.drawable.toast_y);
  36. } else {
  37. toast_img.setBackgroundResource(R.drawable.toast_n);
  38. }
  39. toast_img.setVisibility(View.VISIBLE);
  40. // 动画
  41. ObjectAnimator.ofFloat(toast_img, "rotationY", 0, 360).setDuration(1700).start();
  42. }
  43. // 显示Toast
  44. toast.show();
  45. }
复制代码

就是这么简单。

细心的朋友可能发现了,这个方法是private的,先别产生疑虑,听我慢慢道来。

写到这里, 其实你可以直接把这个方法改成Public, 这样的话现在就已经大功告成了, 但是这样的话与原生Toast使用起来有什么区别?

还是需要写那么长一串参数,唯一的好处就是不用写.show()了。

咱们现在做的事情叫“自定义”, “自定义”的意思就是我们自己定义规则, 既然如此, 我们何不提升一下“用户体验”呢?

何况这个“用户”还是我们自己。

废话不多说, 我们开始进行最后一步。

(三)、升华:

  1. /**
  2. * 显示一个纯文本吐司
  3. *
  4. * @param context 上下文
  5. * @param text 显示的文本
  6. */
  7. public static void showText(Context context, CharSequence text) {
  8. showToast(context, text, Toast.LENGTH_SHORT, TYPE_HIDE);
  9. }
  10. /**
  11. * 显示一个带图标的吐司
  12. *
  13. * @param context 上下文
  14. * @param text 显示的文本
  15. * @param isSucceed 显示【对号图标】还是【叉号图标】
  16. */
  17. public static void showText(Context context, CharSequence text, boolean isSucceed) {
  18. showToast(context, text, Toast.LENGTH_SHORT, isSucceed ? TYPE_TRUE : TYPE_FALSE);
  19. }
  20. /**
  21. * 显示一个纯文本吐司
  22. *
  23. * @param context 上下文
  24. * @param text 显示的文本
  25. * @param time 持续的时间
  26. */
  27. public static void showText(Context context, CharSequence text, int time) {
  28. showToast(context, text, time, TYPE_HIDE);
  29. }
  30. /**
  31. * 显示一个带图标的吐司
  32. *
  33. * @param context 上下文
  34. * @param text 显示的文本
  35. * @param time 持续的时间
  36. * @param isSucceed 显示【对号图标】还是【叉号图标】
  37. */
  38. public static void showText(Context context, CharSequence text, int time, boolean isSucceed) {
  39. showToast(context, text, time, isSucceed ? TYPE_TRUE : TYPE_FALSE);
  40. }
复制代码

简简单单几个方法,用户体验瞬间直线飙升,来看一下使用的时候:

  1. public void click(View view) {
  2. switch (view.getId()) {
  3. case R.id.btn_text:
  4. BToast.showText(this, "简单提示");
  5. break;
  6. case R.id.btn_text_true:
  7. BToast.showText(this, "简单提示 正确图标", true);
  8. break;
  9. case R.id.btn_text_false:
  10. BToast.showText(this, "简单提示 错误图标", false);
  11. break;
  12. case R.id.btn_text_long:
  13. BToast.showText(this, "简单提示 长~ ", Toast.LENGTH_LONG);
  14. break;
  15. case R.id.btn_text_true_long:
  16. BToast.showText(this, "简单提示 正确图标 长~ ", Toast.LENGTH_LONG, true);
  17. break;
  18. case R.id.btn_text_false_long:
  19. BToast.showText(this, "简单提示 错误图标 长~ ", Toast.LENGTH_LONG, false);
  20. break;
  21. }
  22. }
复制代码

是不是比原生的Toast好用多了?

功德圆满!

赶紧看一下我们的成果:

BamboyToast效果图

源码地址:BamboyToast_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报