天天看點

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

轉載請備注出自于:http://blog.csdn.net/qq_22118507/article/details/51505844

三者的使用的方法: Java代碼中:R.drawable.檔案的名稱  XML中:Android:background="@drawable/檔案的名稱"

1.Shape

[html]  view plain  copy  

Android開發之Shape和Selector、Layer-list的詳解 3.layer-list
Android開發之Shape和Selector、Layer-list的詳解 3.layer-list
  1. <?xml version="1.0" encoding="utf-8"?>    
  2.  <!--     
  3.     android:shape=["rectangle" | "oval" | "line" | "ring"]    
  4.     shape的形狀,預設為矩形,可以設定為矩形(rectangle)、橢圓形(oval)、線性形狀(line)、環形(ring) 下面的屬性隻    android:shape="ring" 時可用:    
  5.     android:innerRadius         尺寸,内環的半徑。    
  6.     android:innerRadiusRatio    浮點型,以環的寬度比率來表示内環的半徑,例如,如果android:innerRadiusRatio,表示                                 内環半徑等于環的寬度除以5,這個值是可以被覆寫的,預設為9.    
  7.     android:thickness           尺寸,環的厚度    
  8.     android:thicknessRatio      浮點型,以環的寬度比率來表示環的厚度,例如,如果               android:thicknessRatio="2",那麼環的厚度就等于環的寬度除以2。這個值是可以被android:thickness覆寫的,預設值是                                 3.    
  9.     android:useLevel            boolean值,如果當做是LevelListDrawable使用時值為true,否則為false.    
  10.   -->    
  11. <shape    
  12.     xmlns:android="http://schemas.android.com/apk/res/android"    
  13.     android:shape="rectangle">    
  14.     <!--    
  15.         圓角    
  16.         android:radius              整型 半徑    
  17.         android:topLeftRadius       整型 左上角半徑    
  18.         android:topRightRadius      整型 右上角半徑    
  19.         android:bottomLeftRadius    整型右下角半徑    
  20.         android:bottomRightRadius   整型左下角半徑  
  21. 這裡有個地方需要注意,bottomleftradius是右下角,而不是左下角,這個不要記錯了。

    還有網上看到有人說設定成0dp無效,不過我在測試中發現是可以的,我用的是2.2,可能修複了這個問題吧,如果無效的話那就隻能設成1dp了。

  22.      -->    
  23.      <corners      
  24.         android:radius="8dp"    
  25.         android:topLeftRadius="5dp"    
  26.         android:topRightRadius="15dp"    
  27.         android:bottomLeftRadius="20dp"    
  28.         android:bottomRightRadius="25dp"      
  29.         />    
  30.      <!--    
  31.         漸變色    
  32.         android:startColor  顔色值                             起始顔色    
  33.         android:endColor    顔色值                             結束顔色    
  34.         android:centerColor 整型                               漸變中間顔色,即開始顔色與結束顔色之間的顔色    
  35.         android:angle       整型                               漸變角度
  36.         使用android:angle的注意事項:
  37.  當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的整數倍)

  38.         android:type        ["linear" | "radial" | "sweep"] 漸變類型(取值:linear、radial、sweep)    
  39.                             linear 線性漸變,這是預設設定    
  40.                             radial 放射性漸變,以開始色為中心。    
  41.                             sweep 掃描線式的漸變。  
  42.        android:useLevel     ["true" | "false"]                如果要使用LevelListDrawable對象,就要設定為            true。設定為true無漸變。false有漸變色  
  43.        android:gradientRadius 整型                            漸變色半徑.當 android:type="radial" 時才使用。            單獨使用 android:type="radial"會報錯。    
  44.        android:centerX      整型                              漸變中心X點坐标的相對位置    
  45.        android:centerY      整型                              漸變中心Y點坐标的相對位置    
  46.     -->    
  47.     <gradient    
  48.         android:startColor="#FFFF0000"    
  49.         android:endColor="#80FF00FF"    
  50.         android:angle="45"    
  51.         />     
  52.     <!--    
  53.         内邊距,即内容與邊的距離     
  54.         android:left    整型 左内邊距    
  55.         android:top     整型 上内邊距    
  56.         android:right   整型 右内邊距    
  57.         android:bottom  整型 下内邊距    
  58.       -->    
  59.      <padding     
  60.          android:left="10dp"    
  61.          android:top="10dp"    
  62.          android:right="10dp"    
  63.          android:bottom="10dp"    
  64.          />    
  65.     <!--     
  66.         size 大小    
  67.         android:width   整型 寬度    
  68.         android:height  整型 高度    
  69.     -->    
  70.     <size    
  71.         android:width="600dp"    
  72.         />    
  73.     <!--    
  74.         内部填充    
  75.         android:color   顔色值 填充顔色    
  76.     -->    
  77.     <solid     
  78.         android:color="#ffff9d77"    
  79.         />    
  80.      <!--    
  81.         描邊    
  82.         android:width       整型  描邊的寬度    
  83.         android:color       顔色值     描邊的顔色    
  84.         android:dashWidth   整型  表示描邊的樣式是虛線的寬度, 值為0時,表示為實線。值大于0則為虛線。    
  85.         android:dashGap     整型  表示描邊為虛線時,虛線之間的間隔 即“ - - - - ”    
  86.      -->    
  87.      <stroke     
  88.         android:width="2dp"    
  89.         android:color="#dcdcdc"      
  90.         />     
  91. </shape>  
2.Selector

根據不同的標明狀态來定義不同的現實效果,分為四大屬性:

android:state_selected 是選中

android:state_focused 是獲得焦點

android:state_pressed 是點選

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

另:

android:state_window_focused 預設時的背景圖檔

[html]  view plain  copy  

Android開發之Shape和Selector、Layer-list的詳解 3.layer-list
Android開發之Shape和Selector、Layer-list的詳解 3.layer-list
  1. <?xml version="1.0" encoding="utf-8" ?>       
  2. <selector xmlns:Android="http://schemas.android.com/apk/res/android">     
  3. <!-- 預設時的背景圖檔-->      
  4. <item Android:drawable="@drawable/pic1" />        
  5. <!-- 沒有焦點時的背景圖檔 -->      
  6. <item   
  7.    Android:state_window_focused="false"        
  8.    android:drawable="@drawable/pic_blue"   
  9.    />   <!--獲得焦點時的圖檔背景-->      

    <item   

       Android:state_focused="true"   

       Android:drawable="@drawable/pic_green"   

       />      

  10. <!-- 非觸摸模式下獲得焦點并單擊時的背景圖檔 -->      
  11. <item   
  12.    Android:state_focused="true"   
  13.    android:state_pressed="true"     
  14.    android:drawable= "@drawable/pic_red"   
  15.    />     
  16. <!-- 觸摸模式下單擊時的背景圖檔-->      
  17. <item   
  18.    Android:state_focused="false"   
  19.    Android:state_pressed="true"     
  20.    Android:drawable="@drawable/pic_pink"   
  21.    />      
  22. <!--選中時的圖檔背景-->      
  23. <item   
  24.    Android:state_selected="true"   
  25.    android:drawable="@drawable/pic_orange"   
  26.    />       
  27. <!--獲得焦點時的圖檔背景-->      
  28. <item   
  29.    Android:state_focused="true"   
  30.    Android:drawable="@drawable/pic_green"   
  31.    />       
  32. </selector>   

3.layer-list

3.1 多圖層疊加效果(1)

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

四個角都是圓角的效果。如果讓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"?>    

  1.  <layer-list    
  2.    xmlns:android="http://schemas.android.com/apk/res/android">   
  3.     <!--圖檔1-->  
  4.      <item android:id="@+id/user_faceback_drawable"  
  5.            android:drawable="@drawable/faceback" />    
  6.     <!--圖檔2-->  
  7.      <item android:id="@+id/user_face_drawable"   
  8.            android:drawable="@drawable/h001"     
  9.            android:left="10.0dip"   
  10.            android:top="18.0dip"   
  11.            android:right="25.0dip"   
  12.            android:bottom="35.0dip" />    
  13.  </layer-list>   
  14. <!--2個圖檔的疊加-->  

    效果圖如下:

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