[Android] 定制化Toast展示(位置、底色、圆角)

【需求分析】

  我们知道windows上调试程序输出变量可以通过MessageBox弹窗到屏幕上展示。在Android系统里通过Toast可以实现类似的弹窗效果。系统的Toast默认弹出到屏幕底部,且样式一般比较老旧。
  这次的需求就是自定义Toast,可以规定Toast展示的位置以及Toast样式,具体来说包括三个方面:1. Toast位置自定义 2. Toast外部样式自定义 3. Toast颜色自定义

【动画效果】

  对比系统自带和定制化Toast的展示效果
  [Android] 定制化Toast展示(位置、底色、圆角)_第1张图片

【实现方案】

  自定义Toast的设计核心就是在系统Toast外边套一层View,将系统toast作为整个自定义Toast的一部分进行展示。具体来看通过系统Toast的setGravity设置Toast的显示位置。通过外面包裹的一层View对应的xml设置外层Toast的样式。

【代码展示】

  首先是整个测试代码部分:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btn1 = (Button) findViewById(R.id.btn_sys_toast);
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "这个是系统自带的Toast", Toast.LENGTH_SHORT).show();
            }
        });

        Button btn2 = (Button) findViewById(R.id.btn_custom_toast);
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int xOffset = 0, yOffset = -300;
                CustomToast.makeText(MainActivity.this, "这是自定义弹出的Toast",
                        Toast.LENGTH_SHORT, xOffset, yOffset).show();
            }
        });
    }
}

  这里通过LayoutInflater构造了系统toast外层的父控件toastRoot。样式的改变可以直接修复toastRoot对应的xml。Toast位置的改变直接调用系统原生Toast的setGravity实现

import android.content.Context;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

/**
 * 自定义Toast
 *      1. 能够改变Toast出现的位置 (系统默认在屏幕下方弹出)
 *      2. 改变Toast的边角,改为具有弧度的边角 round_corner_toast.xml配置 radius=“4”
 *      3. Toast底色可变  round_corner_toast.xml配置,目前底色 35383D
 */
public class CustomToast {
    public static final int LENGTH_SHORT = 0;
    public static final int LENGTH_LONG = 1;

    Toast toast;
    TextView tvToastText;
    Context context;

    public CustomToast(Context context) {
        this.context = context;
        toast = new Toast(context);

        /**
         * 这里:根据自定义的toast xml样式进行加载展示,类似于其他xml对应的view一样
         *      通过InflaterLayout 展示整个rootView 再将内部的toast附着在这个viewRoot上
         */
        LayoutInflater inflater = (LayoutInflater)
                context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View toastRoot = inflater.inflate(R.layout.custom_toast, null);
        tvToastText = (TextView) toastRoot.findViewById(R.id.toast_text);

        toast.setView(toastRoot);
    }

    public void setDuration(int duration) {
        toast.setDuration(duration);
    }

    public void setText(CharSequence text) {
        tvToastText.setText(text);
    }


    /**
     * 这里默认选用屏幕中心为坐标原点,
     * @param xOffset X轴偏离中心的距离(往右为正)
     * @param yOffset Y轴偏离中心的距离(往下为正)
     */
    public void setGravity(int xOffset, int yOffset) {
        toast.setGravity(Gravity.CENTER, xOffset, yOffset);
    }

    /**
     *
     * @param context
     * @param text     toast展示文本
     * @param duration toast展示时间
     * @param xOffset  设置toast偏离中心X方向的距离
     * @param yOffset  设置toast偏离中心Y方向的距离
     * @return
     */
    public static CustomToast makeText(Context context, CharSequence text, int duration, int xOffset, int yOffset ) {
        CustomToast customedToast = new CustomToast(context);
        customedToast.setText(text);
        customedToast.setDuration(duration);
        customedToast.setGravity(xOffset, yOffset);
        return customedToast;
    }

    public void show() {
        toast.show();
    }
}

  自定义Toast用到的资源,首先是custom_toast.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/toast_text"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textColor="#FFFFFF"
        android:textSize="14sp"
        android:gravity="center"
        android:background="@drawable/round_corner_toast" />
LinearLayout>

  为了设置圆角效果,美化自定义Toast展示效果将TextView的背景设置为圆角的样式,具体在round_corner_toast.xml中:Toast背景色可以通过android:color进行配置以及toast的透明度。圆角弧度通过android:radius设置


<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#B335383D" />
    <corners android:radius="4dp" />
shape>

【个人总结】

  1. 自定义Toast可以通过LayoutInflater包裹一个系统Toast实现
  2. 自定义Toast样式可以直接在xml中配置

你可能感兴趣的:(Android开发基础)