欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

修改Android自带Switch样式

程序员文章站 2022-07-13 16:35:20
...

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

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

修改Android自带Switch样式

在*上搜索How to change the size of Switch Widget后,得到了答案(*上的高票答案指出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"/>

最后效果如下
修改Android自带Switch样式