1.寫在前面
本文主要講的是在Android原生Switch控件的基礎(chǔ)上進(jìn)行樣式自定義贰锁,內(nèi)容很簡單,但是在實現(xiàn)的過程中還是遇到了一些問題,在此記錄下來,希望對大家能夠有所幫助麻顶,看下效果圖:
2.自定義樣式
2.1 原生樣式
首先看下原生的效果(Android 7.1):
布局文件如下:
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
2.2 自定義樣式
設(shè)計給的效果圖大多數(shù)都不會使用原生效果,所以我們需要對樣式進(jìn)行自定義刚夺,比如下面這種效果:
定義Switch的開關(guān)按鈕狀態(tài):
開啟狀態(tài):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>
關(guān)閉狀態(tài):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的開關(guān)按鈕狀態(tài)就定義好了钥屈,接下來定義一下Switch滑動軌道的狀態(tài):
開啟狀態(tài):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>
關(guān)閉狀態(tài):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自定義樣式,默認(rèn)情況下開關(guān)按鈕和滑動軌道的高度是一樣的厕氨,并且在xml文件中對軌道的寬高設(shè)置是無效的进每,如果想要修改軌道的高度可以這樣做:
軌道高度低于開關(guān)按鈕高度(效果中的第一個效果):軌道增加一個透明的邊框
軌道高度高于開關(guān)按鈕高度(效果中的第二個效果):開關(guān)按鈕增加一個透明的邊框
軌道的寬度會隨著開關(guān)按鈕的寬度自動變化,如果想要修改軌道的寬度命斧,修改開關(guān)按鈕的寬度就可以了田晚。
設(shè)置自定義樣式
thumb是開關(guān)按鈕的屬性,track是滑動軌道的屬性冯丙,只需要把上面的兩個selector文件設(shè)置進(jìn)去就大功告成了肉瓦。
<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.更多屬性
如果想要在開關(guān)按鈕上顯示文字怎么辦,textOn和textOff屬性可以分別設(shè)置開啟和關(guān)閉的文字胃惜,別忘了將showText屬性設(shè)置為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文件夾船殉,定義一個文本顏色狀態(tài)的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中設(shè)置一下就可以了:
android:switchTextAppearance="@style/SwitchTheme"
4.寫在最后
本文只講了效果圖中第一種樣式的實現(xiàn)方法鲫趁,更多樣式可以在GitHub上進(jìn)行下載查看,如有疑問利虫,可以給我留言挨厚。