快捷導(dǎo)航

實(shí)例詳解Android Selector和Shape的用法

更新時(shí)間：2016年01月23日 19:53:24 作者：東名夜雨

shape和selector是Android UI設(shè)計(jì)中經(jīng)常用到的，比如我們要自定義一個(gè)圓角Button，點(diǎn)擊Button有些效果的變化，就要用到shape和selector，通過(guò)本文結(jié)合代碼實(shí)例給大家詳解Android Selector和Shape的用法，感興趣的朋友一起學(xué)習(xí)吧

shape和selector是Android UI設(shè)計(jì)中經(jīng)常用到的，比如我們要自定義一個(gè)圓角Button，點(diǎn)擊Button有些效果的變化，就要用到shape和selector?？梢赃@樣說(shuō)，shape和selector在美化控件中的作用是至關(guān)重要的。

1：Selector

drawable的item中可以有以下屬性：

android:drawable="@[package:]drawable/drawable_resource"
android:state_pressed=["true" | "false"]
android:state_focused=["true" | "false"]
android:state_selected=["true" | "false"]
android:state_active=["true" | "false"]
android:state_checkable=["true" | "false"]
android:state_checked=["true" | "false"]
android:state_enabled=["true" | "false"]
android:state_window_focused=["true" | "false"]

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_enabled="true" android:state_checked="true" android:state_pressed="true" 
android:drawable="@drawable/enabled_on_pressed" /> 
<item android:state_enabled="true" android:state_checked="false" android:state_pressed="true" 
android:drawable="@drawable/enabled_off_pressed" /> 
<item android:state_enabled="true" android:state_checked="true" 
android:drawable="@drawable/enabled_on" /> 
<item android:state_enabled="true" android:state_checked="false" 
android:drawable="@drawable/enabled_off" /> 
<item android:state_enabled="false" android:state_checked="true" 
android:drawable="@drawable/disabled_on" /> 
<item android:state_enabled="false" android:state_checked="false" 
android:drawable="@drawable/disabled_off" /> 
</selector>

Item順序是有講究的，條件限定越細(xì)致，則應(yīng)該放到前面。比如這兒如果把1，2行和3，4行的item交換，那么pressed的就永遠(yuǎn)無(wú)法觸發(fā)了，因?yàn)橛衖tem已經(jīng)滿足條件返回了。可以理解為代碼中的if語(yǔ)句。

2：Shape

<shape> 
<!-- 實(shí)心 --> 
<solid android:color="#ff9d77"/> 
<!-- 漸變 --> 
<gradient 
android:startColor="#ff8c00" 
android:endColor="#FFFFFF" 
android:angle="270" /> 
<!-- 描邊 --> 
<stroke 
android:width="2dp" 
android:color="#dcdcdc" /> 
<!-- 圓角 --> 
<corners 
android:radius="2dp" /> 
<padding 
android:left="10dp" 
android:top="10dp" 
android:right="10dp" 
android:bottom="10dp" /> 
</shape>

solid：實(shí)心，就是填充的意思
android:color指定填充的顏色
gradient：漸變

android:startColor和android:endColor分別為起始和結(jié)束顏色，ndroid:angle是漸變角度，必須為45的整數(shù)倍。

另外漸變默認(rèn)的模式為android:type="linear"，即線性漸變，可以指定漸變?yōu)閺较驖u變，android:type="radial"，徑向漸變需要指定半徑android:gradientRadius="50"。

stroke：描邊

android:width="2dp" 描邊的寬度，android:color 描邊的顏色。

我們還可以把描邊弄成虛線的形式，設(shè)置方式為：

android:dashWidth="5dp"
android:dashGap="3dp"

其中android:dashWidth表示'-'這樣一個(gè)橫線的寬度，android:dashGap表示之間隔開的距離。

corners：圓角

android:radius為角的弧度，值越大角越圓。

我們還可以把四個(gè)角設(shè)定成不同的角度，方法為：

<corners 
android:topRightRadius="20dp" 右上角
android:bottomLeftRadius="20dp" 右下角
android:topLeftRadius="1dp" 左上角
android:bottomRightRadius="0dp" 左下角
/>

這里有個(gè)地方需要注意，bottomLeftRadius是右下角，而不是左下角，這個(gè)有點(diǎn)郁悶，不過(guò)不影響使用，記得別搞錯(cuò)了就行。
還有網(wǎng)上看到有人說(shuō)設(shè)置成0dp無(wú)效，不過(guò)我在測(cè)試中發(fā)現(xiàn)是可以的，我用的是2.2，可能修復(fù)了這個(gè)問(wèn)題吧，如果無(wú)效的話那就只能設(shè)成1dp了。

padding：間隔

button_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> 
<!-- 漸變 --> 
<gradient 
android:startColor="#ff8c00" 
android:endColor="#FFFFFF" 
android:type="radial" 
android:gradientRadius="50" /> 
<!-- 描邊 --> 
<stroke 
android:width="2dp" 
android:color="#dcdcdc" 
android:dashWidth="5dp" 
android:dashGap="3dp" /> 
<!-- 圓角 --> 
<corners 
android:radius="2dp" /> 
<padding 
android:left="10dp" 
android:top="10dp" 
android:right="10dp" 
android:bottom="10dp" /> 
</shape> 
</item> 
<item android:state_focused="true" > 
<shape> 
<gradient 
android:startColor="#ffc2b7" 
android:endColor="#ffc2b7" 
android:angle="270" /> 
<stroke 
android:width="2dp" 
android:color="#dcdcdc" /> 
<corners 
android:radius="2dp" /> 
<padding 
android:left="10dp" 
android:top="10dp" 
android:right="10dp" 
android:bottom="10dp" /> 
</shape> 
</item> 
<item> 
<shape> 
<solid android:color="#ff9d77"/> 
<stroke 
android:width="2dp" 
android:color="#fad3cf" /> 
<corners 
android:topRightRadius="5dp" 
android:bottomLeftRadius="5dp" 
android:topLeftRadius="0dp" 
android:bottomRightRadius="0dp" 
/> 
<padding 
android:left="10dp" 
android:top="10dp" 
android:right="10dp" 
android:bottom="10dp" /> 
</shape> 
</item> 
</selector>

運(yùn)行效果如下圖：

一般狀態(tài)：