Android Toolbar自定义溢出菜单实现求助：需求与问题咨询

一、核心方案选择 #

优先使用ListPopupWindow实现，它比PopupMenu具备更强的自定义灵活性，能精准控制布局位置、宽度及选中状态。

二、分步实现你的需求 #

1. 设置布局宽度为wrap_content #

• 先自定义弹出项布局（示例命名为popup_item_layout.xml），根布局采用wrap_content：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingHorizontal="16dp"
    android:paddingVertical="12dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/item_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:marginEnd="8dp"/>

    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"/>
</LinearLayout>

• 创建ListPopupWindow时，直接设置宽度参数：

val listPopupWindow = ListPopupWindow(context)
listPopupWindow.width = ListPopupWindow.WRAP_CONTENT

2. 实现选中项的背景、图标及文字颜色 #

• 定义选中状态的选择器（示例命名为popup_item_selector.xml）：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/selected_bg" android:state_selected="true"/>
    <item android:drawable="@color/transparent"/>
</selector>

• 将该选择器设置为自定义布局根节点的android:background，同时在Adapter中处理选中状态：

class PopupAdapter(private val items: List<PopupItem>) : BaseAdapter() {
    private var selectedPosition = 0

    fun setSelectedPosition(position: Int) {
        selectedPosition = position
        notifyDataSetChanged()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val view = convertView ?: LayoutInflater.from(parent?.context).inflate(R.layout.popup_item_layout, parent, false)
        val item = items[position]
        view.isSelected = position == selectedPosition
        val iconView = view.findViewById<ImageView>(R.id.item_icon)
        iconView.setImageResource(if (position == selectedPosition) item.selectedIcon else item.normalIcon)
        val textView = view.findViewById<TextView>(R.id.item_text)
        textView.setTextColor(
            parent?.context?.getColor(
                if (position == selectedPosition) R.color.selected_text else R.color.normal_text
            ) ?: Color.BLACK
        )
        return view
    }

    override fun getCount() = items.size
    override fun getItem(position: Int) = items[position]
    override fun getItemId(position: Int) = position.toLong()
}

// 数据类定义
data class PopupItem(val title: String, val normalIcon: Int, val selectedIcon: Int)

3. 让布局显示在Toolbar正下方而非覆盖 #

• 通过计算Toolbar的位置，设置ListPopupWindow的锚点和偏移量：

val listPopupWindow = ListPopupWindow(this)
listPopupWindow.apply {
    anchorView = toolbar
    // 设置垂直偏移为Toolbar的高度，使弹出框位于正下方
    verticalOffset = toolbar.height
    // 水平偏移设为0，实现左对齐Toolbar
    horizontalOffset = 0
}

三、完整调用示例 #

// 准备菜单数据
val popupItems = listOf(
    PopupItem("选项1", R.drawable.icon_normal_1, R.drawable.icon_selected_1),
    PopupItem("选项2", R.drawable.icon_normal_2, R.drawable.icon_selected_2),
    PopupItem("选项3", R.drawable.icon_normal_3, R.drawable.icon_selected_3)
)
val adapter = PopupAdapter(popupItems)

val listPopupWindow = ListPopupWindow(this).apply {
    this.adapter = adapter
    width = ListPopupWindow.WRAP_CONTENT
    anchorView = toolbar
    verticalOffset = toolbar.height
    horizontalOffset = 0
    setOnItemClickListener { _, _, position, _ ->
        adapter.setSelectedPosition(position)
        dismiss()
        // 处理选中后的业务逻辑
    }
}

// 绑定Toolbar溢出按钮点击事件
toolbar.setOnMenuItemClickListener { menuItem ->
    if (menuItem.itemId == R.id.overflow_menu) {
        listPopupWindow.show()
        true
    } else {
        false
    }
}

四、注意事项 #

• 若需适配屏幕旋转或布局变化，可通过ViewTreeObserver监听Toolbar的布局完成事件，确保偏移量计算准确；
• 如需添加圆角、阴影等样式，可给弹出项布局外层嵌套带背景的容器，或直接给ListPopupWindow设置自定义背景。

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