Android 自定义Switch样式

本文介绍: 原生And roi d 自定义 switch 开关按钮，纯纯干货没有一个标点是多余的

And roi d 自定义Swi tc h 样式

效果展示
踩坑
- 1. 无效的宽高?
实现代码

效果 展示

在这里插入图片描述

踩坑

1. 无效的宽高?

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

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

实现 代码

1. 轨道track

&lt;!-- track_on.xml --&gt;
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"&gt;
    &lt;solid android:color="#FF00B2FF" /&gt;
    &lt;!-- 此处透明stroke压缩轨道高度 --&gt;
    <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. 拇指th u m b

<!-- 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. 使用 s wi tc h

<?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>