自定义SwitchView

最新推荐文章于 2025-04-25 22:19:50 发布

原创最新推荐文章于 2025-04-25 22:19:50 发布 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Switch

自定义控件专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Android中定制Switch组件的样式，包括调整滑块和滑道的高度差异，并展示了如何通过设置stroke来实现这一效果。此外，还提供了改变Switch字体颜色的方法。

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

先介绍几个单词，thumb：滑块，track：滑道，Switch是由滑块和滑道组成的，在Switch中，滑块和滑道的高是相同的，而且是固定的，所以我们给Switch设置width+height不会改变它的宽高。
参考： http://mp.weixin.qq.com/s/PlUN1LNumTycnLJZhWztTw

那么怎么设置滑块的高度超过滑道的高度呢？或者滑道的高度超过滑块的高度？

通过给height小的设置stroke（transparent）达到缩小高度的目的。

这里写图片描述

给滑道设置了stroke

这里写图片描述

<Switch
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:layout_marginTop="10dp"  
    android:thumb="@drawable/thumb_selector"  
    android:track="@drawable/track_selector" />

thumb_selector.XML

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

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

thumb_off:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#fff"/>
    <size android:width="20dp" android:height="20dp"/>
</shape>

track_selector.XML

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

track_on:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="5dp"
        android:color="@android:color/transparent" />
    <solid android:color="#3332CD32" />
    <corners android:radius="20dp" />
</shape>

track_off

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="5dp"
        android:color="@android:color/transparent" />
    <solid android:color="#AAA" />
    <corners android:radius="20dp" />
</shape>

给滑块设置了stroke

这里写图片描述

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:thumb="@drawable/thumb_selector_ios"
    android:track="@drawable/track_selector_ios" />

thumb_selector_ios.xml

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

thumb_on_ios:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <stroke
        android:width="5dp"
        android:color="@android:color/transparent" />
    <solid android:color="@android:color/white" />
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>

thumb_off_ios:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <stroke
        android:width="5dp"
        android:color="@android:color/transparent" />
    <solid android:color="@android:color/white" />
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>

track_selector_ios

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

track_on_ios:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#32CD32" />
    <corners android:radius="20dp"/>
</shape>

track_off_ios:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#AAA" />
    <corners android:radius="20dp" />
</shape>

改变字体颜色

这里写图片描述

android:switchTextAppearance="@style/SwitchTextColor"

SwitchTextColor:

<style name="SwitchTextColor" parent="@android:style/TextAppearance.Small">
    <item name="android:textColor">@color/thumb_text_color_selector</item>
</style>

thumb_text_color_selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#000" android:state_checked="true"/>
    <item android:color="#FFF" android:state_checked="false"/>
</selector>