如何实现选中一个View组件时自动取消其他组件的选中状态？及单选按钮实现示例咨询

嘿，这个需求其实挺常见的，核心就是维护一个单一的选中状态，让所有组件根据这个状态自动切换选中样式。我给你准备了两种实现方案，一种是自定义View组的方式，另一种是用系统自带的RadioButton（这也是最省心的方案，毕竟系统已经帮你封装好了单选逻辑）。

如果你的组件是自定义的View（不是系统RadioButton），那我们可以通过维护一个全局的选中状态来实现单选效果。

步骤1：维护选中状态 #

在ViewModel或者Activity里用一个可观察的变量来保存当前选中项的标识（比如View的ID或者索引），这样状态变化时能自动通知UI更新：

class MainViewModel : ViewModel() {
    // 用LiveData来观察状态变化，自动触发UI更新
    val selectedItemId = MutableLiveData<Int?>()
}

步骤2：绑定View与状态 #

在Activity里把所有需要参与单选的View加入列表，给每个View设置点击事件，并观察状态变化来更新每个View的选中样式：

class MainActivity : AppCompatActivity() {
    private lateinit var viewModel: MainViewModel
    private val selectableViews = mutableListOf<SelectableView>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewModel = ViewModelProvider(this)[MainViewModel::class.java]

        // 把所有需要单选的自定义View加入列表
        selectableViews.add(findViewById(R.id.view1))
        selectableViews.add(findViewById(R.id.view2)) // 文本为100的View
        selectableViews.add(findViewById(R.id.view3))

        // 给每个View设置点击事件，点击时更新选中状态
        selectableViews.forEach { view ->
            view.setOnClickListener {
                viewModel.selectedItemId.value = view.id
            }
        }

        // 监听选中状态变化，更新所有View的选中样式
        viewModel.selectedItemId.observe(this) { selectedId ->
            selectableViews.forEach { view ->
                view.isSelected = view.id == selectedId
            }
        }
    }
}

步骤3：自定义View的选中样式 #

给你的自定义View实现选中状态的样式切换，比如切换背景色：

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

    override fun setSelected(selected: Boolean) {
        super.setSelected(selected)
        // 根据选中状态切换背景
        background = if (selected) {
            ContextCompat.getDrawable(context, R.drawable.selected_bg)
        } else {
            ContextCompat.getDrawable(context, R.drawable.normal_bg)
        }
    }
}

如果你的需求允许用RadioButton，那直接用RadioGroup包裹是最省事的——RadioGroup本身就会自动管理内部RadioButton的单选状态，选中一个时其他会自动取消选中，完全不用自己维护状态。

步骤1：布局文件 #

把所有RadioButton放在同一个RadioGroup里：

<RadioGroup
    android:id="@+id/radio_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <RadioButton
        android:id="@+id/radio_btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="选项1" />

    <RadioButton
        android:id="@+id/radio_btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="100" /> <!-- 你提到的文本为100的选项 -->

    <RadioButton
        android:id="@+id/radio_btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="选项3" />

</RadioGroup>

步骤2：监听选中事件 #

在Activity里监听RadioGroup的选中变化，处理业务逻辑：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val radioGroup = findViewById<RadioGroup>(R.id.radio_group)
        radioGroup.setOnCheckedChangeListener { group, checkedId ->
            // 获取选中的RadioButton，处理后续逻辑
            val selectedBtn = findViewById<RadioButton>(checkedId)
            Toast.makeText(this, "选中了：${selectedBtn.text}", Toast.LENGTH_SHORT).show()
        }
    }
}

自定义RadioButton样式 #

如果默认的RadioButton样式不符合你的UI需求，还可以自定义选中/未选中的图标：

<RadioButton
    android:id="@+id/custom_radio_btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="自定义样式选项"
    android:button="@drawable/radio_selector" />

然后在drawable目录下创建radio_selector.xml：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_selected_icon" android:state_checked="true" />
    <item android:drawable="@drawable/radio_unselected_icon" android:state_checked="false" />
</selector>

这样自定义后的RadioButton看起来和普通View没区别，但依然保留RadioGroup的单选逻辑。

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