Android 自定義Switch開(kāi)關(guān)按鈕的樣式實(shí)例詳解
封面
1.寫(xiě)在前面
本文主要講的是在Android原生Switch控件的基礎(chǔ)上進(jìn)行樣式自定義，內(nèi)容很簡(jiǎn)單，但是在實(shí)現(xiàn)的過(guò)程中還是遇到了一些問(wèn)題，在此記錄下來(lái)，希望對(duì)大家能夠有所幫助，看下效果圖：
自定義樣式
2.自定義樣式
2.1 原生樣式
首先看下原生的效果（Android 7.1）：
原生效果
布局文件如下:
<Switch android:layout_width="wrap_content" android:layout_height="wrap_content" />
2.2 自定義樣式
設(shè)計(jì)給的效果圖大多數(shù)都不會(huì)使用原生效果，所以我們需要對(duì)樣式進(jìn)行自定義，比如下面這種效果：
自定義效果
定義Switch的開(kāi)關(guān)按鈕狀態(tài)：
開(kā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>
定義一個(gè)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的開(kāi)關(guān)按鈕狀態(tài)就定義好了，接下來(lái)定義一下Switch滑動(dòng)軌道的狀態(tài)：
開(kā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>
定義一個(gè)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)情況下開(kāi)關(guān)按鈕和滑動(dòng)軌道的高度是一樣的，并且在xml文件中對(duì)軌道的寬高設(shè)置是無(wú)效的，如果想要修改軌道的高度可以這樣做：
軌道高度低于開(kāi)關(guān)按鈕高度（效果中的第一個(gè)效果）：軌道增加一個(gè)透明的邊框
軌道高度高于開(kāi)關(guān)按鈕高度（效果中的第二個(gè)效果）：開(kāi)關(guān)按鈕增加一個(gè)透明的邊框
軌道的寬度會(huì)隨著開(kāi)關(guān)按鈕的寬度自動(dòng)變化，如果想要修改軌道的寬度，修改開(kāi)關(guān)按鈕的寬度就可以了。
設(shè)置自定義樣式
thumb是開(kāi)關(guān)按鈕的屬性，track是滑動(dòng)軌道的屬性，只需要把上面的兩個(gè)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.更多屬性
如果想要在開(kāi)關(guān)按鈕上顯示文字怎么辦，textOn和textOff屬性可以分別設(shè)置開(kāi)啟和關(guān)閉的文字，別忘了將showText屬性設(shè)置為true，這樣才能顯示出來(lái)：
<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文件夾下建一個(gè)color文件夾，定義一個(gè)文本顏色狀態(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文件中定義一個(gè)樣式：
<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ě)在最后
本文只講了效果圖中第一種樣式的實(shí)現(xiàn)方法，更多樣式可以在GitHub上進(jìn)行下載查看，如有疑問(wèn)，可以給我留言。
總結(jié)
以上所述是小編給大家介紹的Android 自定義Switch開(kāi)關(guān)按鈕的樣式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
kotlin Standard中的內(nèi)聯(lián)函數(shù)示例詳解
這篇文章主要給大家介紹了關(guān)于kotlin Standard中內(nèi)聯(lián)函數(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用kotlin具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了android自定義進(jìn)度條漸變圓形，需要的朋友可以來(lái)參考下2015-08-08
Android中PathMeasure仿支付寶支付動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Android中PathMeasure仿支付寶支付動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Android實(shí)現(xiàn)美團(tuán)外賣底部導(dǎo)航欄動(dòng)畫(huà)
這篇文章主要介紹了Android實(shí)現(xiàn)美團(tuán)外賣底部導(dǎo)航欄動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
本文主要介紹了Android實(shí)現(xiàn)弧形菜單效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
Android Studio下載更新Android SDK網(wǎng)絡(luò)異?；驘o(wú)法下載
這篇文章主要介紹了Android Studio下載更新Android SDK網(wǎng)絡(luò)異?；驘o(wú)法下載的相關(guān)資料,需要的朋友可以參考下2017-04-04
注解是我們經(jīng)常接觸的技術(shù),Java有注解,Android也有注解,本文將試圖介紹Android中的注解,以及ButterKnife和Otto這些基于注解的庫(kù)的一些工作原理.下面一起來(lái)看看。2016-08-08
Android截取指定View為圖片的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Android截取指定View為圖片的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Android Flutter基于WebSocket實(shí)現(xiàn)即時(shí)通訊功能
WebSocket是一種在單個(gè)TCP連接上進(jìn)行全雙工通信的協(xié)議。本文將利用Flutter WebSocket實(shí)現(xiàn)即時(shí)通訊功能，文中示例代碼講解詳細(xì)，感興趣的可以了解一下2022-03-03
在Android上創(chuàng)建去耦以及容易測(cè)試代碼的幾乎每位遲早都要訴諸Dagger，在Kotlin中設(shè)置Dagger有一些不同，所以下面這篇文章主要給大家介紹了關(guān)于Kotlin中使用Dagger2可能遇到的坑的解決方法，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11