如何创建可切换至不同位置的Toggle Button Group？

针对你需要的这种双位置切换按钮组，这里有几种实用的实现方法：

1. 自定义ViewGroup封装 #

自己封装专属的切换组控件，灵活性最高：

• 新建一个继承自LinearLayout（或ConstraintLayout）的自定义ViewGroup，内部放置两个可点击的子View（TextView、Button均可）。
• 维护一个选中状态变量，点击任意子View时切换选中状态，同时更新两个子View的样式（比如背景色、文字颜色、边框样式）。
• 对外暴露选中状态变化的回调接口，方便外部监听结果。
• 简单代码示例：

class DualToggleGroup(context: Context, attrs: AttributeSet) : LinearLayout(context, attrs) {
    private var selectedPosition = 0
    private lateinit var btn1: TextView
    private lateinit var btn2: TextView
    private var onCheckedChangeListener: OnCheckedChangeListener? = null

    init {
        orientation = HORIZONTAL
        inflate(context, R.layout.layout_dual_toggle, this)
        btn1 = findViewById(R.id.btn_toggle1)
        btn2 = findViewById(R.id.btn_toggle2)
        setupClickListeners()
        updateButtonStyles()
    }

    private fun setupClickListeners() {
        btn1.setOnClickListener {
            selectedPosition = 0
            updateButtonStyles()
            onCheckedChangeListener?.onCheckedChanged(0)
        }
        btn2.setOnClickListener {
            selectedPosition = 1
            updateButtonStyles()
            onCheckedChangeListener?.onCheckedChanged(1)
        }
    }

    private fun updateButtonStyles() {
        btn1.setBackgroundResource(if (selectedPosition == 0) R.drawable.bg_selected_toggle else R.drawable.bg_unselected_toggle)
        btn2.setBackgroundResource(if (selectedPosition == 1) R.drawable.bg_selected_toggle else R.drawable.bg_unselected_toggle)
    }

    interface OnCheckedChangeListener {
        fun onCheckedChanged(position: Int)
    }

    fun setOnCheckedChangeListener(listener: OnCheckedChangeListener) {
        this.onCheckedChangeListener = listener
    }
}

2. 改造原生RadioButtonGroup #

利用原生单选组的逻辑，修改样式达到效果：

• 保留RadioButtonGroup的单选逻辑，给每个RadioButton隐藏默认的圆形按钮（设置android:button="@null"）。
• 自定义Selector作为RadioButton的背景，分别设置android:state_checked="true"和false时的样式（比如高亮背景、圆角边框等）。
• 布局示例：

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/rb_option1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@null"
        android:background="@drawable/toggle_selector"
        android:text="选项1"
        android:checked="true"/>

    <RadioButton
        android:id="@+id/rb_option2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@null"
        android:background="@drawable/toggle_selector"
        android:text="选项2"/>
</RadioGroup>

其中toggle_selector.xml定义选中和未选中的样式即可。

3. 使用Material Design 3的SegmentedButtonGroup #

如果你的项目用了Material Design 3，这个组件正好匹配需求：

• SegmentedButtonGroup天生就是这种横向多选项单选的样式，支持双选项切换，自带选中高亮效果。
• 布局示例：

<com.google.android.material.button.SegmentedButtonGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true">

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="选项A"/>

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="选项B"/>
</com.google.android.material.button.SegmentedButtonGroup>

只需开启singleSelection就能实现单选切换，样式还能通过Material主题自定义。

4. Jetpack Compose自定义实现 #

如果用Compose开发，直接通过状态管理快速实现：

• 用remember维护选中状态，通过Row包裹两个Button，根据状态切换样式。
• 代码示例：

@Composable
fun DualToggleButton(
    options: List<String>,
    selectedIndex: Int,
    onSelectedChange: (Int) -> Unit
) {
    Row(
        modifier = Modifier.border(1.dp, Color.Gray, RoundedCornerShape(8.dp))
            .clip(RoundedCornerShape(8.dp))
    ) {
        options.forEachIndexed { index, text ->
            Button(
                onClick = { onSelectedChange(index) },
                colors = ButtonDefaults.buttonColors(
                    containerColor = if (index == selectedIndex) Color.Blue else Color.Transparent,
                    contentColor = if (index == selectedIndex) Color.White else Color.Black
                ),
                modifier = Modifier.weight(1f)
            ) {
                Text(text = text)
            }
        }
    }
}

// 使用方式
var selectedIndex by remember { mutableStateOf(0) }
DualToggleButton(
    options = listOf("选项1", "选项2"),
    selectedIndex = selectedIndex,
    onSelectedChange = { selectedIndex = it }
)

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