封面
1.寫在前面
本文主要講的是在Android原生Switch控件的基礎上進行樣式自定義，內容很簡單，但是在實現的過程中還是遇到了一些問題，在此記錄下來，希望對大家能夠有所幫助，看下效果圖：
自定義樣式
2.自定義樣式
2.1 原生樣式
首先看下原生的效果（Android 7.1）：
原生效果
布局文件如下:
<Switch android/112960.html">android:layout_width="wrap_content" android:layout_height="wrap_content" />
2.2 自定義樣式
設計給的效果圖大多數都不會使用原生效果，所以我們需要對樣式進行自定義，比如下面這種效果：
自定義效果
定義Switch的開關按鈕狀態：
開啟狀態：switch_custom_thumb_on.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#94C5FF" /> <size android:width="20dp" android:height="20dp" /></shape>
關閉狀態：switch_custom_thumb_off.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#AAA" /> <size android:width="20dp" android:height="20dp" /></shape>
定義一個selector：switch_custom_thumb_selector.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/switch_custom_thumb_on" android:state_checked="true" /> <item android:drawable="@drawable/switch_custom_thumb_off" android:state_checked="false" /></selector>
到此Switch的開關按鈕狀態就定義好了，接下來定義一下Switch滑動軌道的狀態：
開啟狀態：switch_custom_track_on.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#B6D6FE" /> <stroke android:width="5dp" android:color="#00000000" /> <corners android:radius="20dp" /></shape>
關閉狀態：switch_custom_track_off.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#E3E3E3" /> <stroke android:width="5dp" android:color="#00000000" /> <corners android:radius="20dp" /></shape>
定義一個selector：switch_custom_track_selector.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/switch_custom_track_on" android:state_checked="true" /> <item android:drawable="@drawable/switch_custom_track_off" android:state_checked="false" /></selector>
Switch自定義樣式，默認情況下開關按鈕和滑動軌道的高度是一樣的，并且在xml文件中對軌道的寬高設置是無效的，如果想要修改軌道的高度可以這樣做：
軌道高度低于開關按鈕高度（效果中的第一個效果）：軌道增加一個透明的邊框
軌道高度高于開關按鈕高度（效果中的第二個效果）：開關按鈕增加一個透明的邊框
軌道的寬度會隨著開關按鈕的寬度自動變化，如果想要修改軌道的寬度，修改開關按鈕的寬度就可以了。
設置自定義樣式
thumb是開關按鈕的屬性，track是滑動軌道的屬性，只需要把上面的兩個selector文件設置進去就大功告成了。
<Switch android:layout_width="wrap_content" android:layout_height="wrap_content" android:thumb="@drawable/switch_custom_thumb_selector" android:track="@drawable/switch_custom_track_selector" />
3.更多屬性
如果想要在開關按鈕上顯示文字怎么辦，textOn和textOff屬性可以分別設置開啟和關閉的文字，別忘了將showText屬性設置為true，這樣才能顯示出來：
<Switch android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="30dp" android:showText="true" android:switchTextAppearance="@style/SwitchTheme" android:textOff="OFF" android:textOn="ON" android:thumb="@drawable/switch_rectangle_thumb_selector" android:track="@drawable/switch_rectangle_track" />
顯示文字還不夠，還需要修改文字的顏色：
在res文件夾下建一個color文件夾，定義一個文本顏色狀態的selector：switch_text_selector.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#FFF" android:state_checked="false" /> <item android:color="#000" android:state_checked="true" /></selector>
然后在style文件中定義一個樣式：
<style name="SwitchTheme" parent="@android:style/TextAppearance.Small"> <item name="android:textColor">@color/switch_text_selector</item></style>
最后在Switch中設置一下就可以了：
android:switchTextAppearance="@style/SwitchTheme"
4.寫在最后
本文只講了效果圖中第一種樣式的實現方法，更多樣式可以在GitHub上進行下載查看，如有疑問，可以給我留言。
總結
以上所述是小編給大家介紹的Android 自定義Switch開關按鈕的樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！
新聞熱點
疑難解答
