Android中Shape、Layer、Selector的使用

1.Shape
通過Shape可以在xml中繪制各種形狀
在res/drawable文件夾下,新建一個文件:shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    >
</shape>

Shape文件根元素是<shape>,可以根據(jù)shape屬性指定基本形狀,允許的值有:rectangle(矩形),oval(橢圓),line(線條), ring(環(huán))。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval"
    >
</shape>

僅當(dāng)形狀定義為ring時,下列屬性才可用:
innerRadius //內(nèi)環(huán)半徑,可覆蓋innerRadiusRatio
innerRadiusRatio //內(nèi)環(huán)的厚度比,即環(huán)的寬度比表示內(nèi)環(huán)半徑
thickness //環(huán)的厚度,可覆蓋thicknessRatio
thicknessRatio //環(huán)的厚度比,即環(huán)的寬度比表示環(huán)的厚度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="ring"
 android:innerRadius="integer"          
 android:innerRadiusRatio="float"      
 android:thickness="integer"             
 android:thicknessRatio="float"    
    >
</shape>

shape有corners、gradient、padding、size、solid、stroke這幾個子標(biāo)簽

corners圓角
當(dāng)android:shape="rectangle"時使用
radius="integer" // 圓角半徑,該值設(shè)置時下面四個屬性失效
bottomLeftRadius="integer" // 左下角圓角半徑
bottomRightRadius="integer" // 右下角圓角半徑
topLeftRadius="integer" // 左上角圓角半徑
topRightRadius="integer" // 右上角圓角半徑

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
    <corners 
        android:radius="integer"    
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"/>
</shape>

gradient漸變
type="linear|radial|sweep" // 分別為線性、放射性、掃描性漸變,默認(rèn)為線性漸變linear
angle="integer" // 漸變角度,當(dāng)上面type為線性漸變linear時有效。角度為45的倍數(shù),0度時從左往右漸變,角度方向逆時針
centerColor="color" // 漸變中間位置顏色
startColor="color" // 漸變開始位置顏色
endColor="color" // 漸變結(jié)束位置顏色
centerX="float" // type為放射性漸變radial時有效,設(shè)置漸變中心的X坐標(biāo),取值區(qū)間[0,1],默認(rèn)為0.5,即中心位置
centerY="float" // type為放射性漸變radial時有效,設(shè)置漸變中心的Y坐標(biāo),取值區(qū)間[0,1],默認(rèn)為0.5,即中心位置
gradientRadius="integer" // type為放射性漸變radial時有效,漸變的半徑

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient  
        android:type="linear|radial|sweep" 
        android:angle="integer"            
        android:centerColor="color"     
        android:startColor="color"         
        android:endColor="color"       
        android:centerX="float"           
        android:centerY="float"        
        android:gradientRadius="integer"/>
</shape>

padding內(nèi)邊距
bottom="integer" // 設(shè)置底部邊距
left="integer" // 左邊邊距
right="integer" // 右邊
top="integer" // 頂部

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <padding
        android:left="20dp"
        android:right="20dp"
        android:top="20dp"
        android:bottom="20dp"/>
</shape>

size尺寸
height="integer" // 寬度
width="integer" // 高度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="integer"
        android:height="integer"/>
</shape>

solid填充
color="color" // shape的填充色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="color"/>
</shape>

stroke描邊
color="color" // 描邊的顏色
width="integer" // 描邊的寬度
dashGap="integer" // 虛線間隔
dashWidth="integer" // 虛線寬度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:color="color"
        android:width="integer"
        android:dashGap="integer"
        android:dashWidth="integer"/>
</shape>

2.Layer
layer-list可以將多個圖片按照順序?qū)盈B起來,讓其看起來像一個圖一樣
在res/drawable文件夾下,新建一個文件:layer.xml

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

Layer文件根元素是<layer-list>,layer-list只有item一個子標(biāo)簽

item
width="integer" //寬高
height="integer" //高
left="integer" //marginleft
right="integer" //marginright
top="integer" //margintop
bottom="integer" //類似marginbottom
drawable="@drawable/drawable" //設(shè)置圖片
gravity="center|center_horizontal|center_vertical"

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="integer"
        android:height="integer"
        android:left="integer"
        android:right="integer"
        android:top="integer"
        android:bottom="integer"
        android:drawable="@drawable/drawable" 
        android:gravity="center|center_horizontal|center_vertical"/>
</layer-list>

3.Selector
selector多個item子標(biāo)簽,而相應(yīng)的狀態(tài)是在item標(biāo)簽中定義的。selector可以作為兩種資源使用:drawable和color。作為drawable資源使用時,放于drawable目錄下,item必須指定android:drawable屬性;作為color資源使用時,則放于color目錄下,item必須指定android:color屬性。
在res/drawable文件夾下,新建一個文件:selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>

android:state_enabled: 設(shè)置觸摸或點擊事件是否可用狀態(tài),一般只在false時設(shè)置該屬性,表示不可用狀態(tài)
android:state_pressed: 設(shè)置是否按壓狀態(tài),一般在true時設(shè)置該屬性,表示已按壓狀態(tài),默認(rèn)為false
android:state_selected: 設(shè)置是否選中狀態(tài),true表示已選中,false表示未選中
android:state_checked: 設(shè)置是否勾選狀態(tài),主要用于CheckBox和RadioButton,true表示已被勾選,false表示未被勾選
android:state_checkable: 設(shè)置勾選是否可用狀態(tài),類似state_enabled,只是state_enabled會影響觸摸或點擊事件,而state_checkable影響勾選事件
android:state_focused: 設(shè)置是否獲得焦點狀態(tài),true表示獲得焦點,默認(rèn)為false,表示未獲得焦點
android:state_window_focused: 設(shè)置當(dāng)前窗口是否獲得焦點狀態(tài),true表示獲得焦點,false表示未獲得焦點,例如拉下通知欄或彈出對話框時,當(dāng)前界面就會失去焦點;另外,ListView的ListItem獲得焦點時也會觸發(fā)true狀態(tài),可以理解為當(dāng)前窗口就是ListItem本身
android:state_activated: 設(shè)置是否被激活狀態(tài),true表示被激活,false表示未激活,API Level 11及以上才支持,可通過代碼調(diào)用控件的setActivated(boolean)方法設(shè)置是否激活該控件
android:state_hovered: 設(shè)置是否鼠標(biāo)在上面滑動的狀態(tài),true表示鼠標(biāo)在上面滑動,默認(rèn)為false,API Level 14及以上才支持

引用資源為圖片時

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 當(dāng)前窗口失去焦點時 -->
    <item android:drawable="@drawable/d1" android:state_window_focused="false" />
    <!-- 不可用時 -->
    <item android:drawable="@drawable/d2" android:state_enabled="false" />
    <!-- 按壓時 -->
    <item android:drawable="@drawable/d3" android:state_pressed="true" />
    <!-- 被選中時 -->
    <item android:drawable="@drawable/d4" android:state_selected="true" />
    <!-- 被激活時 -->
    <item android:drawable="@drawable/d5" android:state_activated="true" />
    <!-- 默認(rèn)時 -->
    <item android:drawable="@drawable/d6" />
</selector>

引用資源為顏色時

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 當(dāng)前窗口失去焦點時 -->
    <item 
      android:color="@android:color/black"      
      android:state_window_focused="false" />
    <!-- 不可用時 -->
    <item 
       android:color="@android:color/background_light" 
       android:state_enabled="false" />
    <!-- 按壓時 -->
    <item 
      android:color="@android:color/holo_blue_light" 
      android:state_pressed="true" />
    <!-- 被選中時 -->
    <item 
      android:color="@android:color/holo_green_dark" 
      android:state_selected="true" />
    <!-- 被激活時 -->
    <item 
      android:color="@android:color/holo_green_light" 
      android:state_activated="true" />
    <!-- 默認(rèn)時 -->
    <item 
      android:color="@android:color/white" />
</selector>

另外Selector的item中可以使用Layer和Shape,Layer的item中也可以使用Selector和Shape
可以通過不同的組合來實現(xiàn)一些有意思的東西。

PS.東西不難,但不用真的容易忘

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,086評論 25 708
  • 概述 今天我們來探究一下android的樣式。其實,幾乎所有的控件都可以使用 background屬性去引用自定義...
    CokeNello閱讀 4,896評論 1 19
  • 記得剛開始學(xué)Android時,看著自己完全用系統(tǒng)控件寫出的不忍直視的界面,對于如何做出不一樣的按鈕,讓它們在不同狀...
    biloba閱讀 1,733評論 1 11
  • 更多Android總結(jié)知識點 Android中的13種Drawable小結(jié) Android的八種對話框的實現(xiàn) An...
    侯蛋蛋_閱讀 4,022評論 0 5
  • 昨天家里電燈泡壞了,書房里面黑漆漆的,我沒有“挑燈夜讀”的習(xí)慣,所以昨天就早早休息了,拉下的功課今天來補(bǔ)充。 今天...
    火色石榴花閱讀 267評論 0 0