Android如何实现支持单选的多行可选中文本视图（ChipGroup方案）

第一步：调整ChipGroup基础配置，开启单选+自动换行 #

修改你现有ChipGroup的XML属性，添加单选和换行支持：

<com.google.android.material.chip.ChipGroup
    android:id="@+id/radio1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:orientation="horizontal"
    app:singleSelection="true" <!-- 开启单选模式，同一时间仅选中一个 -->
    app:allowChipWrap="true" <!-- 开启自动换行，实现多行布局 -->
    app:chipSpacingHorizontal="8dp" <!-- 横向Chip间距 -->
    app:chipSpacingVertical="8dp" <!-- 纵向行间距 -->
    app:checkedChip="@id/paris" <!-- 可选：设置默认选中项 -->
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView3">

需确保你的项目依赖的Material组件库版本不低于1.2.0，否则allowChipWrap属性不生效，可在module级build.gradle中确认依赖：

implementation 'com.google.android.material:material:1.9.0' // 可替换为最新稳定版

第二步：创建选中态样式Selector #

分别创建文字颜色和背景的状态选择器，实现选中/未选中的样式切换：

2.1 文字颜色Selector #

在res/color目录下新建chip_text_color.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FFFFFFFF" android:state_checked="true" /> <!-- 选中时白色文字 -->
    <item android:color="#D8000000" android:state_checked="false" /> <!-- 未选中时默认黑色文字 -->
</selector>

2.2 背景颜色Selector #

在res/drawable目录下新建chip_bg_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FF2196F3" android:state_checked="true" /> <!-- 选中时背景色可自行替换 -->
    <item android:color="#FFEEEEEE" android:state_checked="false" /> <!-- 未选中时浅灰背景 -->
</selector>

第三步：给Chip应用样式 #

你可以直接给每个Chip添加属性，也可以统一封装成Style复用，单Chip配置示例如下：

<com.google.android.material.chip.Chip
    android:id="@+id/paris"
    style="@style/Widget.MaterialComponents.Chip.Choice" <!-- 选用选择类Chip样式，默认支持选中状态 -->
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/paris"
    android:textColor="@color/chip_text_color"
    app:chipBackgroundColor="@drawable/chip_bg_selector"
    app:chipCornerRadius="4dp" /> <!-- 可选：调整圆角大小匹配设计效果 -->

<!-- 其余5个Chip都按上面的样式配置即可 -->

如果要封装Style复用，可在res/values/styles.xml中添加自定义样式，之后每个Chip直接引用该style即可：

<style name="MySelectChipStyle" parent="Widget.MaterialComponents.Chip.Choice">
    <item name="android:textColor">@color/chip_text_color</item>
    <item name="chipBackgroundColor">@drawable/chip_bg_selector</item>
    <item name="chipCornerRadius">4dp</item>
    <item name="rippleColor">@android:color/transparent</item> <!-- 可选：去掉点击水波纹效果 -->
</style>

第四步：添加选中监听（可选，如有业务逻辑需要） #

在Activity/Fragment中添加ChipGroup的选中监听，获取选中项做后续处理：

Kotlin示例： #

radio1.setOnCheckedStateChangeListener { group, checkedIds ->
    if (checkedIds.isNotEmpty()) {
        val checkedChip = group.findViewById<Chip>(checkedIds.first())
        val selectedText = checkedChip.text.toString()
        // 处理选中逻辑
    }
}

Java示例： #

radio1.setOnCheckedStateChangeListener((group, checkedIds) -> {
    if (!checkedIds.isEmpty()) {
        Chip checkedChip = group.findViewById(checkedIds.get(0));
        String selectedText = checkedChip.getText().toString();
        // 处理选中逻辑
    }
});

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