Android UI之switch的thumb與track屬性定製自己的switch
阿新 • • 發佈:2019-02-03
轉自:http://blog.csdn.net/u012585142/article/details/50756872
今天發現需要使用控制元件switch,但是需要自定義switch的樣式,通過查閱資料,發現可以通過定義switch的thumb和track的圖片來達到自定義switch樣式的目的.現把相關的步驟記錄下來,以備查閱。
其中1為所需樣式,2為系統自定義樣式
1、建立thumb(即來回滑動的滑動塊)利用XML來定義一個drawable檔案,命名為switch_thumb
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <size android:width="25dp" android:height="25dp"> </size> <!-- 填充的顏色:這裡設定滑動塊為白色 --> <solid android:color="@color/white" /> <!--<solid android:color="@color/theme_color" />--> ****<!-- 邊框的顏色 :因為需要顯示一點點背景色,所以設定了一個透明邊框 -->** <stroke android:width="2dp" android:color="@android:color/transparent" />** <!--<corners android:radius="2dip" />--> <corners android:radius="2dip" /> </shape>
2、track屬性又該如何設定呢?
問題在於開啟switch與關閉switch,switch的下面的滑道應該是不同的顏色,我們想到了可以用drawable的selector標籤,利用switch的不同狀態,來載入不同的drawable檔案。我們檢視官方switch文件,發現其有
void setChecked(boolean checked) Changes the checked state of this button.
這樣一個方法,所以我們可以利用其state_checked狀態,依據不同的狀態來選擇載入不同的drawable檔案
1):首先,我們定義一個drawable檔案:switch_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="@color/colorPrimary">
</solid>
<corners android:radius="2dip" />
</shape>
2):再定義一個drawable檔案:switch_track_off.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--<size-->
<!--android:width="60dp"-->
<!--android:height="35dp">-->
<!--</size>-->
<solid
android:color="@android:color/darker_gray">
</solid>
<corners android:radius="2dip" />
</shape>
3):然後定義drawable檔案:switch_track.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="@drawable/switch_track_on"></item>
<item
android:state_checked="false"
android:drawable="@drawable/switch_track_off"></item>
</selector>
最後在佈局檔案
<Switch
android:id="@+id/switch_autoupdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="@drawable/switch_thumb"
android:track="@drawable/switch_track"/>