用layer-list实现图片旋转叠加、错位叠加、阴影、按钮指示灯

时间:2023-03-10 03:19:13
用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)

用layer-list实现图片旋转叠加、错位叠加、阴影、按钮指示灯

<?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.****.net/cwx01perfect/article/details/7739005)

用layer-list实现图片旋转叠加、错位叠加、阴影、按钮指示灯

<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就代表光点

用layer-list实现图片旋转叠加、错位叠加、阴影、按钮指示灯back       用layer-list实现图片旋转叠加、错位叠加、阴影、按钮指示灯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"/