Switch是Android組件之一，它本質(zhì)上是一個(gè)按鈕。在很多項(xiàng)目上都會(huì)用到這個(gè)組件實(shí)現(xiàn)仿IOS開關(guān)的效果。
那么IOS的開關(guān)效果是什么樣子的呢？
如圖所示：
【第一步】 嘗試給Switch添加背景圖來實(shí)現(xiàn)IOS開關(guān)效果
準(zhǔn)備好兩張圖片，并且給Switch添加背景，代碼如下：
<Switch
android:id="@+id/switch_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/swich_bg"
android:text="開關(guān)" />
<?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>
效果如下：
然而，效果并不是想象中的那樣，那么得出結(jié)論：直接設(shè)置背景，并不能修改Switch原本的樣子。
Switch有兩個(gè)重要的屬性：thumb和track，thumb是Switch中間圓的背景，track是Switch底部長(zhǎng)條背景，使用代碼繪制這兩個(gè)圖形，效果如下：（文字比較礙事，先去掉）
代碼實(shí)現(xiàn)如下：
<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" >
<!--設(shè)置圓的半徑-->
<size android:height="50dp" android:width="50dp"/>
<!--設(shè)置圓空心部分的背景色 -->
<solid android:color="#eeeeee"/>
<!--設(shè)置圓邊的背景色-->
<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" >
<!--設(shè)置圓的半徑-->
<size android:height="50dp" android:width="50dp"/>
<!--設(shè)置圓空心部分的背景色 -->
<solid android:color="#eeeeee"/>
<!--設(shè)置圓邊的背景色-->
<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" >
<!--設(shè)置圓角矩形的高-->
<size android:height="50dp"/>
<!--設(shè)置圓角矩形的圓角半徑-->
<corners android:radius="25dp"/>
<solid android:color="#33da33"/>
<!--設(shè)置圓邊的背景色-->
<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" >
<!--設(shè)置圓角矩形的高-->
<size android:height="50dp"/>
<!--設(shè)置圓角矩形的圓角半徑-->
<corners android:radius="25dp"/>
<solid android:color="#eeeeee"/>
<!--設(shè)置圓邊的背景色-->
<stroke
android:width="1dp"
android:color="#CCCECC"/>
</shape>
以上最重要的兩個(gè)屬性已經(jīng)演示完畢，接下來說一下其它屬性吧：
- textOff、textOn、showText
textOff：設(shè)置關(guān)閉狀態(tài)文本
textOn：設(shè)置打開狀態(tài)文本
showText：這個(gè)屬性默認(rèn)為false，只有將這個(gè)屬性設(shè)置為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="關(guān)燈"
android:textOn="開燈"
android:showText="true" />
效果如下：
當(dāng)然，為了更為美觀，或者為了模仿IOS，一般這里不設(shè)置狀態(tài)文本。
- switchMinWidth
設(shè)置開關(guān)的最小寬度
- switchPadding
設(shè)置開關(guān)燈的padding
- splitTrack
設(shè)置光學(xué)邊界，這個(gè)值默認(rèn)為false，如果設(shè)置了光學(xué)邊界之后，thumb和track之間會(huì)有光學(xué)邊界效果，如圖：
剩下的屬性基本用不到了，就此省略。
[本章完...]
