如何在Android Jetpack Compose中自定义占满宽度的底部提示框？

你要的这种左图右文、占满屏幕宽度、自动消失的提示框，不用纠结Toast或者默认的Snackbar，直接用下面两种自定义方案就能搞定：

方案一：自定义View + WindowManager（推荐） #

这种方式不依赖页面布局，直接通过系统WindowManager添加视图，能完美实现全屏宽度的效果，还能全局调用。

1. 先写提示框的布局文件（比如命名layout_bottom_success_tip.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="#E8F5E9"
    android:orientation="horizontal"
    android:padding="16dp">

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_success"
        android:layout_gravity="center_vertical"/>

    <TextView
        android:id="@+id/tv_tip_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginStart="12dp"
        android:text="操作成功"
        android:textColor="#2E7D32"
        android:textSize="14sp"
        android:layout_gravity="center_vertical"/>

</LinearLayout>

2. 写个管理类统一处理显示和隐藏 #

class BottomSuccessTipManager private constructor(private val context: Context) {
    private var tipView: View? = null
    private val handler = Handler(Looper.getMainLooper())
    private val autoHideRunnable = Runnable { hide() }

    companion object {
        @Volatile
        private var instance: BottomSuccessTipManager? = null

        fun getInstance(context: Context): BottomSuccessTipManager {
            return instance ?: synchronized(this) {
                instance ?: BottomSuccessTipManager(context.applicationContext).also { instance = it }
            }
        }
    }

    fun showTip(message: String) {
        // 先关掉之前的提示，避免重复显示
        hide()

        // 加载自定义布局
        tipView = LayoutInflater.from(context).inflate(R.layout.layout_bottom_success_tip, null)
        tipView?.findViewById<TextView>(R.id.tv_tip_message)?.text = message

        // 配置WindowManager的参数，确保全屏宽度且在底部
        val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
        val params = WindowManager.LayoutParams().apply {
            width = WindowManager.LayoutParams.MATCH_PARENT
            height = WindowManager.LayoutParams.WRAP_CONTENT
            gravity = Gravity.BOTTOM
            // 适配Android版本的窗口类型
            type = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY
            } else {
                WindowManager.LayoutParams.TYPE_PHONE
            }
            // 设置不获取焦点、不响应触摸，避免影响页面操作
            flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE or WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
            format = PixelFormat.TRANSLUCENT
        }

        tipView?.let { windowManager.addView(it, params) }

        // 2秒后自动隐藏，时间可以自己调
        handler.postDelayed(autoHideRunnable, 2000)
    }

    fun hide() {
        handler.removeCallbacks(autoHideRunnable)
        tipView?.let {
            val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
            try {
                windowManager.removeView(it)
            } catch (e: Exception) {
                e.printStackTrace()
            }
            tipView = null
        }
    }
}

3. 服务成功时调用 #

在接口回调里直接调用就行：

BottomSuccessTipManager.getInstance(this).showTip("服务响应成功")

方案二：改造SnackBar #

如果你想复用SnackBar的默认动画和消失逻辑，也可以改它的布局来实现全屏宽度：

1. 同样先写自定义布局（layout_custom_snackbar.xml） #

和方案一的布局一样，记得给TextView加id。

2. 写个工具方法显示自定义SnackBar #

fun showCustomSuccessSnackBar(activity: Activity, message: String) {
    // 先创建空内容的SnackBar
    val snackBar = Snackbar.make(activity.findViewById(android.R.id.content), "", Snackbar.LENGTH_SHORT)
    val snackBarView = snackBar.view

    // 隐藏SnackBar默认的文本控件
    snackBarView.findViewById<TextView>(com.google.android.material.R.id.snackbar_text)?.visibility = View.GONE

    // 加载自定义布局并添加到SnackBar中
    val customView = LayoutInflater.from(activity).inflate(R.layout.layout_custom_snackbar, snackBarView, false)
    customView.findViewById<TextView>(R.id.tv_tip_message).text = message
    snackBarView.addView(customView)

    // 修改布局参数，让它占满屏幕宽度
    val params = snackBarView.layoutParams as ViewGroup.MarginLayoutParams
    params.width = ViewGroup.LayoutParams.MATCH_PARENT
    params.setMargins(0, 0, 0, 0)
    snackBarView.layoutParams = params

    snackBar.show()
}

3. 使用方式 #

showCustomSuccessSnackBar(this, "服务响应成功")

两种方案的区别 #

• WindowManager方案：完全独立于页面，不会被页面布局影响，全屏效果更稳定，适合全局多处调用。
• SnackBar改造方案：能复用SnackBar的侧滑消失、自动消失逻辑，但部分机型可能默认有边距，需要额外调整。

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