自定義View之Switch

摘要： 今天我們來聊一下自定義Switch控制元件，我們先看一看Switch的相關屬性： 1.Switch相關屬性 android:splitTrack：是否設定間隙讓滑塊與底部圖片分隔開來 android:switchMinWidth：設定開關的最小寬度 android:...

今天我們來聊一下自定義Switch控制元件，我們先看一看Switch的相關屬性：

1.Switch相關屬性

• android:splitTrack：是否設定間隙讓滑塊與底部圖片分隔開來
• android:switchMinWidth：設定開關的最小寬度
• android:switchPadding：設定滑塊內文字的間隔
• android:switchTextAppearance：設定開關的文字外觀
• android:textOff：按鈕沒有被選中時顯示的文字
• android:textOn：按鈕被選中時顯示的文字
• android:showText：設定on/off的時候是否顯示文字,如果不顯示則textOn，textOff不起作用
• android:textStyle：文字風格，粗體，斜體
• android:track：滑塊底部的背景圖片，類似Background效果
• android:thumb：滑塊的圖片

2.Switch普通效果展示及監聽

2.1普通效果展示

程式碼：

效果:

那我們加入thumb和track屬性看看效果，為了方便我們都用專案自帶的機器人。效果如下：

程式碼：

效果:

不得不說真心醜，看來還得自定義。

2.2監聽

3.Switch的自定義

自定義Switch的步驟如下：

• 定義Switch的開關按鈕狀態
• 定義一下Switch滑動軌道的狀
• 自定義文字顏色
• 應用效果展示

3.1定義Switch的開關按鈕狀態

我們先定義thumb這個屬性值，它有開關兩種狀態

• 我們先定義開啟的thumb的xml檔案叫switch_custom_thumb_on

  

  image.png

• 關閉thumb的xml的檔案叫switch_custom_thumb_off

  

  image.png

• 定義一個selector：switch_custom_thumb_selector

  

  image.png

3.2 Switch滑動軌道的狀態

定義track這個屬性值，它也有開啟和關閉兩種狀態

• 開啟狀態的track：switch_custom_track_on

  

  image.png

• 關閉狀態的track: switch_custom_track_off

  

  image.png

• 定義一個selector：switch_custom_track_selector

  

  image.png

補充：

thumb和track預設大小是一致的，那如果我們想看起來thumb比tarck或者thumb比track小該怎麼辦呢？

• 想track高度低於thumb高度就給track增加一個透明的邊框。
• 想track高度高於thumb按鈕高度就給thumb按鈕增加一個透明的邊框。

3.3 定義Switch文字的顏色

定義switchTextAppearance這個屬性值

• 定義一個文字顏色狀態的selector：switch_switchtextcolor_selector.xml

• 在style檔案中定義一個樣式叫 SwitchTextColorTheme的樣式

  

  image.png

3.3 定義Switch效果展示

程式碼：

效果：

基本也就這麼多，告辭！