android使用svg制作自定义温度计控件

效果图,可以设置液体百分比

1,为什么要选择SVG?主要有这几方面的原因:

1,SVG 是可伸缩的矢量图形,在浏览器中改变尺寸,其图形质量不会有所损失。

2,相比其它位图,SVG图像文件更小,可压缩性更强。

3,SVG 可以被记事本等阅读器、搜索引擎访问。

4,SVG 图像中的文本是可选的,同时也是可复制的。

5,SVG 可以制作成整体或局部动画。

2.标签

简单介绍一下标签

M = moveto(M X,Y) :将画笔移动到指定的坐标位置

L = lineto(L X,Y) :画直线到指定的坐标位置

H = horizontal lineto(H X):画水平线到指定的X坐标位置

V = vertical lineto(V Y):画垂直线到指定的Y坐标位置

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线

S = smooth curveto(S X2,Y2,ENDX,ENDY):三次贝赛曲线

Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线

T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射前面路径后的终点

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线

Z = closepath():关闭路径

有几点要注意:

坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下。

所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系

指令和数据间的空格可以省略

同一指令出现多次可以只用一个

3.Android中使用SVG

draw文件点击new -> Vector Asset 


Local SVG file: 可以选择本地的SVG文件

Material Icon: 可以选择自带的SVG

Resource name: 当然就是xml文件的名字

Size: 图片大小

Override defalut size from Material Design: 勾选后替代默认的大小

Opactity: 透明度

Enable atuo mirroring for RTL layout: 用于镜像显示

4,自定义view加载svg

5.0以上

var vectorDrawable: Drawable = context.getDrawable(R.drawable.terpretation_icon); vectorDrawable.setBounds(0, 0, icon_w, icon_h);

5.0以下 使用兼容包

1,引入新的兼容库 compile 'com.android.support:appcompat-v7:23.2.0'或者比这还新的

2,`build.gradle 中加入以下一行代码

defaultConfig {

        vectorDrawables.useSupportLibrary = true    

}

var dr:VectorDrawableCompat? = VectorDrawableCompat.create(resources,R.drawable.terpretation_icon,null);

dr?.setBounds(0,0,icon_w,icon_h)


5,项目地址

    https://github.com/zhumingwei/svgdemo

你可能感兴趣的:(android使用svg制作自定义温度计控件)