Android開發之Shape和Selector、Layer-list的詳解

轉載請備註出自於：http://blog.csdn.net/qq_22118507/article/details/51505844

三者的使用的方法：

Java代碼中：R.drawable.文件的名稱 

XML中：Android:background="@drawable/文件的名稱"

1.Shape

[html] view plain copy

 

<?xml version="1.0" encoding="utf-8"?>

 <!--
    android:shape=["rectangle" | "oval" | "line" | "ring"]
    shape的形狀，默認爲矩形，可以設置爲矩形（rectangle）、橢圓形(oval)、線性形狀(line)、環形(ring) 下面的屬性只    android:shape="ring" 時可用：
    android:innerRadius         尺寸，內環的半徑。
    android:innerRadiusRatio    浮點型，以環的寬度比率來表示內環的半徑,例如，如果android:innerRadiusRatio，表示                        
        內環半徑等於環的寬度除以5，這個值是可以被覆蓋的，默認爲9.
    android:thickness           尺寸，環的厚度
    android:thicknessRatio      浮點型，以環的寬度比率來表示環的厚度，例如，如果               android:thicknessRatio="2"，那麼環的厚度就等於環的寬度除以2。這個值是可以被android:thickness覆蓋的，默認值是
                                3.
    android:useLevel            boolean值，如果當做是LevelListDrawable使用時值爲true，否則爲false.
  -->
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!--
        圓角
        android:radius              整型 半徑
        android:topLeftRadius       整型 左上角半徑
        android:topRightRadius      整型 右上角半徑
        android:bottomLeftRadius    整型右下角半徑
        android:bottomRightRadius   整型左下角半徑

這裏有個地方需要注意，bottomleftradius是右下角，而不是左下角，這個不要記錯了。還有網上看到有人說設置成0dp無效，不過我在測試中發現是可以的，我用的是2.2，可能修復了這個問題吧，如果無效的話那就只能設成1dp了。
     -->
     <corners
        android:radius="8dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="15dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="25dp"
        />

     <!--
        漸變色
        android:startColor  顏色值                             起始顏色
        android:endColor    顏色值                             結束顏色
        android:centerColor 整型                               漸變中間顏色，即開始顏色與結束顏色之間的顏色
        android:angle       整型                              
漸變角度

        使用android:angle的注意事項：
 當angle=0時，漸變色是從左向右。 然後逆時針方向轉，當angle=90時爲從下往上。angle必須爲45的整數倍

      另外漸變默認的模式爲android:type="linear"，即線性漸變，可以指定漸變爲徑向漸變，android:type="radial"，徑向漸變需要指定半徑android:gradientradius="50"。

　　 android:angle網 上有各種說法，這裏，我說說自己的實驗結果，漸變的時候，最原始的，即android:angle＝“0”時，是從左到右，按照開始顏色到結束顏色來渲染
的，android:angle＝“90”是從上到下來渲染的，android:angle＝“180”是從右到左來渲染的，android:angle＝“360”和android:angle＝“0”是一樣的，所以這裏應該是這樣的，渲染時按照最原始的渲染色板（把控件內部看作一塊可以繞中心旋轉的板子）圍繞控件中心來旋轉相應的度數，即android:angle裏面的值就是所需要旋轉的角度，只是這個旋轉角度必須是45的整數倍)
        android:type        ["linear" | "radial" | "sweep"] 漸變類型(取值：linear、radial、sweep)
                            linear 線性漸變，這是默認設置
                            radial 放射性漸變，以開始色爲中心。
                            sweep 掃描線式的漸變。

       android:useLevel     ["true" | "false"]                如果要使用LevelListDrawable對象，就要設置爲       
    true。設置爲true無漸變。false有漸變色

       android:gradientRadius 整型                            漸變色半徑.當 android:type="radial" 時才使用。 
          單獨使用 android:type="radial"會報錯。
       android:centerX      整型                              漸變中心X點座標的相對位置
       android:centerY      整型                              漸變中心Y點座標的相對位置
    -->
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"
        />

    <!--
        內邊距，即內容與邊的距離
        android:left    整型 左內邊距
        android:top     整型 上內邊距
        android:right   整型 右內邊距
        android:bottom  整型 下內邊距
      -->
     <padding
         android:left="10dp"
         android:top="10dp"
         android:right="10dp"
         android:bottom="10dp"
         />

    <!--
        size 大小
        android:width   整型 寬度
        android:height  整型 高度
    -->
    <size
        android:width="600dp"
        />

    <!--
        內部填充
        android:color   顏色值 填充顏色
    -->
    <solid
        android:color="#ffff9d77"
        />

     <!--
        描邊
        android:width       整型  描邊的寬度
        android:color       顏色值     描邊的顏色
        android:dashWidth   整型  表示描邊的樣式是虛線的寬度， 值爲0時，表示爲實線。值大於0則爲虛線。
        android:dashGap     整型  表示描邊爲虛線時，虛線之間的間隔 即“ - - - - ”
     -->
     <stroke
        android:width="2dp"
        android:color="#dcdcdc"
        />
</shape>

2.Selector

根據不同的選定狀態來定義不同的現實效果，分爲四大屬性：

android:state_selected 是選中

android:state_focused 是獲得焦點

android:state_pressed 是點擊

android:state_enabled 是設置是否響應事件,指所有事件

另：

android:state_window_focused 默認時的背景圖片

[html] view plain copy

 

<?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:drawable="@drawable/pic_green" 
    />
<!-- 非觸摸模式下獲得焦點並單擊時的背景圖片 -->
<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>

3.layer-list

3.1多圖層疊加效果(1)

                          

四個角都是圓角的效果。如果讓UI設計人員直接出圖，可能會更簡單一些。但是我們使用android中layer-list多圖層疊加效果同樣可以實現。

我們把它拆分爲三個部分，第一個部分是最頂端的那一行（我這裏稱爲頂部），第二部分是中間部分（中間部分不需要圓角效果），第三部分是底部。

頂部的實現：

頂部是一個有灰色邊框但無下邊框，帶圓角，白色背景的長方體。實現效果如下：

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item >  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"  
                android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />  
            <stroke android:width="1dp" android:color="#ffa8abad" />  
        </shape>  
    </item>  
     <item android:top="1dp" android:left="1dp" android:right="1dp">  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"  
                android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />  
            <stroke android:width="1dp" android:color="#ffffffff" />  
        </shape>  
    </item> 
</layer-list>

中間部分是一個不帶圓角 白色背景 灰色邊框 無下邊框 長方體.實現效果如下：

<?xml version="1.0" encoding="UTF-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  <item>  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <stroke  
                android:width="1dp"  
                android:color="#ffa8abad" />  
        </shape>  
    </item> 
     <item  
        android:left="1dp"  
        android:right="1dp"  
        android:top="1dp">  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <stroke  
                android:width="1dp"  
                android:color="#ffffffff" />  
        </shape>  
    </item> 
</layer-list>

底部是一個具有底部圓角，白色背景，灰色邊框的長方體,實現效果如下：

<?xml version="1.0" encoding="UTF-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item>  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"  
                android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />  
            <stroke android:width="1dp" android:color="#ffa8abad" />  
        </shape>  
    </item>  
   <item android:top="1dp" android:bottom="1dp" android:left="1dp" android:right="1dp">  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"  
                android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />  
            <stroke android:width="1dp" android:color="#ffffffff" />  
        </shape>  
    </item>
</layer-list>

3.3多圖層疊加效果(2)

<?xml version="1.0" encoding="UTF-8"?>    

 <layer-list
   xmlns:android="http://schemas.android.com/apk/res/android">
    <!--圖片1-->
     <item android:id="@+id/user_faceback_drawable"
           android:drawable="@drawable/faceback" />
    <!--圖片2-->
     <item android:id="@+id/user_face_drawable"
           android:drawable="@drawable/h001"
           android:left="10.0dip"
           android:top="18.0dip"
           android:right="25.0dip"
           android:bottom="35.0dip" />
 </layer-list>
<!--2個圖片的疊加-->

    效果圖如下：