Android自定义View实现RadioButton/CheckBox式TalkBack无障碍交互

我有一个包含两个文本字段和一个RadioButton的自定义View，希望它在TalkBack交互上表现得如同原生RadioButton。

当前情况 #

选中该自定义View时，TalkBack仅播报：

Text 1, Text2 双击激活

它不会播报选中/未选中状态，也不会说明组件类型。但单独导航到自定义View内部的RadioButton时，能正确播报：未选中，testRadio，单选按钮。

期望行为 #

将整个自定义View视为单个元素，按照原生RadioButton的结构播报，例如：

未选中，Text1, Text2，单选按钮，双击切换。

同时希望该自定义元素可在RadioButton与CheckBox行为间切换。

相关代码 #

布局文件 custom_radio_button_with_text.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:id="@+id/textStack"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/radio_button"
        android:orientation="vertical">
        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text 1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/radio_button"
            app:layout_constraintBottom_toTopOf="@id/text2"
            />

        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text 2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/text1"
            />
    </LinearLayout>

    <RadioButton
        android:id="@+id/radio_button"
        android:text="testRadio"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/textStack"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

自定义View类 CustomRadioButtonWithText.kt

class CustomRadioButtonWithText(context: Context, attrs: AttributeSet) : ConstraintLayout(context,attrs), Checkable{

    private var isChecked = false
    private val radioButton: RadioButton
    private val textView1: TextView
    private val textView2: TextView

    init {
        LayoutInflater.from(context).inflate(R.layout.custom_radio_button_with_text, this, true)

        radioButton = findViewById(R.id.radio_button)
        textView1 = findViewById(R.id.text1)
        textView2 = findViewById(R.id.text2)

        setOnClickListener {
            toggle()
        }
    }

    override fun setChecked(checked: Boolean) {
        isChecked = checked
        radioButton.isChecked = isChecked
    }

    override fun isChecked(): Boolean {
        return isChecked
    }

    override fun toggle() {
        isChecked = !isChecked
        radioButton.isChecked = isChecked
    }
}

主布局 activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.myapplication.CustomRadioButtonWithText
        android:id="@+id/customRadioButtonWithText"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </com.example.myapplication.CustomRadioButtonWithText>

    <androidx.appcompat.widget.AppCompatRadioButton
        android:text="standard radio button"
        android:id="@+id/standardRadioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/customRadioButtonWithText"
        />

    <androidx.appcompat.widget.AppCompatCheckBox
        android:text="standard check box"
        android:id="@+id/standardCheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/standardRadioButton"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

1. 屏蔽内部子View的无障碍焦点 #

要让整个自定义View作为单个交互单元，禁止内部TextView和RadioButton被TalkBack单独选中，在布局文件中给子View添加以下属性：

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text 1"
    android:focusable="false"
    android:importantForAccessibility="no"
    ... />

<TextView
    android:id="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text 2"
    android:focusable="false"
    android:importantForAccessibility="no"
    ... />

<RadioButton
    android:id="@+id/radio_button"
    android:text="testRadio"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:focusable="false"
    android:importantForAccessibility="no"
    ... />

2. 自定义无障碍播报逻辑 #

通过AccessibilityNodeInfo配置自定义View的角色、状态和播报文本，同时支持Radio/CheckBox类型切换：

class CustomRadioButtonWithText(context: Context, attrs: AttributeSet) : ConstraintLayout(context, attrs), Checkable {

    private var isChecked = false
    private val radioButton: RadioButton
    private val textView1: TextView
    private val textView2: TextView
    private var isRadioType = true

    init {
        LayoutInflater.from(context).inflate(R.layout.custom_radio_button_with_text, this, true)

        radioButton = findViewById(R.id.radio_button)
        textView1 = findViewById(R.id.text1)
        textView2 = findViewById(R.id.text2)

        setOnClickListener {
            toggle()
        }

        // 从XML属性读取初始类型
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomRadioButtonWithText)
        isRadioType = typedArray.getBoolean(R.styleable.CustomRadioButtonWithText_isRadioType, true)
        typedArray.recycle()
    }

    // 对外暴露类型切换方法
    fun setType(isRadio: Boolean) {
        isRadioType = isRadio
        radioButton.isChecked = isChecked
        sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_SELECTED)
    }

    override fun setChecked(checked: Boolean) {
        if (isChecked != checked) {
            isChecked = checked
            radioButton.isChecked = isChecked
            sendAccessibilityEvent(if (checked) AccessibilityEvent.TYPE_VIEW_SELECTED else AccessibilityEvent.TYPE_VIEW_FOCUSED)
        }
    }

    override fun isChecked(): Boolean {
        return isChecked
    }

    override fun toggle() {
        // CheckBox可自由切换，RadioButton仅允许从非选中切换为选中（需结合单选组逻辑）
        if (!isRadioType || !isChecked) {
            setChecked(!isChecked)
        }
    }

    override fun onInitializeAccessibilityNodeInfo(info: AccessibilityNodeInfo) {
        super.onInitializeAccessibilityNodeInfo(info)
        // 设置组件角色
        info.className = if (isRadioType) RadioButton::class.java.name else CheckBox::class.java.name
        // 设置选中状态
        info.isChecked = isChecked
        // 设置播报文本
        info.text = "${textView1.text}, ${textView2.text}"
        // 配置可执行操作
        info.addAction(AccessibilityNodeInfo.ACTION_CLICK)
        info.addAction(AccessibilityNodeInfo.ACTION_TOGGLE)
    }
}

3. （可选）添加XML属性支持类型配置 #

在res/values/attrs.xml中定义自定义属性，可直接在布局中指定组件类型：

<resources>
    <declare-styleable name="CustomRadioButtonWithText">
        <attr name="isRadioType" format="boolean" />
    </declare-styleable>
</resources>

布局中使用示例：

<com.example.myapplication.CustomRadioButtonWithText
    android:id="@+id/customRadioButtonWithText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:isRadioType="false" <!-- 设置为CheckBox类型 -->
    ... />

4. 单选组支持（可选） #

若需要实现原生RadioGroup的互斥逻辑，可参考原生RadioGroup源码，在自定义View的toggle()方法中处理组内其他元素的选中状态，或直接使用RadioGroup包裹自定义View。

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