如何将Android弹出菜单中的复选框图标替换为对勾图标

我正在使用可勾选的弹出菜单，希望将每个菜单项右侧的默认复选框图标（☑）替换为对勾图标（✓）。

现有图标对比：

• 默认复选框图标（☑）：
  
• 目标对勾图标（✓）：
  

当前代码相关部分：

priority_menu.xml #

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item android:id="@+id/menu_high_priority"
            android:title="@string/high_priority"
            android:icon="?attr/flagIcon"
            android:checkable="true" />
        <item android:id="@+id/menu_medium_priority"
            android:title="@string/medium_priority"
            android:icon="?attr/flagIcon"
            android:checkable="true" />
        <item android:id="@+id/menu_low_priority"
            android:title="@string/low_priority"
            android:icon="?attr/flagIcon"
            android:checkable="true" />
        <item android:id="@+id/menu_no_priority"
            android:title="@string/no_priority"
            android:icon="?attr/flagNoFillIcon"
            android:checkable="true" />
    </group>
</menu>

Kotlin代码 #

private fun priorityImageButtonClicked() {
    val popupMenu = PopupMenu(requireContext(), binding.priorityImageButton)
    popupMenu.inflate(R.menu.priority_menu)

    val menuPopupHelper = MenuPopupHelper(requireContext(), popupMenu.menu as MenuBuilder, binding.priorityImageButton);
    menuPopupHelper.setForceShowIcon(true)
    menuPopupHelper.show()
}

请问如何实现将弹出菜单中的复选框图标更改为对勾图标？

要替换PopupMenu里的默认复选框图标，有两种实用方法，按需选择：

方法一：自定义菜单项布局（灵活可控） #

适合需要自定义菜单项样式（比如调整间距、字体）的场景，完全掌控每个元素的显示。

步骤1：创建自定义菜单项布局 #

在res/layout下新建menu_item_checkable.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:paddingVertical="12dp"
    android:paddingHorizontal="16dp"
    android:orientation="horizontal"
    android:gravity="center_vertical">

    <!-- 菜单项左侧图标 -->
    <ImageView
        android:id="@+id/menu_item_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:marginEnd="16dp"/>

    <!-- 菜单项标题 -->
    <TextView
        android:id="@+id/menu_item_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="16sp"/>

    <!-- 右侧对勾图标（替换默认复选框） -->
    <ImageView
        android:id="@+id/menu_item_check"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_checkmark" <!-- 替换成你的对勾图标资源 -->
        android:visibility="gone"/>
</LinearLayout>

步骤2：修改Kotlin代码，绑定自定义布局并处理选中状态 #

更新priorityImageButtonClicked()方法：

private fun priorityImageButtonClicked() {
    val popupMenu = PopupMenu(requireContext(), binding.priorityImageButton)
    popupMenu.inflate(R.menu.priority_menu)

    val menuBuilder = popupMenu.menu as MenuBuilder
    // 监听菜单项选中事件，实现单选逻辑
    menuBuilder.setCallback(object : MenuBuilder.Callback {
        override fun onMenuItemSelected(menu: MenuBuilder, item: MenuItem): Boolean {
            menu.visibleItems.forEach { it.isChecked = (it.itemId == item.itemId) }
            updateMenuItems(menu)
            return true
        }

        override fun onMenuModeChange(menu: MenuBuilder) {
            updateMenuItems(menu)
        }
    })

    val menuPopupHelper = MenuPopupHelper(requireContext(), menuBuilder, binding.priorityImageButton)
    menuPopupHelper.setForceShowIcon(true)
    
    // 设置自定义菜单项布局
    menuPopupHelper.setMenuItemInflater(object : MenuInflater(requireContext()) {
        override fun inflate(menuRes: Int, menu: Menu) {
            super.inflate(menuRes, menu)
            updateMenuItems(menu as MenuBuilder)
        }
    })
    menuPopupHelper.show()
}

// 更新每个菜单项的显示状态
private fun updateMenuItems(menu: MenuBuilder) {
    for (item in menu.visibleItems) {
        val view = item.actionView ?: run {
            val view = LayoutInflater.from(requireContext()).inflate(R.layout.menu_item_checkable, null)
            item.actionView = view
            view
        }

        view.findViewById<ImageView>(R.id.menu_item_icon).setImageDrawable(item.icon)
        view.findViewById<TextView>(R.id.menu_item_title).text = item.title
        view.findViewById<ImageView>(R.id.menu_item_check).visibility = if (item.isChecked) View.VISIBLE else View.GONE
    }
}

方法二：修改主题样式（简单快捷） #

如果仅需要替换图标，无需自定义布局，直接修改主题样式最省事。

步骤1：定义自定义PopupMenu样式 #

在res/values/styles.xml中添加：

<style name="PopupMenuCustomStyle" parent="Widget.MaterialComponents.PopupMenu">
    <!-- 将默认复选框替换为对勾图标 -->
    <item name="android:listChoiceIndicatorSingle">@drawable/ic_checkmark</item>
</style>

注意：@drawable/ic_checkmark是你的对勾图标资源，需提前准备好（矢量图或png均可）。

步骤2：应用样式到PopupMenu #

有两种应用方式：

• 局部应用（仅当前PopupMenu）：创建时指定主题

val popupMenu = PopupMenu(requireContext(), binding.priorityImageButton, 0, R.attr.popupMenuStyle, R.style.PopupMenuCustomStyle)

• 全局应用（所有PopupMenu）：在Activity主题中设置

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="popupMenuStyle">@style/PopupMenuCustomStyle</item>
</style>

内容的提问来源于stack exchange，提问作者Cheok Yan Cheng