Android中如何创建带分隔线的圆角外框单选按钮组

核心思路 #

取消内部RadioButton的完整边框，仅通过RadioGroup保留外层圆角边框，内部分隔线通过给顶部选项添加底部边框实现，避免边框重叠导致的颜色加深、对齐问题，同时绕开RadioGroup divider属性的兼容性问题。

1. 修改布局代码 #

移除RadioGroup的divider和showDividers属性，调整RadioButton的背景和内边距：

<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/dp_32"
    android:layout_marginStart="@dimen/dp_16"
    android:layout_marginEnd="@dimen/dp_16"
    android:orientation="vertical"
    android:background="@drawable/radio_button_rectangle"
    app:layout_constraintTop_toBottomOf="@+id/title"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent">

    <RadioButton
        android:id="@+id/radio_btn_14_days"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/dp_16"
        android:paddingBottom="@dimen/dp_16"
        android:paddingStart="@dimen/dp_16"
        android:paddingEnd="@dimen/dp_16"
        android:background="@drawable/radio_top_item_bg"
        android:text="@string/14_days"/>

    <RadioButton
        android:id="@+id/radio_btn_30_days"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/dp_16"
        android:paddingBottom="@dimen/dp_16"
        android:paddingStart="@dimen/dp_16"
        android:paddingEnd="@dimen/dp_16"
        android:background="@drawable/radio_bottom_item_bg"
        android:text="@string/30_DAYS"/>

</RadioGroup>

2. 调整Drawable文件 #

外层圆角边框（radio_button_rectangle.xml，保留原代码）

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:width="@dimen/dp_1" android:color="@color/black"/>
    <solid android:color="@color/transparent"/>
    <corners android:radius="5dp"/>
</shape>

顶部选项背景（radio_top_item_bg.xml，仅底部边框）

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/transparent"/>
    <stroke
        android:width="@dimen/dp_1"
        android:color="@color/black"
        android:bottomWidth="@dimen/dp_1"
        android:leftWidth="0dp"
        android:rightWidth="0dp"
        android:topWidth="0dp"/>
</shape>

底部选项背景（radio_bottom_item_bg.xml，无边框）

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/transparent"/>
</shape>

3. 可选：添加选中状态高亮 #

如果需要给选中的选项添加背景高亮，可创建Selector drawable（例如radio_top_selector.xml）：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/your_selected_highlight_color"/>
            <stroke
                android:width="@dimen/dp_1"
                android:color="@color/black"
                android:bottomWidth="@dimen/dp_1"
                android:leftWidth="0dp"
                android:rightWidth="0dp"
                android:topWidth="0dp"/>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/transparent"/>
            <stroke
                android:width="@dimen/dp_1"
                android:color="@color/black"
                android:bottomWidth="@dimen/dp_1"
                android:leftWidth="0dp"
                android:rightWidth="0dp"
                android:topWidth="0dp"/>
        </shape>
    </item>
</selector>

将顶部RadioButton的android:background替换为该Selector即可，底部选项的Selector同理去掉底部边框。

问题根源说明 #

• 原方案中内部RadioButton的完整边框与RadioGroup的外边框重叠，导致边角线条加粗、对齐偏移
• RadioGroup的divider属性需配合drawable使用，直接设置color无法生效，且与内部边框重复造成视觉混乱

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