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

巴特西

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

最新文章

热门文章