Android中的Selector(背景選擇器)主要是用來(lái)改變一個(gè)按鈕控件的背景,在Android UI設(shè)計(jì)中經(jīng)常會(huì)遇到,比如我們?cè)邳c(diǎn)擊Button時(shí)需要有些效果的變化,這時(shí)候就要用到<selector>和<shape>。<selector>和<shape>對(duì)美化控件有很大的作用。
接下來(lái)我要以四個(gè)在Android實(shí)際開(kāi)發(fā)中可能會(huì)用的比較的情況來(lái)探索selector和shape的結(jié)合使用。
(1)帶圓角,白色背景,彩色邊框的矩形
首先來(lái)定義一個(gè)帶圓角,白色背景,綠色邊框的矩形,在selector中設(shè)置它為單擊時(shí)的背景
<?xml version="1.0" encoding="utf-8"?>
<!--定義一個(gè)帶圓角,白色背景,綠色邊框的矩形-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--圓角-->
<corners android:radius="5dp" />
<!--填充顏色-->
<solid android:color="@color/white" />
<!--描邊-->
<stroke
android:width="1dp"
android:color="@color/green" />
</shape>
實(shí)際開(kāi)發(fā)中我們可以根據(jù)需求設(shè)置其他的屬性,比如<gradient> 定義使用漸變色填充,<padding> 定義幾何形狀的內(nèi)邊距,<size>定義幾何形狀的大小等等,在這里就不一一例舉了。
然后來(lái)定義一個(gè)帶圓角,白色背景,藍(lán)色邊框的矩形,在selector中設(shè)置它為不在單擊狀態(tài)時(shí)的背景
<?xml version="1.0" encoding="utf-8"?>
<!--定義一個(gè)帶圓角,白色背景,藍(lán)色邊框的矩形-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 圓角 -->
<corners android:radius="5dp" />
<!--填充顏色-->
<solid android:color="@color/white" />
<!-- 描邊 -->
<stroke
android:width="1dp"
android:color="@color/blue" />
</shape>
接下來(lái)就在selector背景選擇器中設(shè)置單擊時(shí)與不在單擊狀態(tài)下的背景
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shape_border_press" android:state_pressed="true" />
<item android:drawable="@drawable/shape_border_nor" android:state_window_focused="false" />
</selector>
其中android:state_pressed="true"表示在組件被單擊時(shí)的背景圖片,
android:state_window_focused="false" 表示默認(rèn)時(shí)情況下的背景圖片,此外還可以設(shè)置:
android:state_focused="true"表示在獲得焦點(diǎn)時(shí)的背景圖片
android:state_selected="true"表示被選中時(shí)的背景圖片
android:state_enabled="true"表示響應(yīng)時(shí)的背景圖片
在實(shí)際的開(kāi)發(fā)中,我們可以根據(jù)不同的選定狀態(tài)來(lái)定義不同的現(xiàn)實(shí)效果
在點(diǎn)擊某一個(gè)按鈕的時(shí)候相對(duì)應(yīng)的按鈕字體的顏色也應(yīng)發(fā)生對(duì)應(yīng)的變化,這樣的用戶體驗(yàn)會(huì)更好
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--不在單擊狀態(tài)下字體的顏色-->
<item android:color="@color/blue" android:state_pressed="false" />
<!--單擊時(shí)的顏色-->
<item android:color="@color/green" android:state_pressed="true" />
</selector>
現(xiàn)在我們來(lái)看一下效果
其實(shí)如下所示我們可以看到為了設(shè)置一個(gè)按鈕選中時(shí)的背景圖片的變化,我們創(chuàng)建了四個(gè)XML文件,這顯然是沒(méi)有必要的,我們可以盡可能少的把這些內(nèi)容整合到一個(gè)XML中,這就要用到我們今天所探索的Android中selector和shape的結(jié)合使用
如下就是使用我們的第二種方法來(lái)定義當(dāng)我們點(diǎn)擊一個(gè)按鈕時(shí)按鈕的背景選擇器,是不是簡(jiǎn)介了呢?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--第一種方法-->
<!--<item android:drawable="@drawable/shape_border_press" android:state_pressed="true" />-->
<!--<item android:drawable="@drawable/shape_border_nor" android:state_window_focused="false"/>-->
<!--第二種方法-->
<!--默認(rèn)情況下是一個(gè)帶圓角,白色背景,藍(lán)色邊框的矩形-->
<item android:state_window_focused="false">
<shape android:shape="rectangle">
<!-- 圓角 -->
<corners android:radius="5dp" />
<!--填充顏色為白色-->
<solid android:color="@color/white" />
<!-- 描邊 -->
<stroke android:width="1dp" android:color="@color/blue" />
</shape>
</item>
<!--單擊時(shí)是一個(gè)帶圓角,白色背景,綠色邊框的矩形-->
<item android:state_pressed="true">
<shape android:shape="rectangle">
<!--圓角-->
<corners android:radius="5dp" />
<!--填充顏色為白色-->
<solid android:color="@color/white" />
<!--描邊-->
<stroke android:width="1dp" android:color="@color/green" />
</shape>
</item>
</selector>
(2)帶圓角,藍(lán)色背景,白色邊框的矩形
span style="font-size:18px;"><strong></strong></span><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--默認(rèn)情況下是一個(gè)帶圓角,藍(lán)色背景,白色邊框的矩形-->
<!--第二種方法-->
<item android:state_window_focused="false">
<shape android:shape="rectangle">
<!--圓角-->
<corners android:radius="5dp" />
<!--填充顏色-->
<solid android:color="@color/blue" />
<!--描邊-->
<stroke android:width="1dp" android:color="@color/white" />
</shape>
</item>
<!--單擊時(shí)是一個(gè)帶圓角,綠色背景,白色邊框的矩形-->
<item android:state_pressed="true">
<shape android:shape="rectangle">
<!--圓角-->
<corners android:radius="5dp" />
<!--填充顏色-->
<solid android:color="@color/green" />
<!--描邊-->
<stroke android:width="1dp" android:color="@color/white" />
</shape>
</item>
</selector>
效果圖如下:
(3)帶圓角,白色背景,藍(lán)色虛線邊框的矩形
<?xml version="1.0" encoding="utf-8"?>
<!--背景選擇器-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--默認(rèn)情況下是一個(gè)帶圓角,白色背景,藍(lán)色虛線邊框的矩形-->
<item android:state_window_focused="false">
<shape android:shape="rectangle">
<!--填充顏色為白色-->
<solid android:color="@color/white" />
<!--描邊,設(shè)置描邊為虛線,其中android:dashWidth表示'-'這樣一個(gè)橫線的寬度,android:dashGap表示之間隔開(kāi)的距離-->
<stroke android:width="1dp" android:color="@color/blue" android:dashGap="2dp" android:dashWidth="10dp" />
<!-- 圓角 -->
<corners android:radius="2dp" />
</shape>
</item>
<!--單擊時(shí)候是一個(gè)帶圓角,白色背景,綠色虛線邊框的矩形-->
<item android:state_pressed="true">
<shape android:shape="rectangle">
<!--填充顏色-->
<solid android:color="@color/white" />
<!--描邊-->
<stroke android:width="1dp" android:color="@color/green" android:dashGap="2dp" android:dashWidth="10dp" />
<!-- 圓角 -->
<corners android:radius="2dp" />
</shape>
</item>
</selector>
效果如下:
(4)藍(lán)色背景的圖形
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--默認(rèn)情況下是一個(gè)藍(lán)色背景的圓形-->
<item android:state_window_focused="false">
<shape android:shape="oval">
<!--填充個(gè)顏色-->
<solid android:color="@color/blue" />
</shape>
</item>
<!--單擊時(shí)是一個(gè)綠色背景的圓形-->
<item android:state_pressed="true">
<!--填充顏色-->
<shape android:shape="oval">
<solid android:color="@color/green" />
</shape>
</item>
</selector>
要補(bǔ)充一點(diǎn)就是ShapeDrawable資源是用來(lái)定義一個(gè)基本的幾何圖形的,ShapeDrawable的XML文件的根元素屬性可以設(shè)置成android:shape=["rectangle"|"oval"|"line"|"ring"],值定義哪種類型的幾何圖形,分別表示矩形、圓形、線條和環(huán)形
Dome下載