用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实现图片旋转叠加、错位叠加、阴影、按钮指示灯的更多相关文章
- js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能
html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...
- HTML5图片旋转
HTML5图片旋转 首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下: 1,webstrom 2,google chrome浏览器 3,cocos2dx-Js ...
- iOS 图片旋转方法
iOS 图片旋转方法 通过 CGImage 或 CIImage 旋转特定角度 UIImage可通过CGImage或CIImage初始化,初始化方法分别为init(cgImage: CGImage, s ...
- iOS transform解决连续多次旋转缩放,实现图片旋转缩放效果
一.需求 实现imageView的缩放旋转效果,一般有两种方式: 1.底层加scrollview,利用scrollview的属性实现.(推荐这种,这是我比较后发现的,手势做缩放旋转会有点弊端) 2.利 ...
- 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)
using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...
- PHPThumb处理图片,生成缩略图,图片尺寸调整,图片截取,图片加水印,图片旋转
[强烈推荐]下载地址(github.com/masterexploder/PHPThumb). 注意这个类库有一个重名的叫phpThumb,只是大小写的差别,所以查找文档的时候千万注意. 在网站建设过 ...
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- iOS_UIImage_图片旋转
一.目的: 有时候我们获得到的图片我们不是我们想要的方向,需要对图片进行旋转.比如:图片旋转90度180度等. 二.实现过程. 1.获取到该UIImage. 2.开启上下文. 3.上下文的具体操作. ...
- Rotating Image Slider - 图片旋转切换特效
非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...
- JQuery插件让图片旋转任意角度且代码极其简单
引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...
随机推荐
- Codeforces 379F New Year Tree 树的直径的性质推理
New Year Tree 我们假设当前的直径两端为A, B, 那么现在加入v的两个儿子x, y. 求直径的话我们可以第一次dfs找到最远点这个点必定为直径上的点, 然而用这个点第二次dfs找到最远点 ...
- 应用Mongoose开发MongoDB(3)控制器(controllers)
控制器的基本构成与如何通过路由调用 控制器中通过建立函数并导出,实现前端对数据库的查询.新建.删除与修改的需求,并使之可以在路由中调用,完成API的封装.本文着重于结构之间的关系,具体问题解决方法将在 ...
- 2015 ACM Amman Collegiate Programming Contest 题解
[题目链接] A - Who Is The Winner 模拟. #include <bits/stdc++.h> using namespace std; int T; int n; s ...
- 012.Zabbix的IT服务
一 IT服务简介 IT服务能体现宏观度量和管理基础设施的总体情况的可用性,从而体现总体的趋势,发现并解决IT基础设施暴露的问题. 二 IT服务的添加 2.1 IT services--services ...
- 006.Zabbix添加监控主机
一 配置步骤和流程 Zabbix完整的监控配置流程可以简单的描述为: Host groups(主机组)---->Hosts(主机)---->Applications(监控项组)----&g ...
- 010.MySQL-Keepalived搭配脚本04
vim /etc/keepalived/check_MySQL.sh #!/bin/bash pkill keepalived
- canvas入门级小游戏《开关灯》思路讲解
游戏很简单,10行10列布局,每行每列各10盏灯,游戏初始化时随机点亮其中一些灯,点击某盏灯,其上下左右的灯及本身状态反转,如果点击前是灭着的,点击后即点亮,将所有灯全部点亮才算过关.游戏试玩: 下面 ...
- 常用工具(Windows版本)
为原有版本修改为markdown后的更新,这个编辑器真心不错,只需要把原来喜欢的表格改成列表即可. 代码工具 代码管理工具 SourceTree:支持windows和mac跨平台使用的git图形化客户 ...
- [转]Splay算法
首先声明,本教程的对象是完全没有接触过splay的OIer,大牛请右上角. 先看一道题目: skydec有n个数,每次他都会把一些数放进一些盒子里,由于skydec太傻×,所以他不能判断数的大小,现在 ...
- Qt界面UI之QML初见(学习笔记四)
拖了大半年,今天终于有更新了...我自己都不好意思,最近太忙了! 今天讲一下:QML语法 一 概述 QML是一种专门用于构建用户界面的编程语言,它允许用户构建高性能,具有流畅特效的可视化应用程序,QM ...