Android 自定義Switch開關按鈕的樣式

weixin_34393428發表於2018-01-25
Android

Android 自定義Switch開關按鈕的樣式

2.1 原生樣式

首先看下原生的效果（Android 7.1）：

原生效果

佈局檔案如下:

<Switch
    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"
複製程式碼

相關文章