Android(Kotlin)实现带顶部标签的可复用自定义RadioGroup

你当前的问题核心是自定义控件继承了RadioGroup，但又在布局里嵌套了另一个RadioGroup，导致外部添加的RadioButton会被加到外层的RadioGroup（自定义类本身），再加上外层RadioGroup的orientation设置为horizontal，就会让标签和单选按钮横向排列，和预期的垂直结构冲突。以下是正确的实现方案：

1. 定义自定义属性（可选但推荐） #

在res/values/attrs.xml中添加自定义属性，支持直接在布局里配置标签文本和单选按钮排列方向：

<resources>
    <declare-styleable name="LabelRadioGroup">
        <attr name="labelText" format="string" />
        <attr name="radioOrientation" format="enum">
            <enum name="horizontal" value="0" />
            <enum name="vertical" value="1" />
        </attr>
    </declare-styleable>
</resources>

2. 修改自定义控件类 #

将父类改为LinearLayout，天然支持垂直排列标签和RadioGroup，同时拦截外部传入的RadioButton，自动转移到内部的RadioGroup中：

class LabelRadioGroup(context: Context, attrs: AttributeSet?) : LinearLayout(context, attrs) {
    private lateinit var labelTextView: TextView
    private lateinit var innerRadioGroup: RadioGroup

    init {
        // 固定外层为垂直布局
        orientation = VERTICAL
        LayoutInflater.from(context).inflate(R.layout.compound_label_radiogroup, this, true)
        
        // 绑定内部控件
        labelTextView = findViewById(R.id.labelTextView)
        innerRadioGroup = findViewById(R.id.radioGroup)
        
        // 解析自定义属性
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.LabelRadioGroup)
        val labelText = typedArray.getString(R.styleable.LabelRadioGroup_labelText)
        val radioOrientation = typedArray.getInt(R.styleable.LabelRadioGroup_radioOrientation, 0)
        
        labelTextView.text = labelText ?: "Label"
        innerRadioGroup.orientation = if (radioOrientation == 0) RadioGroup.HORIZONTAL else RadioGroup.VERTICAL
        
        typedArray.recycle()
    }

    // 拦截子View添加，把RadioButton自动转到内部RadioGroup
    override fun addView(child: View?, index: Int, params: LayoutParams?) {
        if (child is RadioButton) {
            innerRadioGroup.addView(child, index, params)
        } else {
            super.addView(child, index, params)
        }
    }

    // 暴露RadioGroup常用方法，方便外部调用
    fun getCheckedRadioButtonId(): Int {
        return innerRadioGroup.checkedRadioButtonId
    }

    fun setOnCheckedChangeListener(listener: RadioGroup.OnCheckedChangeListener) {
        innerRadioGroup.setOnCheckedChangeListener(listener)
    }
}

3. 修正布局文件compound_label_radiogroup.xml #

用<merge>标签减少布局层级，只保留标签和内部RadioGroup：

<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
        android:id="@+id/labelTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Label"
        android:layout_marginBottom="8dp"/>

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"/>
</merge>

4. 使用示例 #

现在可以灵活配置标签文本、单选按钮方向，同时自由添加RadioButton：

<sample.LabelRadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:labelText="选择偏好"
    app:radioOrientation="horizontal">

    <androidx.appcompat.widget.AppCompatRadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="选项A"/>

    <androidx.appcompat.widget.AppCompatRadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="选项B"/>
</sample.LabelRadioGroup>

关键说明 #

• 自定义控件继承LinearLayout，保证标签在上、单选按钮在下的垂直结构。
• 通过addView拦截方法，保持外部使用方式和原生RadioGroup一致，无需手动嵌套RadioButton到内部容器。
• 自定义属性支持不同场景的配置需求，无需硬编码内容。

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