Android带图片的Toast(自定义Toast)

使用Android默认的Toast

Toast简介:

Toast是一个简单的消息显示框,能够短暂的出现在屏幕的某个位置,显示提示消息。

默认的位置是屏幕的下方正中,一般Toast的使用如下:

 Toast.makeText(this,"1222222",Toast.LENGTH_SHORT).show();

Toast是static修饰的静态类,意味着可以直接使用,所以可以不用创建对象直接调用makeText方法,

该方法需要传入三个参数:

   /**
* Make a standard toast that just contains a text view.
*
* @param context The context to use. Usually your {@link android.app.Application}
* or {@link android.app.Activity} object.
* @param text The text to show. Can be formatted text.
* @param duration How long to display the message. Either {@link #LENGTH_SHORT} or
* {@link #LENGTH_LONG}
*
*/

第一个参赛数当前context,第二个是需要显示的文本内容,第三个参数是显示时间

但这里的显示时间只有两种,一个是 Toast.LENGTH_SHORT 和 Toast.LENGTH_LONG. 顾名思义,后者比前者要长一点。

自定义Toast

自定义图片

今天看到某音乐播放软件有个收藏功能会弹出类似效果的Toast

Android带图片的Toast(自定义Toast)

上面一颗红♥️,下面显示文本内容, 那么这个效果如何实现呢?

在打开Toast 源码可以看到一个方法setView

   /**
* Set the view to show.
* @see #getView
*/
public void setView(View view) {
mNextView = view;
}

想必可以通过该方法添加图片和文本

那接下来就可以尝试自定义一个布局文件,并把该布局通过setView的方式添加到Toast里面

布局文件为线型布局,内容如下,添加一个现形布局,在该线型布局中添加一个ImageView和一个TextView

该布局文件名为toast_view.xml,设置orientation为vertical为垂直排列,并将准备好的心型图片设置为ImageView的背景

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:gravity="center"
android:minWidth="100dp"
android:orientation="vertical">
<!--android:background="@drawable/toast_bg"-->
<ImageView
android:id="@+id/toast_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_margin="2dp"
android:background="@drawable/redheart" /> <TextView
android:id="@+id/toast_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:gravity="center"
android:text=""
android:textColor="#ffffff"
android:textSize="15dp" />
</LinearLayout> </LinearLayout>

结下来创建一个ToastView Class,把该布局文件关联起来

   /**
*
* @param context
* @param text
*/
public ToastView(Context context, String text) {
LayoutInflater inflater = LayoutInflater.from(context);
View view = inflater.inflate(R.layout.toast_view, null);
TextView t = (TextView) view.findViewById(R.id.toast_text);
t.setText(text);
if (toast != null) {
toast.cancel();
}
toast = new Toast(context);
toast.setDuration(Toast.LENGTH_SHORT);
toast.setView(view);
}

通过setText方法把要显示的文本显示出来

当然还可以进一步优化,把ImageView的背景替换掉

 public ToastView(Context context, String text) {
LayoutInflater inflater = LayoutInflater.from(context);
View view = inflater.inflate(R.layout.toast_view, null);
ImageView imageView=(ImageView)view.findViewById(R.id.toast_image);
imageView.setBackgroundResource(R.mipmap.ic_launcher);
TextView t = (TextView) view.findViewById(R.id.toast_text);
t.setText(text);
if (toast != null) {
toast.cancel();
}
toast = new Toast(context);
toast.setDuration(Toast.LENGTH_SHORT);
toast.setView(view);
}

通过这个方法,先获取到Layout然后通过findViewById获取到子控件进行设置

然而这样的效果依然不是我们想要的,显示出来并不是带圆角的

这个时候就需要添加一个shape布局

设置圆角,并把该shape添加到LinearLayout的背景

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#c83e3e3e" /> <!--radius shape-->
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:radius="8dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>

自定义位置

那么如何自定义显示位置?

通过查看Toast的源码可以看到一个setGravity的方法,是专门用来设置Toast的位置

   /**
* Set the location at which the notification should appear on the screen.
* @see android.view.Gravity
* @see #getGravity
*/
public void setGravity(int gravity, int xOffset, int yOffset) {
mTN.mGravity = gravity;
mTN.mX = xOffset;
mTN.mY = yOffset;
}

该方法有三个参赛,第一个是整形类型的gravity,该参数设置具体的位置,可以参考Gravity类

一般常用的有:

Gravity.CENTER
Gravity.LEFT
Gravity.RIGHT
Gravity.TOP
Gravity.BOTTOM

顾名思义,第二个和第三个参数是偏移量,针对第一个参数的偏移量

所以,如果设置Toast在屏幕正当中,只需要这样

toast.setGravity(Gravity.CENTER, 0, 0);

自定义Toast的显示时间

未完待续。。。。。。

上一篇:Java 程序中的多线程


下一篇:node.js不得不说的12点内容