先来看看一个简单的文件:

<?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实现图片旋转叠加、错位叠加、阴影、按钮指示灯的更多相关文章

  1. js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能

    html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...

  2. HTML5图片旋转

    HTML5图片旋转 首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下: 1,webstrom 2,google chrome浏览器 3,cocos2dx-Js ...

  3. iOS 图片旋转方法

    iOS 图片旋转方法 通过 CGImage 或 CIImage 旋转特定角度 UIImage可通过CGImage或CIImage初始化,初始化方法分别为init(cgImage: CGImage, s ...

  4. iOS transform解决连续多次旋转缩放,实现图片旋转缩放效果

    一.需求 实现imageView的缩放旋转效果,一般有两种方式: 1.底层加scrollview,利用scrollview的属性实现.(推荐这种,这是我比较后发现的,手势做缩放旋转会有点弊端) 2.利 ...

  5. 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)

    using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

  6. PHPThumb处理图片,生成缩略图,图片尺寸调整,图片截取,图片加水印,图片旋转

    [强烈推荐]下载地址(github.com/masterexploder/PHPThumb). 注意这个类库有一个重名的叫phpThumb,只是大小写的差别,所以查找文档的时候千万注意. 在网站建设过 ...

  7. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. iOS_UIImage_图片旋转

    一.目的: 有时候我们获得到的图片我们不是我们想要的方向,需要对图片进行旋转.比如:图片旋转90度180度等. 二.实现过程. 1.获取到该UIImage. 2.开启上下文. 3.上下文的具体操作. ...

  9. Rotating Image Slider - 图片旋转切换特效

    非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...

  10. JQuery插件让图片旋转任意角度且代码极其简单

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...

随机推荐

  1. .NetCore源码阅读笔记系列之Security (一) Authentication & AddCookie

    如果你使用过.NetCore开发过程序,你会很清楚,在其中我们经常会用到一些如下的代码 services.AddAuthentication(options => { options.Defau ...

  2. Serilog 记录日志

    Serilog 记录日志 Serilog是.net里面非常不错的记录日志的库,另外一个我认为比较好的Log库是NLog. 在我个人的asp.net web api 2 基础框架(Github地址)里, ...

  3. Java总结——常见Java集合实现细节(1)

    Java提高——常见Java集合实现细节(1) 2018年04月18日 15:07:35 阅读数:25 集合关系图 Set和Map set代表一种集合元素无序.集合元素不可重复的集合 map代表一种由 ...

  4. P1540 机器翻译 模拟

    题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...

  5. ref:web 防止SQL注入方法

    ref:https://blog.csdn.net/beidou321/article/details/6482618 小结:spring采用JdbcTemplate来操作sql,一般不要自行拼接sq ...

  6. 跟厂长学PHP7内核(六):变量之zval

    记得网上流传甚广的段子"PHP是世界上最好的语言",暂且不去讨论是否言过其实,但至少PHP确实有独特优势的,比如它的弱类型,即只需要$符号即可声明变量,使得PHP入手门槛极低,成为 ...

  7. 深入理解指针—>结构体里的成员数组和指针

    单看这文章的标题,你可能会觉得好像没什么意思.你先别下这个结论,相信这篇文章会对你理解C语言有帮助.这篇文章产生的背景是在微博上,看到@Laruence同学出了一个关于C语言的题,微博链接.微博截图如 ...

  8. 【BZOJ-3532】Lis 最小割 + 退流

    3532: [Sdoi2014]Lis Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 704  Solved: 264[Submit][Status] ...

  9. vue 直接改变数组数据不刷新

    因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 直接用索引设置元素,如 vm.items[0] = {}: 修改数据的长度,如 vm.items.length = 0. 为 ...

  10. Fiddler可以支持Websocket抓包了

    今天试了一下,Fiddler已经可以支持客户端Websocket抓包了,并且查看的方式也非常方便. websocket作为一个标准的应用层的协议,在CS端程序用起来也比传统的tcp协议方便了,比较常见 ...