shape和selector結合

shape和selector是Android UI設計中經常用到的,比如我們要自定義一個圓角Button,點擊Button有些效果的變化,就要用到shape和selector。可以這樣說,shape和selector在美化控件中的作用是至關重要的。
1.Shape
簡介
作用:XML中定義的幾何形狀
位置:res/drawable/文件的名稱.xml
使用的方法:
Java代碼中:R.drawable.文件的名稱
XML中:Android:background=”@drawable/文件的名稱”
屬性:
Android:shape=[“rectangle” | “oval” | “line” | “ring”]
其中rectagle矩形,oval橢圓,line水平直線,ring環形
中子節點的常用屬性:
漸變
Android:startColor 起始顏色
Android:endColor 結束顏色
Android:angle 漸變角度,0從上到下,90表示從左到右,數值爲45的整數倍默認爲0;
Android:type 漸變的樣式 liner線性漸變 radial環形漸變 sweep
填充
Android:color 填充的顏色
描邊
Android:width 描邊的寬度
Android:color 描邊的顏色
Android:dashWidth 表示’-‘橫線的寬度
Android:dashGap 表示’-‘橫線之間的距離
圓角
Android:radius 圓角的半徑 值越大角越圓
Android:topRightRadius 右上圓角半徑
Android:bottomLeftRadius 右下圓角角半徑
Android:topLeftRadius 左上圓角半徑
Android:bottomRightRadius 左下圓角半徑
2.Selector
簡介
位置:res/drawable/文件的名稱.xml
使用的方法:
Java代碼中:R.drawable.文件的名稱
XML中:Android:background=”@drawable/文件的名稱”

<?xml version="1.0" encoding="utf-8" ?>     
<selector xmlns:Android="http://schemas.android.com/apk/res/android">   
<!-- 默認時的背景圖片-->    
<item Android:drawable="@drawable/pic1" />      
<!-- 沒有焦點時的背景圖片 -->    
<item 
   Android:state_window_focused="false"      
   android:drawable="@drawable/pic_blue" 
   />     
<!-- 非觸摸模式下獲得焦點並單擊時的背景圖片 -->    
<item 
   Android:state_focused="true" 
   android:state_pressed="true"   
   android:drawable= "@drawable/pic_red" 
   />   
<!-- 觸摸模式下單擊時的背景圖片-->    
<item 
   Android:state_focused="false" 
   Android:state_pressed="true"   
   Android:drawable="@drawable/pic_pink" 
   />    
<!--選中時的圖片背景-->    
<item 
   Android:state_selected="true" 
   android:drawable="@drawable/pic_orange" 
   />     
<!--獲得焦點時的圖片背景-->    
<item 
   Android:state_focused="true" 
   Android:drawable="@drawable/pic_green" 
   />     
</selector> 

第一個例子:圓角的Button
第二個例子:shape+selector綜合使用的例子
selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:Android="http://schemas.android.com/apk/res/android"> 
    <item Android:state_selected="true"> 
        <shape> 
            <gradient Android:angle="270" android:endColor="#99BD4C" 
                android:startColor="#A5D245" /> 
            <size Android:height="60dp" android:width="320dp" /> 
            <corners android:radius="8dp" /> 
        </shape> 
    </item> 
    <item Android:state_pressed="true"> 
        <shape> 
            <gradient Android:angle="270" android:endColor="#99BD4C" 
                android:startColor="#A5D245"/> 
            <size Android:height="60dp" android:width="320dp" /> 
            <corners android:radius="8dp" /> 
        </shape> 
    </item> 
    <item> 
        <shape> 
            <gradient Android:angle="270" android:endColor="#A8C3B0" 
                android:startColor="#C6CFCE"  /> 
            <size Android:height="60dp" android:width="320dp" /> 
            <corners android:radius="8dp" /> 
        </shape> 
    </item> 
</selector> 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章