如何在Android Studio中实现类似Twitter的Toast/Snackbar提示框

对应示例样式：

这种通知核心特点：顶部弹出、圆角半透明背景、左侧带图标、文字居左、可选右侧操作按钮，我们可以通过自定义布局结合Toast或Snackbar来实现。

一、自定义Toast实现（Kotlin/Java） #

1. 创建自定义布局文件 #

新建res/layout/twitter_toast_layout.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="wrap_content"
    android:background="@drawable/twitter_toast_bg"
    android:padding="16dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <!-- 左侧图标 -->
    <ImageView
        android:id="@+id/toast_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_twitter_notification"
        android:layout_marginEnd="12dp"/>

    <!-- 通知文字 -->
    <TextView
        android:id="@+id/toast_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="推文已发布"
        android:textColor="#FFFFFF"
        android:textSize="14sp"/>

    <!-- 右侧操作按钮（可选） -->
    <TextView
        android:id="@+id/toast_action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="撤销"
        android:textColor="#1DA1F2"
        android:textSize="14sp"
        android:textStyle="bold"/>

</LinearLayout>

2. 创建圆角背景drawable #

新建res/drawable/twitter_toast_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#CC192734"/> <!-- 半透明深色背景 -->
    <corners android:radius="8dp"/> <!-- 圆角 -->
</shape>

3. Kotlin代码实现 #

fun showTwitterStyleToast(context: Context, message: String, actionText: String? = null) {
    val toast = Toast(context)
    toast.duration = Toast.LENGTH_SHORT
    // 设置Toast显示在顶部
    toast.setGravity(Gravity.TOP or Gravity.FILL_HORIZONTAL, 0, 0)
    
    val view = LayoutInflater.from(context).inflate(R.layout.twitter_toast_layout, null)
    view.findViewById<TextView>(R.id.toast_text).text = message
    
    actionText?.let {
        val actionBtn = view.findViewById<TextView>(R.id.toast_action)
        actionBtn.text = it
        actionBtn.setOnClickListener {
            toast.cancel()
            // 这里添加你的操作逻辑
        }
    } ?: view.findViewById<TextView>(R.id.toast_action).visibility = View.GONE
    
    toast.view = view
    toast.show()
}

// 调用示例
showTwitterStyleToast(this, "推文已发布", "撤销")

4. Java代码实现 #

public static void showTwitterStyleToast(Context context, String message, String actionText) {
    Toast toast = new Toast(context);
    toast.setDuration(Toast.LENGTH_SHORT);
    toast.setGravity(Gravity.TOP | Gravity.FILL_HORIZONTAL, 0, 0);
    
    LayoutInflater inflater = LayoutInflater.from(context);
    View view = inflater.inflate(R.layout.twitter_toast_layout, null);
    TextView toastText = view.findViewById(R.id.toast_text);
    toastText.setText(message);
    
    TextView actionBtn = view.findViewById(R.id.toast_action);
    if (actionText != null) {
        actionBtn.setText(actionText);
        actionBtn.setOnClickListener(v -> {
            toast.cancel();
            // 添加操作逻辑
        });
    } else {
        actionBtn.setVisibility(View.GONE);
    }
    
    toast.setView(view);
    toast.show();
}

// 调用示例
showTwitterStyleToast(this, "推文已发布", "撤销");

二、自定义Snackbar实现（Kotlin/Java） #

Snackbar默认在底部，我们可以修改显示位置并替换布局为Twitter样式：

1. Kotlin代码实现 #

fun showTwitterStyleSnackbar(view: View, message: String, actionText: String) {
    val snackbar = Snackbar.make(view, "", Snackbar.LENGTH_SHORT)
    val snackbarView = snackbar.view
    
    // 设置Snackbar显示在顶部
    val params = snackbarView.layoutParams as CoordinatorLayout.LayoutParams
    params.gravity = Gravity.TOP
    snackbarView.layoutParams = params
    
    // 替换默认布局为自定义布局
    val customView = LayoutInflater.from(view.context).inflate(R.layout.twitter_toast_layout, null)
    customView.findViewById<TextView>(R.id.toast_text).text = message
    customView.findViewById<TextView>(R.id.toast_action).text = actionText
    customView.findViewById<TextView>(R.id.toast_action).setOnClickListener {
        snackbar.dismiss()
        // 处理操作逻辑
    }
    
    snackbarView.setBackgroundColor(Color.TRANSPARENT)
    val snackbarLayout = snackbarView as Snackbar.SnackbarLayout
    snackbarLayout.addView(customView, 0)
    
    snackbar.show()
}

// 调用示例（传入任意View，比如rootView）
showTwitterStyleSnackbar(findViewById(R.id.root_view), "推文已发布", "撤销")

2. Java代码实现 #

public static void showTwitterStyleSnackbar(View view, String message, String actionText) {
    Snackbar snackbar = Snackbar.make(view, "", Snackbar.LENGTH_SHORT);
    View snackbarView = snackbar.getView();
    
    // 设置顶部显示
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) snackbarView.getLayoutParams();
    params.gravity = Gravity.TOP;
    snackbarView.setLayoutParams(params);
    
    // 替换布局
    LayoutInflater inflater = LayoutInflater.from(view.getContext());
    View customView = inflater.inflate(R.layout.twitter_toast_layout, null);
    TextView toastText = customView.findViewById(R.id.toast_text);
    toastText.setText(message);
    
    TextView actionBtn = customView.findViewById(R.id.toast_action);
    actionBtn.setText(actionText);
    actionBtn.setOnClickListener(v -> {
        snackbar.dismiss();
        // 添加操作逻辑
    });
    
    snackbarView.setBackgroundColor(Color.TRANSPARENT);
    Snackbar.SnackbarLayout snackbarLayout = (Snackbar.SnackbarLayout) snackbarView;
    snackbarLayout.addView(customView, 0);
    
    snackbar.show();
}

// 调用示例
showTwitterStyleSnackbar(findViewById(R.id.root_view), "推文已发布", "撤销");

注意事项 #

• 图标资源需自行替换为项目内的对应图标
• 可根据需求调整背景色、文字颜色、圆角大小等样式参数
• Snackbar实现需确保布局根节点为CoordinatorLayout，否则可能无法正确调整位置

内容的提问来源于stack exchange，提问作者user21193451