1. 程式人生 > >Android UI之switch的thumb與track屬性定製自己的switch

Android UI之switch的thumb與track屬性定製自己的switch

轉自: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"/>