zoukankan      html  css  js  c++  java
  • 用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"/
  • 相关阅读:
    基于matlab的退化图像复原(一)------图像退化处理
    风洞稳定小球系统(二)----- 基于Arduino实现的PID距离PWM控制
    风洞稳定小球系统(一)----- 基于MATLAB实现的Kalman filter滤波距离检测
    matlab基本粒子群算法实现(四)
    使用SC命令时注意事项
    abiword Namespace List
    Improving the AbiWord's Piece Table
    Font Rending 的 Hint 机制对排版的影响
    abiword Related Pages
    跟我一起写 Makefile
  • 原文地址:https://www.cnblogs.com/tianzhijiexian/p/3889770.html
Copyright © 2011-2022 走看看