更换 Android 原生 Toast 的样式

Toast 使用的 Layout

在源码中写到:

View v = inflate.inflate(com.android.internal.R.layout.transient_notification, null);

也就是:
com.android.internal.R.layout.transient_notification

其布局文件如下:

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

    <TextView
        android:id="@android:id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"
        android:textAppearance="@style/TextAppearance.Toast"
        android:textColor="@color/bright_foreground_dark"
        android:shadowColor="#BB000000"
        android:shadowRadius="2.75"
        />

</LinearLayout>

文件路径在:...\SDK\platforms\android-23\data\res\layout\transient_notification.xml

**需要一个个解读的如下: **

1. Toast 的背景 : android:background="?android:attr/toastFrameBackground"
2. Toast 文字样式 : android:textAppearance="@style/TextAppearance.Toast"
3. Toast 文字颜色 : android:textColor="@color/bright_foreground_dark"

Toast 的背景 Background

android:background="?android:attr/toastFrameBackground

在...\SDK\platforms\android-23\data\res\values\themes.xml中,可以看到,背景其实是一个 Drawable资源

        <!-- Toast attributes -->
        <item name="toastFrameBackground">@drawable/toast_frame</item>

最终在:...\SDK\platforms\android-23\data\res\drawable-xxhdpi\toast_frame.9.png找到了

toast_frame.9.png

本来是想改变.9图的颜色的,但是Google了很久都没有解决方案,可能 SVG矢量图是为了弥补这一缺陷而运用在Android上的.

如果谁有解决方案,麻烦@下我,我也想知道 ๑乛◡乛๑
好了,换一个思路.

经过 马克曼的测量,再配合 Material Design的设计规范,得到了最终满意的尺寸.

MD 习惯的尺寸为 1,2,4,8,16,24,36,48,56......绝大数情况是偶数[单位都是dp]

最终布局如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@drawable/shape_toast"
              android:orientation="vertical">
    <TextView
        android:id="@android:id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="12dp"
        android:paddingTop="12dp"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"
        android:textSize="16sp"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:shadowColor="#BB000000"
        android:shadowRadius="2.75"
        android:textColor="@color/WHITE"
        />

</LinearLayout>

Toast 文字样式

android:textAppearance="@style/TextAppearance.Toast
文件路径: ...\SDK\platforms\android-23\data\res\values\style.xml

    <style name="TextAppearance.Toast">
        <item name="fontFamily">sans-serif-condensed</item>
    </style>

设置 `` 有两种方式:

1. textView.setTextAppearance(R.style.AndroidToast);//api16
2. Typeface typeface = Typeface.create("sans-serif-condensed", Typeface.NORMAL);
            textView.setTypeface(typeface);//api1

第一种看起来方便简洁,但是要求 api>=16,而 4.0 对应的是 api15,所以还是选择第二种吧

Toast 文字颜色

android:textColor="@color/bright_foreground_dark"
<color name="bright_foreground_dark">@android:color/background_light</color>
<color name="background_light">#ffffffff</color>

所以默认的颜色是纯白的 #FFFFFF

最后贴下 java 代码

    /**
     * {@link layout/transient_notification.xml}
     * @param content content to show
     * @param longTime short or long
     * @param context context
     * @param textColor toast text color
     * @param toastBackgroundColor toast background color
     */
    public static void showToast(@NonNull Context context, String content, boolean longTime, @ColorInt
            int textColor,@ColorInt int toastBackgroundColor) {
        int type = longTime ? Toast.LENGTH_LONG : Toast.LENGTH_SHORT;
        Toast toast = Toast.makeText(context, content, type);
        ViewGroup toastView = (ViewGroup) LayoutInflater.from(context).inflate(R.layout
                .layout_toast, null, false);
        if (toastBackgroundColor != 0) {
            toastView.setBackgroundDrawable(getToastBackground(context, toastBackgroundColor));
        }
        TextView textView = (TextView) toastView.findViewById(android.R.id.message);
        // 内部已经作非空判断了
        if (textColor!=0){
            textView.setTextColor(textColor);
        }
        Typeface typeface = Typeface.create("sans-serif-condensed", Typeface.NORMAL);
        textView.setTypeface(typeface);
        toast.setView(toastView);
        toast.setText(content);
        toast.show();
    }

    private static Drawable getToastBackground(@NonNull Context context, @ColorInt int color) {
        GradientDrawable gradientDrawable = new GradientDrawable();
        gradientDrawable.setShape(GradientDrawable.RECTANGLE);
        gradientDrawable.setCornerRadius(DisplayUtil.dp2px(context, 24));
        gradientDrawable.setColor(color);
        return gradientDrawable;
    }

 

使用自定义Toast 的时候有个坑，你在布局中设置宽高是无效的，必须在代码中动态设置，而且不能设置跟布局的宽高，必须设置第二级布局的LayoutParma。最后还有一个坑，在setGravity的时候务必加一个参数Gravity.FILL_HORIZONTAL，否则之前设置的是不生效的~

 

以下是布局

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    >
<LinearLayout
    android:orientation="vertical"
    android:layout_width="217dp"
    android:layout_height="86dp"
    android:gravity="center"
    android:id="@+id/ll_root"
    android:background="@drawable/radis_rectangle_black"
    >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        >
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发布成功"
            android:textSize="14sp"
            android:textColor="@color/white"
            />
        <TextView
            android:id="@+id/tv_coin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:layout_marginLeft="6dp"
            android:textColor="@color/new_text_color"
            android:text="+2玛丽"
            />
 
    </LinearLayout>
    <TextView
        android:id="@+id/tv_msg"
        android:layout_marginBottom="12dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:gravity="center"
        android:maxLines="2"
        android:text="每天222"
        android:textColor="@color/white"
        />
 
 
</LinearLayout>
</LinearLayout>

 

以下是动态设置布局参数

 

public class MyToast  {
 
    Toast toast;
    public  MyToast(Context context,String title,String coin,SpannableString msg){
 
        View layout = LayoutInflater.from(context).inflate(R.layout.toast, null);
        LinearLayout root = layout.findViewById(R.id.ll_root);
        TextView tv_title = layout.findViewById(R.id.tv_title);
        TextView tv_coin = layout.findViewById(R.id.tv_coin);
        TextView tv_msg = layout.findViewById(R.id.tv_msg);
        //设置控件的宽高
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(DensityUtils.dp2px(context,217),
                DensityUtils.dp2px(context,86));
        root.setLayoutParams(lp);
        //设置数据
        tv_title.setText(TextUtils.isEmpty(title)?"":title);
        tv_coin.setText(TextUtils.isEmpty(coin)?"":coin);
        if (msg==null){
            tv_msg.setVisibility(View.GONE);
        }else {
            tv_msg.setText(msg);
 
        }
        //设置toast
        toast= new Toast(context);
        toast.setDuration(Toast.LENGTH_LONG);
        //必须设置Gravity.FILL_HORIZONTAL 这个选项，布局文件的宽高才会正常显示
        toast.setGravity(Gravity.CENTER|Gravity.FILL_HORIZONTAL,0,0);
        toast.setView(layout);
 
    }
    public void show(){
        toast.show();
    }
 
}