Toast多行文字居中显示

本文介绍如何使Android Toast消息中的文字在多行显示时居中对齐,并提供了一个Toast工具类示例,解决了多次调用Toast.makeText导致的文字重复显示问题。

Toast显示文字过多时,会拆分为多行靠左显示,如何实现在拆分多行时居中显示文字?

先来看看makeText方法

public static Toast makeText(Context context, CharSequence text, @Duration int duration) {
        Toast result = new Toast(context);

        LayoutInflater inflate = (LayoutInflater)
                context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View v = inflate.inflate(com.android.internal.R.layout.transient_notification, null);
        TextView tv = (TextView)v.findViewById(com.android.internal.R.id.message);
        tv.setText(text);
        
        result.mNextView = v;
        result.mDuration = duration;

        return result;
    }

可以知道makeText方法使用的布局文件是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>


可以知道显示文字的TextView的id名称是message,既然知道了id名称,通过Resources类就可以拿到这个TextView的id索引,进而通过findViewById拿到TextView后更改文字对齐属性


textview_id = Resources.getSystem().getIdentifier("message", "id", "android");
((TextView) toast.getView().findViewById(textview_id)).setGravity(Gravity.CENTER);

当然,你也可以更改其他属性,如字体颜色,大小等

这里附上自己用的Toast工具类,解决多次调用Toast.makeText时,重复显示文字问题

public class ToastUtil {

    private static Toast toast;
    private static int textview_id;

    public static void show(Context context, String str) {
        if (toast == null)
            toast = Toast.makeText(context.getApplicationContext(), str, Toast.LENGTH_SHORT);
        else
            toast.setText(str);
        if (textview_id == 0)
            textview_id = Resources.getSystem().getIdentifier("message", "id", "android");
        ((TextView) toast.getView().findViewById(textview_id)).setGravity(Gravity.CENTER);
        toast.show();
    }

    public static void show(Context context, int resId) {
        if (toast == null)
            toast = Toast.makeText(context.getApplicationContext(), resId, Toast.LENGTH_SHORT);
        else
            toast.setText(resId);
        if (textview_id == 0)
            textview_id = Resources.getSystem().getIdentifier("message", "id", "android");
        ((TextView) toast.getView().findViewById(textview_id)).setGravity(Gravity.CENTER);
        toast.show();
    }

}




在uni-app中,`uni.showToast`默认情况下不支持显示多行文字,当提示文字内容较长时,会自动省略超出部分。官方的`uni.showToast`组件设计为单行展示,最多显示7个字符[^1],因此当需要显示更长的文字内容时,需要采取一些替代方案来实现多行文字的提示效果。 ### 替代方案 #### 使用 `uni.showModal` 显示多行提示信息 当需要显示多行文字时,可以使用`uni.showModal`替代`uni.showToast`。`uni.showModal`支持显示多行文字,并且可以添加确认和取消按钮,适用于需要用户交互的场景。 ```javascript uni.showModal({ title: '提示', content: '您提交的文件缺少以下条件:\n1. 文件格式不正确\n2. 文件大小超过限制', showCancel: true, success: function (res) { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) { console.log('用户点击取消'); } } }); ``` #### 自定义Toast组件 如果希望保持轻量级提示的样式,可以考虑自定义Toast组件。通过使用`<view>`标签和CSS样式,可以灵活地控制提示框的外观和行为,包括支持多行文字显示。 ```html <template> <view v-if="showCustomToast" class="custom-toast"> <text class="toast-text">{{ message }}</text> </view> </template> <script> export default { data() { return { showCustomToast: false, message: '' }; }, methods: { showCustomMessage(msg) { this.message = msg; this.showCustomToast = true; setTimeout(() => { this.showCustomToast = false; }, 2000); } } }; </script> <style> .custom-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); padding: 15px 20px; border-radius: 5px; z-index: 999; } .toast-text { color: #fff; font-size: 14px; } </style> ``` #### 使用第三方UI库 还可以考虑使用第三方UI库,如`uView`或`ColorUI`,这些库通常已经封装好了支持多行文字显示Toast组件,可以直接调用,简化开发流程。 ###
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值