Switch是Android组件之一，它本质上是一个按钮。在很多项目上都会用到这个组件实现仿IOS开关的效果。
那么IOS的开关效果是什么样子的呢？
如图所示：
157.gif
【第一步】 尝试给Switch添加背景图来实现IOS开关效果
准备好两张图片，并且给Switch添加背景，代码如下：
<Switch
android:id="@+id/switch_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/swich_bg"
android:text="开关" />
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/open" android:state_checked="true"></item>
<item android:drawable="@mipmap/close" android:state_checked="false"></item>
</selector>
效果如下：
156.gif
然而，效果并不是想象中的那样，那么得出结论：直接设置背景，并不能修改Switch原本的样子。
Switch有两个重要的属性：thumb和track，thumb是Switch中间圆的背景，track是Switch底部长条背景，使用代码绘制这两个图形，效果如下：（文字比较碍事，先去掉）
157.gif
代码实现如下：
<Switch
android:id="@+id/switch_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="@drawable/thumb_bg"
android:track="@drawable/track_bg" />
thumb_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/thumb_open" android:state_checked="true" />
<item android:drawable="@drawable/thumb_close" />
</selector>
thumb_open.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<!--设置圆的半径-->
<size android:height="50dp" android:width="50dp"/>
<!--设置圆空心部分的背景色 -->
<solid android:color="#eeeeee"/>
<!--设置圆边的背景色-->
<stroke
android:width="1dp"
android:color="#33da33"/>
</shape>
thumb_close.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<!--设置圆的半径-->
<size android:height="50dp" android:width="50dp"/>
<!--设置圆空心部分的背景色 -->
<solid android:color="#eeeeee"/>
<!--设置圆边的背景色-->
<stroke
android:width="1dp"
android:color="#CCCECC"/>
</shape>
track_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/track_open" android:state_checked="true" />
<item android:drawable="@drawable/track_close" />
</selector>
track_open.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!--设置圆角矩形的高-->
<size android:height="50dp"/>
<!--设置圆角矩形的圆角半径-->
<corners android:radius="25dp"/>
<solid android:color="#33da33"/>
<!--设置圆边的背景色-->
<stroke
android:width="1dp"
android:color="#33da33"/>
</shape>
track_close.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!--设置圆角矩形的高-->
<size android:height="50dp"/>
<!--设置圆角矩形的圆角半径-->
<corners android:radius="25dp"/>
<solid android:color="#eeeeee"/>
<!--设置圆边的背景色-->
<stroke
android:width="1dp"
android:color="#CCCECC"/>
</shape>
以上最重要的两个属性已经演示完毕，接下来说一下其它属性吧：
- textOff、textOn、showText
textOff：设置关闭状态文本
textOn：设置打开状态文本
showText：这个属性默认为false，只有将这个属性设置为true才能显示textOff和textOn
代码如下：
<Switch
android:id="@+id/switch_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="@drawable/thumb_bg"
android:track="@drawable/track_bg"
android:textOff="关灯"
android:textOn="开灯"
android:showText="true" />
效果如下：
158.gif
当然，为了更为美观，或者为了模仿IOS，一般这里不设置状态文本。
- switchMinWidth
设置开关的最小宽度
- switchPadding
设置开关灯的padding
- splitTrack
设置光学边界，这个值默认为false，如果设置了光学边界之后，thumb和track之间会有光学边界效果，如图：
159.gif
剩下的属性基本用不到了，就此省略。
[本章完...]
