Android 自定义 Switch 控件外观

一、简介：

在Android开发中，我们可以通过改变默认的switch控件外观来达到美化自己界面的目的，大概有以下几种方法：

1. 修改控件属性

2. 代码中继承原Switch类，重新定义onDraw方法

3. 自定义style样式

本文只介绍其中的第一种方法。

效果图 - 关闭状态

效果图 - 打开状态

二、具体步骤：

1. 自定义滑块的样式文件

 选中时为 thumb_blue.xml， 未选中时为 thumb_grey.xml，

thumb_blue.xml

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

    <size
        android:height="30dp"
        android:width="30dp" />

    <stroke
        android:width="2dp"
        android:color="#BEBEBE" />

    <solid android:color="#6AB5FB" />

</shape>

 thumb_grey.xml

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

    <corners android:radius="15dp"/>
    <size
        android:height="30dp"
        android:width="30dp" />

    <stroke
        android:width="2dp"
        android:color="#BEBEBE" />
	
    <solid android:color="#D5D5D5" />

</shape>

2. 自定义滑道的样式文件

 选中和未选中时都用了同一个文件 track_bg.xml

track_bg.xml

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <size
        android:width="64dp"
        android:height="30dp"/>
    <corners android:radius="15dp"/>
    <stroke
        android:width="2dp"
        android:color="#BEBEBE"/>
</shape> 

3.  自定义滑块的selector文件 selector_thumb.xml

selector_thumb.xml

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

</selector>

4.  自定义滑道的selector文件  selector_track.xml

selector_track.xml

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

    <item android:drawable="@drawable/track_bg" android:state_checked="true"/>
    <item android:drawable="@drawable/track_bg"/>

</selector>

5. 在布局文件activity_main.xml中修改控件属性

activity_main.xml

    <Switch
        android:id="@+id/switch2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Custom Switch"
        android:textOff=" "
        android:textOn="  "
        android:switchMinWidth="40dp"
        android:thumb="@drawable/selector_thumb"
        android:track="@drawable/selector_track" />

这样，就基本可以实现上面效果图中的自定义switch的效果了，对track和thumb的样式进行灵活变通，可以实现更多你想要的效果。

6. 源码下载

地址：http://download.csdn.net/detail/u013490924/9826044