Android樣式的開發:selector篇

發表於2015-11-26

Android專案重構之路:架構篇

Android專案重構之路:介面篇

Android專案重構之路:實現篇

Android技術積累:開發規範

Android樣式的開發:shape篇

上一篇詳細講了shape的用法,講解了怎麼用shape自定義矩形、圓形、線形和環形,以及有哪些需要注意的地方。不過,shape只能定義單一的形狀,而實際應用中,很多地方比如按鈕、Tab、ListItem等都是不同狀態有不同的展示形狀。舉個例子,一個按鈕的背景,預設時是一個形狀,按下時是一個形狀,不可操作時又是另一個形狀。有時候,不同狀態下改變的不只是背景、圖片等,文字顏色也會相應改變。而要處理這些不同狀態下展示什麼的問題,就要用selector來實現了。

selector標籤,可以新增一個或多個item子標籤,而相應的狀態是在item標籤中定義的。定義的xml檔案可以作為兩種資源使用:drawable和color。作為drawable資源使用時,一般和shape一樣放於drawable目錄下,item必須指定android:drawable屬性;作為color資源使用時,則放於color目錄下,item必須指定android:color屬性。

那麼,看看都有哪些狀態可以設定呢:

  • android:state_enabled: 設定觸控或點選事件是否可用狀態,一般只在false時設定該屬性,表示不可用狀態
  • android:state_pressed: 設定是否按壓狀態,一般在true時設定該屬性,表示已按壓狀態,預設為false
  • android:state_selected: 設定是否選中狀態,true表示已選中,false表示未選中
  • android:state_checked: 設定是否勾選狀態,主要用於CheckBox和RadioButton,true表示已被勾選,false表示未被勾選
  • android:state_checkable: 設定勾選是否可用狀態,類似state_enabled,只是state_enabled會影響觸控或點選事件,而state_checkable影響勾選事件
  • android:state_focused: 設定是否獲得焦點狀態,true表示獲得焦點,預設為false,表示未獲得焦點
  • android:state_window_focused: 設定當前視窗是否獲得焦點狀態,true表示獲得焦點,false表示未獲得焦點,例如拉下通知欄或彈出對話方塊時,當前介面就會失去焦點;另外,ListView的ListItem獲得焦點時也會觸發true狀態,可以理解為當前視窗就是ListItem本身
  • android:state_activated: 設定是否被啟用狀態,true表示被啟用,false表示未啟用,API Level 11及以上才支援,可通過程式碼呼叫控制元件的setActivated(boolean)方法設定是否啟用該控制元件
  • android:state_hovered: 設定是否滑鼠在上面滑動的狀態,true表示滑鼠在上面滑動,預設為false,API Level 14及以上才支援

接下來,看看示例程式碼,以下是bg_btn_selector.xml的程式碼,用於按鈕的背景:

而下面則是text_btn_selector.xml的程式碼,用於按鈕的文字顏色:

最後,則是在控制元件中的引用:

那麼,在使用過程中,有幾點還是需要注意和了解的:

  1. selector作為drawable資源時,item指定android:drawable屬性,並放於drawable目錄下;
  2. selector作為color資源時,item指定android:color屬性,並放於color目錄下;
  3. color資源也可以放於drawable目錄,引用時則用@drawable來引用,但不推薦這麼做,drawable資源和color資源最好還是分開;
  4. android:drawable屬性除了引用@drawable資源,也可以引用@color顏色值;但android:color只能引用@color
  5. item是從上往下匹配的,如果匹配到一個item那它就將採用這個item,而不是採用最佳匹配的規則;所以設定預設的狀態,一定要寫在最後,如果寫在前面,則後面所有的item都不會起作用了。

另外,selector標籤下有兩個比較有用的屬性要說一下,新增了下面兩個屬性之後,則會在狀態改變時出現淡入淡出效果,但必須在API Level 11及以上才支援:

  • android:enterFadeDuration 狀態改變時,新狀態展示時的淡入時間,以毫秒為單位
  • android:exitFadeDuration 狀態改變時,舊狀態消失時的淡出時間,以毫秒為單位

最後,關於ListView的ListItem樣式,有兩種設定方式,一種是在ListView標籤裡設定android:listSelector屬性,另一種是在ListItem的佈局layout裡設定android:background。但是,這兩種設定的結果卻有著不同。同時,使用ListView時也有些其他需要注意的地方,總結如下:

  1. android:listSelector設定的ListItem預設背景是透明的,不管你在selector裡怎麼設定都無法改變它的背景。所以,如果想改ListItem的預設背景,只能通過第二種方式,在ListItem的佈局layout裡設定android:background
  2. 當觸控點選ListItem時,第一種設定方式下,state_pressedstate_focusedstate_window_focused設為true時都會觸發,而第二種設定方式下,只有state_pressed會觸發。
  3. 當ListItem裡有Button或CheckBox之類的控制元件時,會搶佔ListItem本身的焦點,導致ListItem本身的觸控點選事件會無效。那麼,要解決此問題,有三種解決方案:
    • 將Button或CheckBox換成TextView或ImageView之類的控制元件
    • 設定Button或CheckBox之類的控制元件設定focusable屬性為false
    • 設定ListItem的根佈局屬性android:descendantFocusability=”blocksDescendants”

    第三種是最方便,也是推薦的方式,它會將ListItem根佈局下的所有子控制元件都設定為不能獲取焦點。android:descendantFocusability屬性的值有三種,其中,ViewGroup是指設定該屬性的View,本例中就是ListItem的根佈局:

    • beforeDescendants:ViewGroup會優先其子類控制元件而獲取到焦點
    • afterDescendants:ViewGroup只有當其子類控制元件不需要獲取焦點時才獲取焦點
    • blocksDescendants:ViewGroup會覆蓋子類控制元件而直接獲得焦點

結尾

selector篇就講到這裡了,示例程式碼也已經更新放上github,地址:
https://github.com/keeganlee/kstyle.git

相關文章