从Android 8.0(API 26)之后,Android开始引入矢量图,矢量图的常用格式是svg。在Android 8.0之前只使用位图(格式是png)作为Android的图片素材,但是因为Android设备分辨率的多样性,导致位图素材需要适配,矢量图的引用可以使Android 8.0(包括Android 8.0)之后的版本不再需要适配,因为矢量图不会失真,所以可以达到自适应的效果。
(1)位图和矢量图的概念
位图又叫点阵图或像素图,计算机屏幕上的图是由屏幕上的发光点(即像素)构成的,每个点用二进制数据来描述其颜色与亮度等信息,这些点是离散的,类似于点阵。多个像素的色彩组合就形成了图像,称之为位图。
矢量图又叫向量图,是用一系列计算机指令来描述和记录一幅图,一幅图可以解为一系列由点、线、面等到组成的子图,它所记录的是对象的几何形状、线条粗细和色彩等。生成的矢量图文件存储量很小,特别适用于文字设计、图案设计、版式设计、标志设计、计算机辅助设计(CAD)、工艺美术设计、插图等。
位图图像与矢量图像相比更容易模仿照片似的真实效果。位图图像的主要优点在于表现力强、细腻、层次多、细节多,可以十分容易的模拟出像照片一样的真实效果。由于是对图像中的像素进行编辑,所以在对图像进行拉伸、放大或缩小等到处理时,其清晰度和光滑度会受到影响。位图图像可以通过数字相机、扫描或PhotoCD获得,也可以通过其他设计软件生成位图图像,也称点阵图像或绘制图像,是由称作像素的单个点组成的。当放大位图时,可以看见构成图像的单个图片元素。扩大位图尺寸就是增大单个像素,会使线条和形状显得参差不齐。但是如果从稍远一点的位置观看,位图图像的颜色和形状又是连续的,这就是位图的特点。矢量图像,也称绘图图像,在数学上定义为一系列点与点之间的关系,矢量图可以任意放大或缩小而不会出现图像失真现象 。
(2)阿里图库的使用
阿里图库的官网如下:
我在阿里图库中随意找了一张素材,如下:
图片.png
点击“SVG下载”一张矢量图备用。点击复制SVG获取矢量图数据如下:
(3)Vector Asset的使用
首先,鼠标选中app模块,或者app的子文件(夹),File-->New-->Vector Asset,进入Vector Asset界面,界面如下:
图片.png
矢量图的制作有两种素材类型:Clip Art(剪切图),Local file(本地SVG文件或者PSD文件)
【Clip Art(剪切图)】
Name:xml文件名称
Clip Art:可以选择AS自带的图标
图片.png
Size:设置矢量图的大小
Color:设置矢量图的颜色
Opacity:设置不透明度
Enable auto mirroring for RTL layout:为RTL布局启用自动镜像
【Local file(本地SVG文件或者PSD文件)】
Name:xml文件名称
Size:设置矢量图的大小
Opacity:设置不透明度
Enable auto mirroring for RTL layout:为RTL布局启用自动镜像
Path:选择本地矢量图(比如svg图片)
从本地导入上面预留好的svg文件,如下:
图片.png
导入android之后会生成ic_setting.xml文件,这个文件里面的代码也是自动生成的,代码如下:
android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
以上代码就是矢量图在Android中的表示了。
(4)了解SVG
SVG 即可缩放矢量图形 (Scalable Vector Graphics) ,是使用 XML 来描述二维图形和绘图程序的语言,其定义遵循 W3C 标准。
在 2003 年 1 月,SVG 1.1 被确立为 W3C 标准。使用 SVG 的优势在于:
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
SVG 的 元素用于定义一些复杂的图形,其定义在 W3 SVG Path。
可用的命令如下:
名称
解释
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,large-arc-flag,sweep-flag,X,Y)
弧线
Z = closepath()
关闭路径
以上所有命令均允许小写字母。大写的字母是基于原点的坐标系(偏移量),即绝对位置;小写字母是基于当前点坐标系(偏移量),即相对位置。
在Android 中,矢量图的绘制由pathData完成。
[本章完...]