修改Android自带Switch样式

最新推荐文章于 2024-05-11 14:14:23 发布

WindFromFarEast

最新推荐文章于 2024-05-11 14:14:23 发布

阅读量1.3w

点赞数 3

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/xwx617/article/details/77934920

版权

Android 专栏收录该内容

50 篇文章

订阅专栏

为了适应不同UI风格的App，通常需要修改Android自带Switch的样式，包括按钮、轨迹及大小。通过实验发现，Switch的实际大小由thumb决定，而非track。本文介绍了如何创建自定义的thumb和track选择器，以改变Switch的外观，并提供了实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于Android自带的Switch样式不能应用于所有UI风格的App，因此修改Switch样式是项目中经常要用到的技术，Switch的样式一般来说需要修改以下部分：按钮(thumb)、轨迹(track)以及大小。

首先我们经过尝试可以发现，如果我们直接在布局文件中修改Switch的属性layout_width和layout_height是无法修改Switch的真实大小的，相反只能改变这个Switch布局占的空间大小，Switch按钮的大小并没有发生改变。

这里写图片描述

在StackOverflow上搜索How to change the size of Switch Widget后，得到了答案（StackOverflow上的高票答案指出Switch大小是由track决定的，但是我自己尝试后发现Switch大小是由thumb决定的）。
实际上控件Switch的大小是由thumb也就是按钮大小决定的，track轨迹会适应thumb的大小，因此若是我们想改变Swicth的大小，我们需要改变Thumb的大小。
下面我们自己写一个thumb，取名为my_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <size android:height="20dp" android:width="40dp" />
    <gradient android:startColor="#1E90FF" android:endColor="#1E90FF"/>
    <corners android:radius="180dip"/>
</shape>

这是一个类似操场形状的thumb，接着再写一个track的选择器switch_setting_selector.xml，实现switch点击后改变底色的功能，这里用的是我自己的图片

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

最后在布局文件中放上Switch

<Switch
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:thumb="@drawable/my_thumb"
        android:track="@drawable/switch_setting_selector"
        android:layout_marginTop="100dp"/>

最后效果如下
这里写图片描述