Android Switch控件修改样式

Android中自带的Switch控件在很多时候总觉得和整体系统风格不符，很多时候，自定义Switch是一种方法。

但其实不用这么麻烦，安卓自带的Switch通过修改一些属性，也可以达到和自定义Switch差不多的一个效果。

个人感觉，Switch的属性设置和其他控件还是有挺大区别的。因此，写下此文，方便有需要的同学参考。

先上效果图：

以上便是修改后效果 与 原生Switch的效果对比。代码在文章底部给出

实现方式：

1.底部滑动条，在开关打开状态为绿色，开关关闭状态为灰色

在 res/drawable 文件夹下面，写两个滑动条的底图 ，通过一个选择器selector进行控制。

gray_track.xml ：非打开状态，灰色的底图

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="rectangle" >  
4.   
5.     <!-- 高度30   此处设置宽度无效-->  
6.     <size android:height="30dp"/>  
7.     <!-- 圆角弧度 15 -->  
8.     <corners android:radius="15dp"/>  
9.       
10.       
11.     <!-- 变化率  定义从左到右的颜色不变 -->  
12.     <gradient  
13.         android:endColor="#888888"  
14.         android:startColor="#888888" />  
15.   
16. </shape>  

green_track.xml：打开状态下，绿色的底图。

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.     <!-- 高度40 -->  
5.     <size android:height="30dp"/>  
6.     <!-- 圆角弧度 20 -->  
7.     <corners android:radius="15dp"/>  
8.     <!-- 变化率 -->  
9.     <gradient  
10.         android:endColor="#33da33"  
11.         android:startColor="#33da33" />  
12.   
13.   
14.   
15. </shape>  

选择器 track.xml   用于控制Switch不同状态下，滑动条的底图

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!-- 底层下滑条的样式选择器，可控制Switch在不同状态下，底下下滑条的颜色 -->  
3. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
4. <item android:state_checked="true"  android:drawable="@drawable/green_track" />  
5. <item                               android:drawable="@drawable/gray_track" />  
6.   
7. </selector>  

2. 滑动按钮：底色我用的接近白色的淡灰色，打开时，边上的一圈线条为灰色，关闭时，边上的一圈线条为绿色

实现方式和底部滑动一致

gray_thumb.xml  :关闭状态，按钮边上一圈颜色为深灰色

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="rectangle" >  
4.   
5.     <!-- 高度40 -->  
6.     <size android:height="40dp" android:width="40dp"/>  
7.     <!-- 圆角弧度 20 -->  
8.     <corners android:radius="20dp"/>  
9.       
10.       
11.     <!-- 变化率 -->  
12.     <gradient  
13.         android:endColor="#eeeeee"  
14.         android:startColor="#eeeeee" />  
15.       
16.     <stroke android:width="1dp"  
17.         android:color="#666666"/>  
18.   
19. </shape>  

green_thumb.xml : 打开状态，按钮边上一圈的颜色为绿色

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="rectangle" >  
4.   
5.     <!-- 高度40 -->  
6.     <size android:height="40dp" android:width="40dp"/>  
7.     <!-- 圆角弧度 20 -->  
8.     <corners android:radius="20dp"/>  
9.       
10.       
11.     <!-- 变化率 -->  
12.     <gradient  
13.         android:endColor="#eeeeee"  
14.         android:startColor="#eeeeee" />  
15.       
16.     <stroke android:width="1dp"  
17.         android:color="#33da33"/>  
18.   
19. </shape>  

选择器 thumb.xml   用于控制Switch不同状态下，按钮的显示状态

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!-- 按钮的选择器，可以设置按钮在不同状态下的时候，按钮不同的颜色 -->  
3. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
4.       
5. <item android:state_checked="true"  android:drawable="@drawable/green_thumb" />  
6. <item                               android:drawable="@drawable/gray_thumb" />  
7. </selector>  

3. 将以上选择器设置给Switch，就好了

界面  activity_main.xml

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <Switch  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:switchMinWidth="20dp"  
11.         android:textOn="  "  
12.         android:textOff="  "  
13.         android:thumb="@drawable/thumb"  
14.         android:track="@drawable/track" />  
15.       
16.     <!-- 用于对比使用的不设置任何属性的Switch -->  
17.     <Switch   
18.         android:layout_width="wrap_content"  
19.         android:layout_height="wrap_content"  
20.         />  
21.   
22. </LinearLayout>  

4.高度，宽度的设置

细心的同学会发现，修改  android:layout_width  ， android:layout_height  这两个属性，并不会实际修改Switch的大小

设置大了，边上会出现空白部分，设置小了，Switch显示不全。

实际设置高度方法：

上面定义滑动条和按钮底图的地方相信大家都注意到，   <size android:height="30dp"/>  这行代码，

修改  green_track.xml,gray_track.xml  中的高度，即可修改高度（修改green_thumb.xml  gray_thumb.xml  中的高度貌似无效）。

实际修改宽度的方法：

（1）修改滑动按钮的宽度：滑动按钮的宽度和按钮上的文字有关，

想要按钮变长，在按钮显示的文字上添加几个空字符串即可，想要按钮变短的话，减少按钮上显示的字即可（修改按钮上字体大小也可以试试）

Switch的属性

        android:textOn="  "
        android:textOff="  "

（2）修改按钮  打开，关闭  两种状态之间滑动距离（貌似小到一定程度，再改小就无效了）

Switch的属性

android:switchMinWidth="20dp"