ShapeDrawable做放大镜效果
引用一下ShapeDrawable的类的说明:
|
? |
||
|
|
? |
android.graphics.drawable.ShapeDrawable |
Class Overview
A Drawable object that draws primitive shapes. A ShapeDrawable takes a Shape object and manages its presence on the screen.
If no Shape is given, then the ShapeDrawable will default to a RectShape.
It can be defined in an XML file with the <shape> element.
file location:
res/drawable/filename.xml
The filename is used as the resource ID.
compiled resource datatype:
Resource pointer to a ShapeDrawable.
resource reference:
In Java: R.drawable.filename
In XML: @[package:]drawable/filename
Android中,利用ShapeDrawable来绘制图像,ShapeDrawable可以设置画笔的形状。通过geiPaint方可以得到Paint对象。
利用ShapeDrawable在代码中画图像的步骤如下:
1. 实例化ShapeDrawable对象,并说明绘制的形状;
a) 形状可以是矩形,椭圆,线和环(例如椭圆:)
- myShapeDrawable = new ShapeDrawable(new OvalShape());
- //得到画笔Paint对象并设置其颜色
- myShapeDrawable.getPaint().setColor(Color.GREEN);
- myShapeDrawable.setBounds(70,250,150,280);
- //绘制图像
- myShapeDrawable.draw(canvas);
- myShapeDrawable = new ShapeDrawable(new OvalShape());
- //得到画笔Paint对象并设置其颜色
- myShapeDrawable.getPaint().setColor(Color.GREEN);
- myShapeDrawable.setBounds(70,250,150,280);
- //绘制图像
- myShapeDrawable.draw(canvas);
2. 得到画笔对象并设置其颜色;
3. 利用setBounds方法来设置图像显示的区域;
4. 在画布上绘制图像。
当然,也可以使用XML文件来定义画图,就是利用XML文件来定义一个图像。
具体语法如下:
- <?xml version="1.0" encoding="utf-8"?>
- <shape
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape=["rectangle" | "oval" | "line" | "ring"] >
- <corners
- android:radius="integer"
- android:topLeftRadius="integer"
- android:topRightRadius="integer"
- android:bottomLeftRadius="integer"
- android:bottomRightRadius="integer" />
- <gradient
- android:angle="integer"
- android:centerX="integer"
- android:centerY="integer"
- android:centerColor="integer"
- android:endColor="color"
- android:gradientRadius="integer"
- android:startColor="color"
- android:type=["linear" | "radial" | "sweep"]
- android:usesLevel=["true" | "false"] />
- <padding
- android:left="integer"
- android:top="integer"
- android:right="integer"
- android:bottom="integer" />
- <size
- android:width="integer"
- android:height="integer" />
- <solid
- android:color="color" />
- <stroke
- android:width="integer"
- android:color="color"
- android:dashWidth="integer"
- android:dashGap="integer" />
- </shape>
- <?xml version="1.0" encoding="utf-8"?>
- <shape
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape=["rectangle" | "oval" | "line" | "ring"] >
- <corners
- android:radius="integer"
- android:topLeftRadius="integer"
- android:topRightRadius="integer"
- android:bottomLeftRadius="integer"
- android:bottomRightRadius="integer" />
- <gradient
- android:angle="integer"
- android:centerX="integer"
- android:centerY="integer"
- android:centerColor="integer"
- android:endColor="color"
- android:gradientRadius="integer"
- android:startColor="color"
- android:type=["linear" | "radial" | "sweep"]
- android:usesLevel=["true" | "false"] />
- <padding
- android:left="integer"
- android:top="integer"
- android:right="integer"
- android:bottom="integer" />
- <size
- android:width="integer"
- android:height="integer" />
- <solid
- android:color="color" />
- <stroke
- android:width="integer"
- android:color="color"
- android:dashWidth="integer"
- android:dashGap="integer" />
- </shape>
AndroidSDK中定义的规则:
elements:
<shape>
The shape drawable. This must be the root element.
attributes:
xmlns:android
String. Required. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".
android:shape
Keyword. Defines the type of shape. Valid values are:
|
Value |
Desciption |
|
"rectangle" |
A rectangle that fills the containing View. This is the default shape. |
|
"oval" |
An oval shape that fits the dimensions of the containing View. |
|
"line" |
A horizontal line that spans the width of the containing View. This shape requires the <stroke> element to define the width of the line. |
|
"ring" |
A ring shape. |
矩形"rectangle",椭圆"oval",线"line"和环"ring"
当是线"line"的时候一定要定义<stroke> element
The following attributes are used only when android:shape="ring":
下面的属性只有在android:shape="ring"时才在有意义
android:innerRadius
Dimension. The radius for the inner part of the ring (the hole in the middle),
as a dimension value or dimension resource.
android:innerRadiusRatio
Float. The radius for the inner part of the ring, expressed as a ratio of the ring's width.
For instance, if android:innerRadiusRatio="5", then the inner radius equals the ring's width divided by 5.
This value is overridden by android:innerRadius. Default value is 9.
android:thickness
Dimension. The thickness of the ring, as a dimension value or dimension resource.
android:thicknessRatio
Float. The thickness of the ring, expressed as a ratio of the ring's width.
For instance, if android:thicknessRatio="2", then the thickness equals the ring's width divided by 2.
This value is overridden by android:innerRadius. Default value is 3.
android:useLevel
Boolean. "true" if this is used as a LevelListDrawable. This should normally be "false" or your shape may not appear.
<corners>
Creates rounded corners for the shape. Applies only when the shape is a rectangle.
该属性只有android:shape="rectangle";才有意义
attributes:
android:radius
Dimension. The radius for all corners, as a dimension value or dimension resource.
This is overridden for each corner by the following attributes.
默认情况下四个角的半径,如果为0则表示直角
android:topLeftRadius
Dimension. The radius for the top-left corner, as a dimension value or dimension resource.
左上角的半径
android:topRightRadius
Dimension. The radius for the top-right corner, as a dimension value or dimension resource.
右上角的半径
android:bottomLeftRadius
Dimension. The radius for the bottom-left corner, as a dimension value or dimension resource.
左下角的半径
android:bottomRightRadius
Dimension. The radius for the bottom-right corner, as a dimension value or dimension resource.
右下角的半径
Note: Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded.
If you want specific corners to not be rounded, a work-around is to use android:radius to
set a default corner radius greater than 1, but then override each and every corner with the values you really want,
providing zero ("0dp") where you don't want rounded corners.
<gradient>
Specifies a gradient color for the shape.
该系列属性对线"line"没有意义。
attributes:
android:angle
Integer. The angle for the gradient, in degrees. 0 is left to right, 90 is bottom to top.
It must be a multiple of 45. Default is 0.
颜色的变化方式,0表示从左到右,90表示从下到上,45表示在从左到右和从下到上同时进行
发现该属性只有android:type="linear"才有用。
android:centerX
Float. The relative X-position for the center of the gradient (0 - 1.0). Does not apply when android:type="linear".
中心点在x方向上的值,其值为0-1.0
其x=x0+(x1-x0)*centerX.
当android:type="linear"时没有意义
android:centerY
Float. The relative Y-position for the center of the gradient (0 - 1.0). Does not apply when android:type="linear".
中间点在y方向上的值,其值为0-1.0
其y=y0+(y1-y0)*centerY.
当android:type="linear"时没有意义
android:centerColor
Color. Optional color that comes between the start and end colors, as a hexadecimal value or color resource.
中间点的Color
android:endColor
Color. The ending color, as a hexadecimal value or color resource.
终点的gradient颜色
android:gradientRadius
Float. The radius for the gradient. Only applied when android:type="radial".
中心园的半径,只有当android:type="radial"时有意义
android:startColor
Color. The starting color, as a hexadecimal value or color resource.
起始点gradient的颜色
android:type
Keyword. The type of gradient pattern to apply. Valid values are:
Value Description
"linear" A linear gradient. This is the default.线性
"radial" A radial gradient. The start color is the center color.发射型
"sweep" A sweeping line gradient.
gradient有两个或三个颜色值
startColor 中心区域的颜色
centerColor 中心区域的外环区域(中间)的颜色。它是可选的。
endColor 其他区域颜色
startColor和endColor的使用见实例2
startColor,centerColo和endColor的使用见实例4
android:useLevel
Boolean. "true" if this is used as a LevelListDrawable.
当为LevelListDrawable时其值为true否则为false
<padding>
Padding to apply to the containing View element (this pads the position of the View content, not the shape).
该属性用于设置ShapeDrawable的content区域的Padding。
ShapeDrawable的content区域用于确定他所在控件的content(通常是文本)的区域
attributes:
android:left
Dimension. Left padding, as a dimension value or dimension resource.
android:top
Dimension. Top padding, as a dimension value or dimension resource.
android:right
Dimension. Right padding, as a dimension value or dimension resource.
android:bottom
Dimension. Bottom padding, as a dimension value or dimension resource.
<size>
The size of the shape.
attributes:
android:height
Dimension. The height of the shape, as a dimension value or dimension resource.
该属性对线"line"没有意义。
android:width
Dimension. The width of the shape, as a dimension value or dimension resource.
Note: The shape scales to the size of the container View proportionate to the dimensions defined here, by default.
When you use the shape in an ImageView, you can restrict scaling by setting the android:scaleType to "center".
ShapeDrawable的大小
注意:当是线的时候<size>只有android:width属性意义了。
<solid>
A solid color to fill the shape.
attributes:
android:color
Color. The color to apply to the shape, as a hexadecimal value or color resource.
<solid>用(a hexadecimal value or color resource)来填充ShapeDrawable,这时gradient属性无意义
<stroke>
A stroke line for the shape.
attributes:
android:width
Dimension. The thickness of the line, as a dimension value or dimension resource.
android:color
Color. The color of the line, as a hexadecimal value or color resource.
android:dashGap
Dimension. The distance between line dashes, as a dimension value or dimension resource. Only valid if android:dashWidth is set.
android:dashWidth
Dimension. The size of each dash line, as a dimension value or dimension resource. Only valid if android:dashGap is set.
android:width表示边框线的宽度。边框是向里外同时扩展的。
android:color表示边框线的颜色
android:dashGap表示dash线之间的长度
android:dashWidth表示dash线的长度
注意:当android:shape="line"时必须定义<stroke>。这时ShapeDrawable的边框就只有一个边(line)
This layout XML applies the shape drawable to a View:
<TextView
android:background="@drawable/gradient_box"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
This application code gets the shape drawable and applies it to a View:
Resources res = getResources();
Drawable shape = res. getDrawable(R.drawable.gradient_box);
TextView tv = (TextView)findViewByID(R.id.textview);
tv.setBackground(shape);
举几个例子:
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <gradient
- android:startColor="#FF0000FF"
- android:centerColor="#FF00FF00"
- android:endColor="#FFFF0000"
- android:type="radial"
- android:gradientRadius="100"
- android:angle="90"/>
- <padding android:left="0dp"
- android:top="0dp"
- android:right="0dp"
- android:bottom="0dp" />
- <corners android:radius="0dp" android:topLeftRadius="0dp"/>
- </shape>
- 实例2
- drawable下的gradient_box.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <gradient
- android:startColor="#FF0000FF"
- android:endColor="#FFFF0000"
- android:type="sweep"
- android:angle="90"/>
- <padding android:left="0dp"
- android:top="0dp"
- android:right="0dp"
- android:bottom="0dp" />
- <corners android:radius="80dp" android:topLeftRadius="10dp"/>
- </shape>
- 实例3
- drawable下的gradient_box.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <gradient
- android:startColor="#FF0000FF"
- android:centerColor="#FF00FF00"
- android:endColor="#FFFF0000"
- android:type="sweep"
- android:angle="90"/>
- <padding android:left="0dp"
- android:top="0dp"
- android:right="0dp"
- android:bottom="0dp" />
- <corners android:radius="80dp" android:topLeftRadius="10dp"/>
- </shape>
- 实例4
- stroke的使用
- drawable下的gradient_box.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <gradient
- android:startColor="#FF0000FF"
- android:centerColor="#FF00FF00"
- android:endColor="#FFFF0000"
- android:type="radial"
- android:gradientRadius="100"/>
- <padding android:left="0dp"
- android:top="0dp"
- android:right="0dp"
- android:bottom="0dp" />
- <corners android:radius="10dp" android:topLeftRadius="0dp"/>
- <size
- android:width="150dp"
- android:height="150dp" />
- <stroke
- android:width="20dp"
- android:color="#FF0000FF"
- android:dashWidth="1dp"
- android:dashGap="1dp" />
- </shape>
- 实例5
- 椭圆
- drawable下的gradient_box.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="oval">
- <gradient
- android:startColor="#FF0000FF"
- android:centerColor="#FF00FF00"
- android:endColor="#FFFF0000"
- android:type="radial"
- android:gradientRadius="100"/>
- <padding android:left="0dp"
- android:top="0dp"
- android:right="0dp"
- android:bottom="0dp" />
- </shape>
- 实例6
- 线"line"的使用
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="line">
- <size android:width="300dp"/>
- <stroke
- android:width="10dp"
- android:color="#FF0000FF"
- android:dashWidth="1dp"
- android:dashGap="1dp" />
- </shape>
ShapeDrawable做放大镜效果的更多相关文章
- Unity中做放大镜 效果
孙广东 2015.8.16 事实上和 小地图都几乎相同了. 还是要借助 还有一个相机 目的: 这篇文章的主要目的是 要给你一个想法 怎样做放大境效果 . 在unity中能够简单的实现放大镜效果啊 ...
- 基于Jquery的商城商品图片的放大镜效果(非组件)
在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...
- 照着别人的demo自己试着做了个放大镜效果
原理: A:放大镜 B:小图片 C:大图片可视区域 D:大图片 鼠标的位置应该在放大镜的中央,所以鼠标位置为:clientX=A.offsetLeft()+B.offsetLeft+1/2*A.o ...
- 关于jQuery中实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- 原生js实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
- WPF设置VistualBrush的Visual属性制作图片放大镜效果
原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...
- 使用jquery实现放大镜效果
原文:使用jquery实现放大镜效果 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整 ...
随机推荐
- Android的四大组件及应用安装安全问题(4)
Android的四大组件及组件间通信 如果想对四大组件有深入的了解,那永远不要停留在一些条条干干的SDK API的认识,需要了解他的通讯,他的复用,他的边界问题,这样才会对四大组件有透明的认识. 四大 ...
- tomcat内存溢出解决,java.lang.OutOfMemoryError: PermGen space
今天遇到了一个java.lang.OutOfMemoryError: PermGen space异常问题,一直解决不了,根据网上修改了tomcat的配置文件,但是还是解决不了,最后是通过如下方式解决的 ...
- Thread Pools
许多程序会动态创建数十个设置上百个线程.举个例子,一个web服务器可能在每一个新到来的请求时创建一个新线程,然后在请求完成后将其终止. 然而,创建一个新线程将会带来一定的耗费:它需要在内核中创建自身必 ...
- 剑指Offer——网易笔试题+知识点总结
剑指Offer--网易笔试题+知识点总结 Fibonacci package cn.edu.ujn.nk; import java.util.ArrayList; import java.util.S ...
- MongoDb 用 mapreduce 统计留存率
MongoDb 用 mapreduce 统计留存率(金庆的专栏)留存的定义采用的是新增账号第X日:某日新增的账号中,在新增日后第X日有登录行为记为留存 输出如下:(类同友盟的留存率显示)留存用户注册时 ...
- 如果用一个循环数组q[0..m-1]表示队列时,该队列只有一个队列头指针front,不设队列尾指针rear,求这个队列中从队列投到队列尾的元素个数(包含队列头、队列尾)。
#include <iostream> using namespace std; //循环队列(少用一个空间)长度 #define M (8+1) typedef struct node ...
- Github上的Android项目介绍之ListViewAnimation(针对listView item的侧滑菜单)(1)
demo源码,需要可以下载 1.这是一个github开源项目,先去github上面下载,github下载地址. 2.将SwipeMenuListView项目,导入,然后新建项目如果要引用,要设置为相应 ...
- 08 BaseAdapter 和ListView总结
第八天 ListView 列表视图 一,特点: >垂直滚动列表,是ViewGroup(容器),列表项使用Adapter填充 二,属性 > android:divider="@dr ...
- Android初级教程以动画的形式弹出窗体
这一篇集合动画知识和弹出窗体知识,综合起来以动画的形式弹出窗体. 动画的知识前几篇已经做过详细的介绍,可翻阅前面写的有关动画博文.先简单介绍一下弹出窗体效果的方法: 首先,需要窗体的实例:PopupW ...
- Uva - 512 - Spreadsheet Tracking
Data in spreadsheets are stored in cells, which are organized in rows (r) and columns (c). Some oper ...