ShapeDrawable做放大镜效果
引用一下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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vue Router路径切换过渡动画
- 听说Mysql你很豪横?-------------深入解析mysql数据库中的索引!
- 听说Mysql你很豪横?-------------深入解析mysql数据库中的事务!
- Struts2笔记
- Vue Router实现路由嵌套单页面展示
- 排障集锦:九九八十一难之第九难!mysql备份恢复路上的小插曲
- jQuery限制复选框checkbox的选中次数
- jQuery点击切换增加和删除class类
- Vue使用props和emit父子组件通信
- 听说Mysql你很豪横?-------------呕心沥血深入解析mysql备份与恢复!!!
- 排障集锦:九九八十一难之第十难!mysq备份恢复,Could not read entry at offset *: Error in log format or read error.
- Vue使用ref父子组件通信
- 听说Mysql你很豪横?-------------MySQL5.7主从同步
- 听说Mysql你很豪横?-------------MySQL5.7主从复制!读写分离!
- Vue兄弟组件传值