用layer-list實現圖片旋轉疊加、錯位疊加、陰影、按鈕指示燈

先來看看一個簡單的文件：

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

            <corners android:radius="2dp"/>
            <stroke
                android:width="2dp"
                android:color="#ccc" />

        </shape>
    </item>

    <item
        android:top="0dp"
        android:bottom="2dp"
        >   
        <shape
            android:shape="rectangle"
            android:dither="true">
            <corners android:radius="2dp"/>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
    
    
</layer-list>

我們注意到item中有top，bottom什么的，這些屬性是干嘛的呢？其實你可以完全理解為top就是paddingTop，bottom就是paddingBottom。就是內邊距。

 

效果一：旋轉疊加（http://bbs.51cto.com/thread-1067726-1-1.html）

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <!-- 最底層的圖片，以x，y軸坐標為中心進行旋轉--> 
        <rotate android:pivotX="0" android:pivotY="0"
                android:fromDegrees="-10" android:toDegrees="-10">
            <bitmap android:src="@drawable/chatting_bg_default_thumb"/>
         </rotate>
    </item>
    <!-- 第二層的圖片，以x，y軸坐標為中心進行旋轉-->
    <item>
        <rotate android:pivotX="0" android:pivotY="0"
                android:fromDegrees="15" android:toDegrees="15">
            <bitmap android:src="@drawable/chatting_bg_purecolor_thumb"/>
        </rotate>
    </item>
    <!-- 最上層的圖片，以x，y軸坐標為中心進行旋轉-->
    <item>
        <rotate android:pivotX="0" android:pivotY="0"
                android:fromDegrees="35" android:toDegrees="55">
            <bitmap android:src="@drawable/mark"/>
        </rotate>
    </item>
</layer-list>

 

效果二：圖片疊加 （http://blog.csdn.net/cwx01perfect/article/details/7739005）

<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>   

 

效果三：給圖片繪制陰影，其實就是疊加一個背景圖（http://www.aitinan.com/4004.html）

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 
    <!-- 陰影部分 -->
    <!-- 個人覺得更形象的表達：top代表下邊的陰影高度，left代表右邊的陰影寬度。其實也就是相對應的offset，solid中的顏色是陰影的顏色，也可以設置角度等等 -->
    <item
        android:left="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
 
            <gradient
                android:angle="270"
 
                android:endColor="#0F000000"
                android:startColor="#0F000000" />
 
            <corners
                android:bottomLeftRadius="6dip"
                android:bottomRightRadius="6dip"
                android:topLeftRadius="6dip"
                android:topRightRadius="6dip" />
        </shape>
    </item>
 
    <!-- 背景部分 -->
    <!-- 形象的表達：bottom代表背景部分在上邊緣超出陰影的高度，right代表背景部分在左邊超出陰影的寬度（相對應的offset） -->
    <item
        android:bottom="3dp"
        android:right="3dp">
        <shape android:shape="rectangle" >
 
            <gradient
                android:angle="270"
                android:endColor="#FFFFFF"
                android:startColor="#FFFFFF" />
 
            <corners
                android:bottomLeftRadius="6dip"
                android:bottomRightRadius="6dip"
                android:topLeftRadius="6dip"
                android:topRightRadius="6dip" />
        </shape>
    </item>
 
</layer-list>

 

效果四：給按鈕添加指示器

這里的意思就是你可能有個普通的按鈕，但是不想做按下的效果了，那么可以在圖片上疊加一個光點的圖片，這樣按下后圖片上就會出現這個光點，表明用戶已經按下了按鈕。一個是節約資源，一個是可以最大限度的復用圖片。

下面代碼中的qq就代表光點 

back       qq

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

    <!-- 按下時的圖片 -->
    <item android:state_pressed="true">
        <layer-list>
            <item android:drawable="@drawable/back"/>
            <!-- 圖片2 -->
            <item android:bottom="35.0dip" android:drawable="@drawable/qq" 
                android:left="8.0dip" android:right="25.0dip" android:top="18.0dip"/>
        </layer-list>
        
        </item>
    <!-- 默認圖片 -->
    <item android:drawable="@drawable/back"/>

</selector>

 

使用：

    <Button
        android:id="@+id/button1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/selector"/