• 用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"/
  • 相关阅读:
    HDU 5486 Difference of Clustering 图论
    HDU 5481 Desiderium 动态规划
    hdu 5480 Conturbatio 线段树 单点更新,区间查询最小值
    HDU 5478 Can you find it 随机化 数学
    HDU 5477 A Sweet Journey 水题
    HDU 5476 Explore Track of Point 数学平几
    HDU 5475 An easy problem 线段树
    ZOJ 3829 Known Notation 贪心
    ZOJ 3827 Information Entropy 水题
    zoj 3823 Excavator Contest 构造
  • 原文地址:https://www.cnblogs.com/tianzhijiexian/p/3889770.html
Copyright © 2020-2023  润新知