Android如何调整ToggleButton样式，实现分隔边框与选中变色效果？

实现方案 #

步骤1：创建ToggleButton背景状态选择器 #

在res/drawable目录下新建toggle_button_bg.xml，用于自动切换选中/未选中状态的样式：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态：绿色填充，灰色边框 -->
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="#95f9ad" />
            <stroke android:width="1dp" android:color="#cccccc" />
            <!-- 如需圆角可加下面这行，调整圆角半径即可
            <corners android:radius="4dp" />
            -->
        </shape>
    </item>
    <!-- 未选中状态：白色填充，灰色边框 -->
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <stroke android:width="1dp" android:color="#cccccc" />
            <!-- 和选中状态保持一致的圆角
            <corners android:radius="4dp" />
            -->
        </shape>
    </item>
</selector>

步骤2：创建按钮分隔线样式 #

在res/drawable目录下新建toggle_divider.xml，作为按钮之间的分隔线：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#cccccc" />
    <size android:width="1dp" />
</shape>

步骤3：修改原有XML布局 #

调整LinearLayout和ToggleButton的属性，应用上面的样式：

<LinearLayout
    android:id="@+id/linearLayoutForButtons"
    android:layout_width="0dp"
    android:layout_height="@dimen/_25sdp"
    android:orientation="horizontal"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    <!-- 新增分隔线相关属性 -->
    android:divider="@drawable/toggle_divider"
    android:showDividers="middle"
    android:dividerPadding="0dp"
    >

    <ToggleButton
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAllCaps="false"
        <!-- 替换背景为状态选择器 -->
        android:background="@drawable/toggle_button_bg"
        android:layout_weight="1"
        android:checked="true"
        android:textOn="Button 1"
        android:textOff="Button 1"
        android:textSize="@dimen/_8ssp" />

    <ToggleButton
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/toggle_button_bg"
        android:layout_weight="1"
        android:textAllCaps="false"
        android:checked="false"
        android:textSize="@dimen/_8ssp"
        android:textOn="Button 2"
        android:textOff="Button 2" />

    <ToggleButton
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/toggle_button_bg"
        android:textAllCaps="false"
        android:layout_weight="1"
        android:checked="false"
        android:textSize="@dimen/_8ssp"
        android:textOn="Button 3"
        android:textOff="Button 3"/>
</LinearLayout>

适配说明 #

原有保证同一时间只有一个按钮选中的逻辑不需要修改，切换按钮checked属性时，背景会自动按照状态选择器的规则切换样式，无需额外代码控制背景颜色。如果需要更贴合目标样式的圆角效果，只需要取消状态选择器中corners标签的注释，调整圆角半径即可。

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