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的顯示時間

未完待續。。。。。。