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

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

在打开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的显示时间

未完待续。。。。。。