Android中selector的使用

標籤：tool   xmlns   oval   val   方式   activate   item   控制   div   

第一種方法（強烈推薦）

方法：selector做遮罩，原圖做background。

我們做按鈕的時候經常需要用兩個圖片來實現按鈕點擊和普通狀態的樣式，這就需要提供兩種圖片，而且每個解析度下還有多套圖片，大大增加了apk的大小。

我們希望讓這兩張圖片合二為一，而且還能實現兩種或者多種狀態，怎麼做呢？我們首先建立一個圓形的selector，正常情況下是完全透明的，按下後透明度變小。

normal_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true">        <shape android:shape="oval">            <solid android:color="#21000000" />        </shape>    </item>    <item>        <shape android:shape="oval">            <solid android:color="#00000000" />        </shape>    </item></selector>

然後只需要問美工拿一張圖片就好了，比如這張：

關鍵的一步來了，現在我們需要把selector檔案當作遮罩，然後用上面的藍色icon作為bg，放到一個ImageButton中：

<ImageButton        android:layout_width="100dp"        android:layout_height="100dp"               android:src="@drawable/normal_bg_selector"        android:background="@drawable/blue_btn_icon"             />

最後只需要調整下padding就好了，如果你需要矩形的圖片，就按照上面的方法建立一個矩形的遮罩即可。如果你們公司用的圓角矩形，直接問設計師要個圓角的標準就行，再建立一個selector檔案吧。下面是最簡單的原型和矩形的遮罩檔案：

normal_oval_mask_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true">        <shape android:shape="oval">            <solid android:color="#21000000" />        </shape>    </item>    <item>        <shape android:shape="oval">            <solid android:color="#00000000" />        </shape>    </item></selector>

normal_rectangle_mask_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true">        <shape android:shape="rectangle">            <solid android:color="#21000000" />        </shape>    </item>    <item>        <shape android:shape="rectangle">            <solid android:color="#00000000" />        </shape>    </item></selector>

 

第二種方法（不推薦）

當然我們還有另一種方法來實現這個效果，用的是layer-list。先放一個selector做的遮罩，然後在遮罩下面疊加一個button的icon。這樣就做好button按下後的樣式。

blue_btn_selector_layerlist.xml

<?xml version="1.0" encoding="utf-8"?><layer-list   xmlns:android="http://schemas.android.com/apk/res/android">        <item android:drawable="@drawable/blue_btn_icon" />        <item android:drawable="@drawable/blue_btn_mask_shape" />    </layer-list> 

現在我們有了按鈕普通的樣式和按鈕按下的樣式，之後就可以建立一個selector：

blue_button_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:state_pressed="true"        android:drawable="@drawable/blue_btn_selector_layerlist" />    <item        android:drawable="@drawable/blue_btn_icon" /></selector>

最後就只需要在button的background設定這個blue_button_bg_selector.xml就行了。第二種方法明顯就比較繁瑣，需要多建立一個檔案，沒有模組化。

2015年11月05日 20:07:07 23446人閱讀 評論(5) 收藏 舉報 分類：Android基礎知識（15） 

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。討論QQ群：372702757 http://blog.csdn.net/wenwen091100304/article/details/49667293

 

目錄(?)[+]

 引言

selector中文的意思選取器，在Android中常常用來作組件的背景，這樣做的好處是省去了用代碼控制實現組件在不同狀態下不同的背景顏色或圖片的變換。使用十分方便。

selector的定義

selector就是狀態列表（StateList）， 它分為兩種，一種Color-Selector 和Drawable-Selector。

Color-Selector

color-selector 就是顏色狀態列表，可以跟color一樣使用，顏色會隨著組件的狀態而改變。檔案的位置儲存於

/res/color/filename.xml

• 1

在Java中使用是：R.color.filename 
在XML中使用是：@[package]color/filename

文法

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item        android:color="hex_color"               //顏色值，#RGB,$ARGB,#RRGGBB,#AARRGGBB        android:state_pressed=["true" | "false"]//是否觸摸         android:state_focused=["true" | "false"]//是否獲得焦點        android:state_selected=["true" | "false"]//是否被狀態        android:state_checkable=["true" | "false"]//是否可選        android:state_checked=["true" | "false"]//是否選中        android:state_enabled=["true" | "false"]//是否可用        android:state_window_focused=["true" | "false"] />//是否視窗聚焦</selector>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

樣本

在/res/color/檔案夾下建立test_color_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true"          android:color="#ffff0000"/> <!-- pressed -->    <item android:state_focused="true"          android:color="#ff0000ff"/> <!-- focused -->    <item android:color="#ff000000"/> <!-- default --></selector>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

調用：

    <Button        android:id="@+id/bt_about"        style="@style/Button_style"        android:layout_width="250dp"        android:layout_height="50dp"        android:layout_margin="5dp"        android:textColor="@color/test_color_selector"        android:text="@string/about" />

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

效果：注意字型顏色的變化 

Drawable-Selector

drawable-selector 是背景圖狀態列表，可以跟圖片一樣使用，背景會根據組件的狀態變化而變化。檔案儲存體於

/res/drawable/filename.xml

• 1

Java中調用：R.drawable.filename 
XML中調用：@[package:]drawable/filename

文法

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"    android:constantSize=["true" | "false"]//drawable的大小是否當中狀態變化，true表示是變化，false表示不變換，預設為false    android:dither=["true" | "false"]//當位元影像與螢幕的像素配置不一樣時(例如，一個ARGB為8888的位元影像與RGB為555的螢幕)會自行遞色(dither)。設定為false時不可遞色。預設true    android:variablePadding=["true" | "false"] >//內邊距是否變化，預設false    <item        android:drawable="@[package:]drawable/drawable_resource"//圖片資源        android:state_pressed=["true" | "false"]//是否觸摸        android:state_focused=["true" | "false"]//是否擷取到焦點        android:state_hovered=["true" | "false"]//游標是否經過        android:state_selected=["true" | "false"]//是否選中        android:state_checkable=["true" | "false"]//是否可勾選        android:state_checked=["true" | "false"]//是否勾選        android:state_enabled=["true" | "false"]//是否可用        android:state_activated=["true" | "false"]//是否啟用        android:state_window_focused=["true" | "false"] />//所在視窗是否擷取焦點</selector>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

樣本

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="true" android:drawable="@drawable/button_bg_press" />    <item android:state_focused="true" android:drawable="@drawable/button_bg_press" />    <item android:state_pressed="true" android:drawable="@drawable/button_bg_press"  />    <item android:drawable="@drawable/button_bg_normol"  /></selector>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

調用：

 <Button        android:id="@+id/bt_about"        style="@style/Button_style"        android:background="@drawable/button_selector"        android:layout_width="250dp"        android:layout_height="50dp"        android:layout_margin="5dp"        android:textColor="@color/test_color_selector"        android:text="@string/about" />

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

效果：注意button背景變化 

總結

selector是一種很好的方式，實現View狀態變化後背景與顏色變化的，可以省去很多邏輯代碼，掌握了之後既可以省去很多Java代碼，還能寫一些漂亮的UI。

Android中selector的使用