Android下拉式多选Spinner实现咨询：自定义Spinner还是自定义视图？

方案选择：推荐完全自定义视图 #

如果硬改原生Spinner，你会碰到不少棘手问题：原生Spinner的下拉弹窗默认是单列表布局，改成两列需要重写Popup的Adapter和布局逻辑，而且原生根本没有多选支持，得手动维护选中状态，很容易出现显示内容和实际选中项不一致的情况。

而完全自定义视图的灵活性拉满，能直接按照需求实现两列布局和多选逻辑，虽然要自己写展开/收起弹窗的基础逻辑，但这些逻辑都不复杂，写完之后复用性也强，反而比硬改Spinner更省心。

自定义视图的具体实现步骤 #

1. 编写主视图布局 #

主视图就是用户点击触发弹窗的入口，用一个TextView展示选中内容，加个箭头图标提示可展开：

<!-- res/layout/custom_multiselect_spinner.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp"
    android:clickable="true"
    android:focusable="true"
    android:background="?attr/selectableItemBackground">

    <TextView
        android:id="@+id/tv_selected"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="请选择"
        android:textSize="16sp"/>

    <ImageView
        android:id="@+id/iv_arrow"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_arrow_down"/>
</LinearLayout>

2. 编写下拉弹窗的选项布局 #

弹窗里用RecyclerView实现两列布局，每个选项包含Checkbox和文本：

<!-- res/layout/popup_multiselect_item.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="12dp"
    android:background="?attr/selectableItemBackground">

    <CheckBox
        android:id="@+id/cb_option"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"/>

    <TextView
        android:id="@+id/tv_option"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="14sp"/>
</LinearLayout>

3. 核心逻辑实现（Kotlin为例） #

创建自定义View类，处理弹窗显示/隐藏、选中状态维护、文本更新：

class CustomMultiSelectSpinner @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {

    private val tvSelected: TextView
    private val ivArrow: ImageView
    private var popupWindow: PopupWindow? = null
    private val selectedOptions = mutableSetOf<String>()
    private lateinit var options: List<String>

    init {
        inflate(context, R.layout.custom_multiselect_spinner, this)
        tvSelected = findViewById(R.id.tv_selected)
        ivArrow = findViewById(R.id.iv_arrow)

        // 点击主视图切换弹窗状态
        setOnClickListener {
            popupWindow?.let {
                if (it.isShowing) dismissPopup() else showPopup()
            } ?: showPopup()
        }
    }

    // 设置可选选项列表
    fun setOptions(optionsList: List<String>) {
        options = optionsList
    }

    // 显示下拉弹窗
    private fun showPopup() {
        val recyclerView = RecyclerView(context).apply {
            layoutManager = GridLayoutManager(context, 2) // 两列布局
            adapter = OptionAdapter(options, selectedOptions) { option, isChecked ->
                // 更新选中集合
                if (isChecked) selectedOptions.add(option) else selectedOptions.remove(option)
                // 更新主视图文本
                updateSelectedText()
            }
            setPadding(16, 16, 16, 16)
        }

        popupWindow = PopupWindow(
            recyclerView,
            LayoutParams.MATCH_PARENT,
            LayoutParams.WRAP_CONTENT,
            true
        ).apply {
            setBackgroundDrawable(ColorDrawable(Color.WHITE))
            isOutsideTouchable = true // 点击外部关闭弹窗
            setOnDismissListener {
                ivArrow.setImageResource(R.drawable.ic_arrow_down) // 箭头恢复向下
            }
            showAsDropDown(this@CustomMultiSelectSpinner) // 在主视图下方显示
            ivArrow.setImageResource(R.drawable.ic_arrow_up) // 箭头改为向上
        }
    }

    // 关闭弹窗
    private fun dismissPopup() {
        popupWindow?.dismiss()
        ivArrow.setImageResource(R.drawable.ic_arrow_down)
    }

    // 更新选中内容的显示文本
    private fun updateSelectedText() {
        tvSelected.text = if (selectedOptions.isEmpty()) {
            "请选择"
        } else {
            selectedOptions.joinToString(", ")
        }
    }

    // 对外提供获取选中选项的方法
    fun getSelectedOptions(): Set<String> = selectedOptions.toSet()
}

// 弹窗选项的Adapter
class OptionAdapter(
    private val options: List<String>,
    private val selectedOptions: Set<String>,
    private val onCheckChanged: (String, Boolean) -> Unit
) : RecyclerView.Adapter<OptionAdapter.ViewHolder>() {

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val cbOption: CheckBox = itemView.findViewById(R.id.cb_option)
        val tvOption: TextView = itemView.findViewById(R.id.tv_option)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.popup_multiselect_item, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val option = options[position]
        holder.tvOption.text = option
        holder.cbOption.isChecked = selectedOptions.contains(option)
        // 监听Checkbox状态变化
        holder.cbOption.setOnCheckedChangeListener { _, isChecked ->
            onCheckChanged(option, isChecked)
        }
    }

    override fun getItemCount() = options.size
}

4. 在布局中使用自定义View #

<com.yourpackage.CustomMultiSelectSpinner
    android:id="@+id/custom_spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

5. 代码中初始化 #

val spinner = findViewById<CustomMultiSelectSpinner>(R.id.custom_spinner)
spinner.setOptions(listOf("选项1", "选项2", "选项3", "选项4", "选项5", "选项6"))

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