用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"/