Android 自定义Switch样式

效果展示

踩坑

1. 无效的宽高?

通常情况下switch的轨道 (track) 的宽度固定为拇指 (thumb) 宽度的2倍，高度相同，因此想要做成如下的效果，只能在Drawable上动手脚。

解决方案：给轨道 (track) 或拇指 (thumb) 的背景 设置透明的带高度的 strock ，想要拇指更小些就给拇指设，反之亦然。

实现代码

1. 轨道track

<!-- track_on.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FF00B2FF" />
    <!-- 此处透明stroke压缩轨道高度 -->
    <stroke
        android:width="3dp"
        android:color="#00000000" />
    <corners android:radius="15dp" />
</shape>

<!-- track_off.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFCFDBEF" />
    <!-- 此处透明stroke压缩轨道高度 -->
    <stroke
        android:width="3dp"
        android:color="#00000000" />
    <corners android:radius="15dp" />
</shape>

<!-- selector_track.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- 调用两个xml文件分别作为开关状态下的样式 -->
    <item android:drawable="@drawable/track_on" android:state_checked="true" />
    <item android:drawable="@drawable/track_off" android:state_checked="false" />
</selector>

2. 拇指thumb

<!-- shape_thumb.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FFCFDBEF" />
    <stroke android:width="0.5dp"
        android:color="#FF898E9D" />
    <size
        android:width="32dp"
        android:height="32dp" />
</shape>

<!-- selector_thumb.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/shape_thumb" android:state_checked="true" />
    <item android:drawable="@drawable/shape_thumb" android:state_checked="false" />
</selector>

3. 使用switch

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#242D46">

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="32dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="50dp"
        android:checked="false"
        android:textOff=""
        android:textOn=""
        android:thumb="@drawable/selector_switch_thumb"
        android:track="@drawable/selector_switch_track" />

    <Switch
        android:id="@+id/switch2"
        android:layout_width="wrap_content"
        android:layout_height="32dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="10dp"
        android:checked="true"
        android:textOff=""
        android:textOn=""
        android:thumb="@drawable/selector_switch_thumb"
        android:track="@drawable/selector_switch_track" />
</LinearLayout>