矢量图
Android 应用的不断发展带来了安装包过大的尴尬,而 Android 之前一直都不支持矢量图形,是引起尴尬的一个重要原因。其实 Android 绘制界面时也是通过各种类似矢量图形命令操作完成的,所以 Android 最终在 Lolliop 引入矢量图形既是大势所趋,也是水到渠成的一件事情。矢量图有很多标准,Android 支持的是 SVG 标准(可缩放矢量图形 Scalable Vector Graphics)。但不是全量支持,准确的说 Android 支持的是 SVG 标准中 Path 相关的部分。 SVG 是通用的矢量图标准,我们可以很轻易的从 Photoshop 之类的软件导出想要的图形。导出的文件后缀是 *.svg ,这个文件的内容是文本格式的,用 txt 文件查看就可以打开,其内部是一系列遵循 SVG 规范的命令列表。
svg 转换为 xml-
UI 设计师提供 svg 格式的图形,当然我们可以使用浏览器打开如下图:
-
矢量图形转为 .xml 文件定义在 res/drawable 下,在 XML 文件中的根标签是 。
-
ImageView 通过设置 src or background 属性使用啦。
1. < vector> :根标签,表示一个矢量动画 支持的属性:
- android: name:定义矢量图形的名称
- android: width:定义 Drawable 的宽度,支持所有 dimension 单位,一般使用 dp。drawable 的宽度不一定是最终绘制宽度,比如给 ImageView 设置 backgroud 则 Drawable 绘制宽度等于 ImageView 的宽度,给 ImageView 设置 src 则在 ImageView 大于 Drawable 宽度时,Drawable 绘制宽度等于自己定义的宽度。
- android: height:定义 Drawable 的宽度,支持所有 dimension 单位,一般是 dp。其它同上。
- android: viewportWidth:定义矢量图形的视图( viewport )空间的宽度,viewport 是一个虚拟的 canvas,后面所有的 path 都在该坐标系上绘制。坐标系左上方为(0,0),横轴从左向右,纵轴从上到下。横轴可视区域就是 0 ~ viewportWidth。
- android: viewportHeight:定义矢量图形的可视区域的高度。其它见上。[0,0]~[viewportWidth,viewportHeight]定义了虚拟 canvas 的可视区域。
- android: tint:作为染色(tint)的色彩应用到 drawable 上。默认不应用 tint。
- android: tintMode:tint 颜色的 Porter-Duff 混合模式,默认是 src_in。
- android: autoMirrored:如果 drawable 布局方向是 RTL(right-to-left) 时,drawable 绘制是否需要镜像化(镜像化就是绕自身x轴中线旋转180度)。
- android:alpha:drawble 的透明度,取值 0~1
2. < path>:定义一个路径,一个路径即可以表示一块填充区域也可以表示一根线条。 支持的属性:
- android: name:定义路径的名称
- android: pathData:定义路径的数据,路径由多条命令组成,格式与 SVG 标准的 path data 的 d 属性完全相同,路径命令的参数定义在 viewport 视图的坐标系。
- android: fillColor:指定填充路径的颜色,一般是一个颜色值,在 SDK24 及以上,可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画,新的属性值会覆盖此值。如果不指定,则 path 不被填充。
- android: strokeColor:指定路径线条的颜色,一般是一个颜色值,在 SDK24 及以上,可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画,新的属性值会覆盖此值。如果不指定,则 path 的线条不会绘制出来。
- android: strokeWidth:指定路径线条的宽度,基于 viewport 视图的坐标系(不要 dp/px 之类的结尾)。
- android: strokeAlpha:指定路径线条的透明度。
- android: fillAlpha:指定填充区域的透明度。
- android: trimPathStart:取值从 0 到 1 ,表示路径从哪里开始绘制。0~trimPathStart 区间的路径不会被绘制出来。
- android: trimPathEnd:取值从 0 到 1 ,表示路径绘制到哪里。trimPathEnd~1 区间的路径不会被绘制出来。
- android: trimPathOffset:平移可绘制区域,取值从 0 到 1 ,线条从(trimPathOffset+trimPathStart绘制到trimPathOffset+trimPathEnd),注意:trimPathOffset+trimPathEnd 如果超过1,其实也是绘制的的,绘制的是0~trimPathOffset+trimPathEnd-1 的位置。
- android: strokeLineCap:设置线条首尾的外观,三个值:butt(默认,向线条的每个末端添加平直的边缘), round(向线条的每个末端添加圆形线帽), square(向线条的每个末端添加正方形线帽。)。
- android: strokeLineJoin:设置当两条线条交汇时,创建什么样的边角(线段连接类型):三个值:miter(默认,创建尖角),round(创建圆角),bevel(创建斜角) 。
- android: strokeMiterLimit:设置设置最大斜接长度,斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 “miter” 时,miterLimit 才有效。
实例:一辆车