Android 自定义Switch样式

最新推荐文章于 2025-10-29 15:16:19 发布

原创最新推荐文章于 2025-10-29 15:16:19 发布 · 3.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#android

Android 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Android中自定义Switch的样式，通过修改轨道(track)和拇指(thumb)的Drawable来改变其外观。通过在轨道上设置透明stroke来调整高度，创建了椭圆形的拇指，并给出了不同状态下的选择器。最终展示了两种不同状态的Switch效果。

Android 自定义Switch样式

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

效果展示

在这里插入图片描述

踩坑

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>