如何实现和谷歌地图筛选选项一致的可选框 支持动态添加及横向滚动

组件通用名称 #

你要找的这类组件属于Material Design体系下的可滚动多选筛选标签组（Scrollable Multi-select Filter Chip Group），是Chip组件的典型组合使用场景，很多热门应用里的同类筛选条都是基于这套规范实现的。

具体实现方案（Android原生） #

• 依赖引入：首先确保你的项目引入了官方Material Components库，Chip相关组件都在这个库中提供，不需要自定义基础控件
• 布局结构：外层使用HorizontalScrollView，设置android:scrollbars="none"关闭滚动条显示，内层嵌套ChipGroup，设置app:singleSelection="false"开启多选能力，android:orientation="horizontal"设置横向排列
• 动态添加选项：当你获取到基于用户位置生成的pincode列表后，直接在代码中循环创建Chip实例，设置文字、选中样式、点击监听后添加到ChipGroup中即可，支持任意数量的动态新增，完全适配你的非固定选项需求
• 样式适配：直接使用官方提供的Widget.MaterialComponents.Chip.Filter作为Chip的基础样式，仅需要调整圆角、选中填充色、未选中描边色几个参数，就能实现和谷歌地图筛选选项完全一致的视觉效果
• 选中逻辑维护：给每个Chip设置setOnCheckedChangeListener监听选中状态变化，自行维护已选中的pincode列表即可，支持任意数量的多选操作

核心代码示例 #

布局代码：

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="none"
    android:paddingVertical="8dp">

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/pincodeChipGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="false"
        app:chipSpacing="8dp"
        android:paddingHorizontal="16dp"
        android:orientation="horizontal"/>

</HorizontalScrollView>

动态添加Chip的代码（Kotlin）：

// 假设pincodeList是你根据用户位置生成的pincode列表
pincodeList.forEach { pincode ->
    val chip = Chip(this).apply {
        text = pincode
        isCheckable = true
        setTextColor(ContextCompat.getColorStateList(context, R.color.chip_text_color))
        setChipBackgroundColorResource(R.color.chip_bg_color)
        chipStrokeColor = ContextCompat.getColorStateList(context, R.color.chip_stroke_color)
        cornerRadius = resources.getDimension(R.dimen.chip_corner_radius)
        setOnCheckedChangeListener { _, isChecked ->
            // 处理选中逻辑，更新已选pincode列表
            if (isChecked) selectedPincodes.add(pincode)
            else selectedPincodes.remove(pincode)
        }
    }
    pincodeChipGroup.addView(chip)
}

之前方案的问题说明 #

你之前尝试的Radio Group本身是单选组件，天然不支持多选能力；自定义Checkbox样式的开发成本高，且没有原生Chip的滑动、动画等配套效果；单独实现无滚动条横向滚动也需要额外处理嵌套滑动冲突，用官方Chip组合方案可以直接规避这些问题。

内容的提问来源于stack exchange，提问作者Akash Pratap Singh