Toast

本文介绍如何在Android应用中实现不同形式的Toast提示,包括默认样式、屏幕居中显示及自定义样式,并通过示例代码展示了如何创建自定义的Toast布局。

Toast是一个提示语句,今天学习的是有关它的三个提示形式。

1.默认的提示。

2.在手机屏幕中间提示。

3.自定义Toast

首先创建一个ToastActivity

在activity_toast.xml中写三个按钮,分别是上面说的三种形式,分别点击出现不同的效果。

<?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="match_parent"
    android:orientation="vertical">
    <Button
        android:id="@+id/btn_toast_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="默认 "/>
    <Button
        android:id="@+id/btn_toast_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="改变位置 "/>
    <Button
        android:id="@+id/btn_toast_c"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="带图片(自定义)"/>
    <Button
        android:id="@+id/btn_toast_d"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ToastUtil"/>

</LinearLayout>

接着在ToastActivity.java中写代码:

package net.nyist.lenovo.mytest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import net.nyist.lenovo.mytest.util.ToastUtil;

public class ToastActivity extends AppCompatActivity {

    private Button mBtnToast1;
    private Button mBtnToast2;
    private Button mBtnToast3;
    private Button mBtnToast4;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toast);
        mBtnToast1 = (Button) findViewById(R.id.btn_toast_a);
        mBtnToast2 = (Button) findViewById(R.id.btn_toast_b);
        mBtnToast3 = (Button) findViewById(R.id.btn_toast_c);
        mBtnToast4 = (Button) findViewById(R.id.btn_toast_d);
        Onclick onclick = new Onclick();
        mBtnToast1.setOnClickListener(onclick);
        mBtnToast2.setOnClickListener(onclick);
        mBtnToast3.setOnClickListener(onclick);
        mBtnToast4.setOnClickListener(onclick);
    }
    class Onclick implements View.OnClickListener{

        @Override
        public void onClick(View v) {
            switch (v.getId()){
                case R.id.btn_toast_a:
                    Toast.makeText(ToastActivity.this, "Toast", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.btn_toast_b:
                    Toast toastCenter = Toast.makeText(ToastActivity.this, "Toast", Toast.LENGTH_SHORT);
                    toastCenter.setGravity(Gravity.CENTER,0,0);
                    //在手机屏幕中间显示提示
                    toastCenter.show();
                    break;
                case R.id.btn_toast_c:
                    Toast toastCustom = new Toast(getApplicationContext());
                    //加载容器
                    LayoutInflater inflater = LayoutInflater.from(ToastActivity.this);
                    //将布局放到容器中
                    View view = inflater.inflate(R.layout.layout_toast,null);
                    //接下来获得到布局中的ImageView和TextView
                    ImageView imageView = (ImageView) view.findViewById(R.id.iv_toast);
                    TextView textView = (TextView)view.findViewById(R.id.tv_toast);
                    //将图片放到ImageView中
                    imageView.setImageResource(R.drawable.icon_smile);
                    textView.setText("自定义Toast");
                    toastCustom.setView(view);
                    toastCustom.show();
                    break;
                case R.id.btn_toast_d:
                    ToastUtil.showMsg(getApplicationContext(),"包装的Toast");
                    break;
            }
        }
    }
}

这里强调一下自定义中的Toast,自定义的话,提示为一张图片,我们就像需要一个容器来把照片放到里面,首先需要准备给自定义的Toast准备一个布局layout_toast.xml
接着给他添加自定义的ImageView和TextView
代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#99000000">
    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:id="@+id/iv_toast"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitCenter"
            />
        <TextView
            android:id="@+id/tv_toast"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textColor="@color/colorWhite"
            android:layout_marginTop="10dp"
            />

    </LinearLayout>



</LinearLayout>

这里由于根布局不能够灵活运用,所以内嵌一个LinearLayout,设置ImageView的宽高都是100dp。

这里会发现还有第一个按钮,那就是和默认的那个有区别,什么区别呢?
默认的按钮我们点击十下的话,是从第一个提示一直等到第十个按钮一个一个显示完,一个两秒,这样的话就会长时间的得不到最新的结果,所以在这里我们不建议使用默认的Toast,在这里我们要想点击十下立即显示最后点击的结果,我们就需要封装一个Toast类来修改一下:

新建一个ToastUtil.java

package net.nyist.lenovo.mytest.util;

import android.content.Context;
import android.widget.Toast;

/**
 * Created by LENOVO on 2017/9/8.
 */

public class ToastUtil {

    public static Toast mToast;
    public static void showMsg(Context context,String msg){
        if (mToast==null){
            mToast = Toast.makeText(context,msg,Toast.LENGTH_SHORT);
        }else {
            mToast.setText(msg);
        }
        mToast.show();
    }
}

这样的话如果我们点击十下就会很快显示最后的结果。

 case R.id.btn_toast_d:
                    ToastUtil.showMsg(getApplicationContext(),"包装的Toast");
                    break;

在第四个case中调用这个类的方法,就可以实现了。

运行结果如下:
menu
default
center
diy

### Toast 实现:前端与 Android 的对比 在前端和 Android 中,`toast` 都是一种用于向用户显示短暂消息的功能。以下是两者的技术实现细节。 #### 1. **Android 中的 Toast 实现** 在 Android 中,`Toast` 是一种轻量级的消息提示工具,通常用于在屏幕上显示短暂的文本信息。其基本用法如下: ```java // 显示一个简单的 Toast 消息 Toast.makeText(context, "这是一个 Toast 提示", Toast.LENGTH_SHORT).show(); ``` 如果需要自定义 `Toast` 的布局或样式,可以通过以下方式实现[^1]: ```java // 创建一个自定义的 Toast LayoutInflater inflater = getLayoutInflater(); View layout = inflater.inflate(R.layout.custom_toast, findViewById(R.id.custom_toast_container)); TextView text = layout.findViewById(R.id.text); text.setText("这是一个自定义 Toast"); Toast toast = new Toast(getApplicationContext()); toast.setDuration(Toast.LENGTH_LONG); toast.setView(layout); toast.show(); ``` #### 2. **前端中的 Toast 实现** 在前端中,类似功能可以通过 JavaScript 库(如 `sweetalert2` 或 `iziToast`)实现。例如,使用 `iziToast` 可以轻松创建一个提示框: ```javascript // 使用 iziToast 显示一个简单的消息提示 iziToast.show({ title: '提示', message: '这是一个前端的 Toast 提示', position: 'topRight', // 设置位置 timeout: 3000 // 显示时长(毫秒) }); ``` 如果需要更复杂的交互或样式,可以结合 CSS 自定义外观。以下是一个简单的自定义实现: ```html <div id="toast" style="display: none; position: fixed; top: 20px; right: 20px; background: #333; color: white; padding: 10px; border-radius: 5px;"> 这是一个自定义前端 Toast </div> <script> function showToast() { const toast = document.getElementById('toast'); toast.style.display = 'block'; setTimeout(() => { toast.style.display = 'none'; }, 3000); // 3秒后隐藏 } showToast(); </script> ``` #### 3. **两者的对比** - **显示时间**:Android 的 `Toast` 默认有 `LENGTH_SHORT` 和 `LENGTH_LONG` 两种时长,而前端可以通过 `setTimeout` 灵活设置。 - **自定义性**:前端的 `Toast` 更容易通过 CSS 和 JavaScript 实现复杂的动画和交互效果。 - **平台限制**:Android 的 `Toast` 仅适用于 Android 应用,而前端的实现可以在任何支持 HTML 和 JavaScript 的环境中运行。 ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值