如何实现类似Telegram的消息点击选项框？求XML实现代码

一、选项框的XML布局实现 #

你可以创建如下布局文件（命名为layout_message_options.xml），实现图中的底部选项框样式，这里结合CardView实现卡片式视觉效果：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:cardCornerRadius="16dp"
    app:cardElevation="8dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- 回复选项 -->
        <TextView
            android:id="@+id/tv_reply"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="center"
            android:text="回复"
            android:textColor="#333333"
            android:textSize="16sp" />

        <!-- 分割线 -->
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#EEEEEE" />

        <!-- 转发选项 -->
        <TextView
            android:id="@+id/tv_forward"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="center"
            android:text="转发"
            android:textColor="#333333"
            android:textSize="16sp" />

        <!-- 分割线 -->
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#EEEEEE" />

        <!-- 删除选项 -->
        <TextView
            android:id="@+id/tv_delete"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="center"
            android:text="删除"
            android:textColor="#FF4444"
            android:textSize="16sp" />

        <!-- 取消按钮 -->
        <TextView
            android:id="@+id/tv_cancel"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="center"
            android:text="取消"
            android:textColor="#333333"
            android:textSize="16sp" />

    </LinearLayout>
</androidx.cardview.widget.CardView>

你可以通过BottomSheetDialog来展示这个布局，示例代码（Kotlin）：

// 消息点击事件处理
messageView.setOnClickListener {
    val bottomSheetDialog = BottomSheetDialog(this)
    val optionView = LayoutInflater.from(this).inflate(R.layout.layout_message_options, null)
    bottomSheetDialog.setContentView(optionView)

    // 绑定各选项点击事件
    optionView.tv_reply.setOnClickListener {
        // 执行回复逻辑
        bottomSheetDialog.dismiss()
    }
    optionView.tv_forward.setOnClickListener {
        // 执行转发逻辑
        bottomSheetDialog.dismiss()
    }
    optionView.tv_delete.setOnClickListener {
        // 执行删除逻辑
        bottomSheetDialog.dismiss()
    }
    optionView.tv_cancel.setOnClickListener {
        bottomSheetDialog.dismiss()
    }

    bottomSheetDialog.show()
}

二、CardView能否承载多个元素？ #

完全可以。CardView是FrameLayout的子类，本身支持嵌套其他布局容器（如LinearLayout、ConstraintLayout），通过这些嵌套布局可以轻松承载多个子元素（文本、按钮、分割线等）。上面的XML示例就是用CardView包裹LinearLayout，再在LinearLayout中放置多个操作选项，这是CardView的常规用法之一。

CardView的核心作用是提供圆角、阴影等卡片视觉效果，内部的布局管理由嵌套的布局容器负责，非常适合封装这类多选项组件。

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