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"/
  • 相关阅读:
    算法训练 P1103
    算法训练 表达式计算
    算法训练 表达式计算
    基础练习 时间转换
    基础练习 字符串对比
    Codeforces 527D Clique Problem
    Codeforces 527C Glass Carving
    Codeforces 527B Error Correct System
    Codeforces 527A Glass Carving
    Topcoder SRM 655 DIV1 250 CountryGroupHard
  • 原文地址:https://www.cnblogs.com/tianzhijiexian/p/3889770.html
Copyright © 2011-2022 走看看