《Android》『Selector』- 利用 Selector 資源檔設置按鈕在不同狀態下的背景圖片

2015.11.25 / Android 工作筆記, 常用介面佈局 & 資源檔

《簡單介紹》

Selector又稱作 State List，顧名思義，他是一份列出了各種狀態的表單，在 Android 中，我們利用這個表單來定義一個介面元件在不同狀態使用的圖形或顏色，而這個表單，就叫做 Selector 資源檔。

《宣告 & 使用方式》

Selector 其實是一個 .xml 格式的 drawable 資源檔，我們可以在 Selector 裡面定義不同的狀態所要使用的背景圖片與顏色，定義完成後，再將它指定給介面元件(透過設定android:background)，設定完成後，該介面元件就會依照 Selector 資源檔裡面的設定，在不同使用者操作狀態下，改變介面元件的外觀。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_pressed="true" //true表示元件被按下時套用，false表示元件未被按下時套用
          android:drawable="@drawable/pressed" />
     
     <item android:state_focused="true" //true表示元件正被操作時套用，false表示元件未被操作時套用
          android:drawable="@drawable/focused" />
     
     <item android:state_selected="true" //true表示元件被選定時套用，false表示元件未被選定時套用
          android:drawable="@drawable/selected" />
     
     <item android:state_checkable="true" //true表示元件項目能被勾選時套用，false表示元件項目不能被勾選時套用
          android:drawable="@drawable/checkable" />
    
     <item android:state_checked="true" //true表示元件項目被勾選時套用，false表示元件項目未被勾選時套用
          android:drawable="@drawable/checked" />
     
     <item android:state_enabled="true" //true表示元件可以使用時套用，false表示元件不可使用時套用
          android:drawable="@drawable/enabled" />
     
     <item android:state_activated="true" //true表示元件在作用中時套用，false表示元件不在作用中時套用
          android:drawable="@drawable/activated" />
     
     <item android:state_hovered="true" //API Lv 14 之後可用，等同 android:state_focused
          android:drawable="@drawable/hovered" />
     
     <item android:state_window_focused="true" //true表示當程式正在操作時套用，false表示當程式不在操作時套用
          android:drawable="@drawable/window_focused" />
     
     <item android:drawable="@drawable/normal" /> //預設值
</selector>

<?xml version="1.0" encoding="utf-8"?>

<item android:state_pressed="true" //true表示元件被按下時套用，false表示元件未被按下時套用

android:drawable="@drawable/pressed" />

<item android:state_focused="true" //true表示元件正被操作時套用，false表示元件未被操作時套用

android:drawable="@drawable/focused" />

<item android:state_selected="true" //true表示元件被選定時套用，false表示元件未被選定時套用

android:drawable="@drawable/selected" />

<item android:state_checkable="true" //true表示元件項目能被勾選時套用，false表示元件項目不能被勾選時套用

android:drawable="@drawable/checkable" />

<item android:state_checked="true" //true表示元件項目被勾選時套用，false表示元件項目未被勾選時套用

android:drawable="@drawable/checked" />

<item android:state_enabled="true" //true表示元件可以使用時套用，false表示元件不可使用時套用

android:drawable="@drawable/enabled" />

<item android:state_activated="true" //true表示元件在作用中時套用，false表示元件不在作用中時套用

android:drawable="@drawable/activated" />

<item android:state_hovered="true" //API Lv 14 之後可用，等同 android:state_focused

android:drawable="@drawable/hovered" />

<item android:state_window_focused="true" //true表示當程式正在操作時套用，false表示當程式不在操作時套用

android:drawable="@drawable/window_focused" />

<item android:drawable="@drawable/normal" /> //預設值

</selector>

selector.xml

在定義 selector 資源檔時，我們可以透過<item> 標籤定義不同狀態下所使用的圖片，不一定要全部設定，取所需的狀態設定即可。

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/txt"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/selector" /> //設定好 selecotr 資源檔

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/txt"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/selector" /> //設定好 selecotr 資源檔

為介面元件設定 selector 資源檔

在 drawable 資料夾中宣告一個自訂的資源檔 selector.xml (名稱可自訂)，接著在要使用它的介面元件中，將其設為 background 即可。如此一來，android 系統就會根據 selector.xml 中的設定，改變在不同狀態時改變介面元件的圖形。

賽肥膩膩の娛樂生活誌

《Android》『Selector』- 利用 Selector 資源檔設置按鈕在不同狀態下的背景圖片

賽肥膩膩

上 / 下一篇文章

上一篇文章《Android》『Style & Theme』- Style 與 Theme 的使用方式與差異

下一篇文章《食記》『多加精緻早午餐』- 台北市捷運台北101/世貿站莊敬路 (北醫附近)

您可能也喜歡 You may also like

臉書留言

一般留言

發佈留言取消回覆