Vector Asset Studio的使用

作者 Vivian陈薇 日期 2016-03-09
Vector Asset Studio的使用

因为VectorDrawable中有path标签,里边的path data内容比较复杂,那么我们可以用Vector Asset Studio来帮助我们生成一下xml文件。

1.打开Vector Asset Studio

打开一个项目,在Android视图中,右击res文件夹,选择New->Vector Asset

因为这个要求Gradle的插件必须在1.5.0以上,如果提示要更新插件,那么就把你的插件更新到1.5.0以上。

2.导入一个Vector的图形

有两种方式,一种是添加一个material icon,另一种是导入一个SVG的文件。

2.1 添加material icon

在Vector Asset Studio的界面中,选择Material Icon,然后点击Choose,选择你要添加的图标。


之后你可以对文件名、尺寸、透明度、启动RTL布局自动镜像等作出修改,修改完成之后点击next,

那么什么时候要开启RTL布局镜像这个东西呢?

一般是在你需要把图片左右对换的情况下,举个例子:有一些语言是从右向左读的,如果你有一个箭头的icon,可能从左指向右,在从右向左读的这种情况中,可能要反过来,这种时候你就可以用到RTL了。

Note:如果你用的之前的旧项目,你可能需要在AndroidManifest里边加上android:supportsRtl=”true”。在5.0以上是支持自动镜像的,就不用手动添加了。


选择你的Target ModuleRes Directory,Target Module就不用多说了。 其中,Res Directory大概有几种选择:

  • src/main/res
  • src/debug/res
  • src/release/res
  • user-defined source

最后,点击Finish,就大功告成。

这时候,你会发现在你的app/src/main/res/drawable(如果选择的是第一个目录的话)文件夹里多了一个vector drawable的xml文件。

生成完之后,我们就要build我们的项目了,如果你的最小的API是Android 4.4(API 20)或者更小,Vector Asset Studio会自动生成PNG文件。你可以从app/build/generated/res/pngs/debug/文件夹中看到这些png文件。

2.2 导入SVG文件

1.在Vector Asset Studio界面中选择Local SVG file,导入本地的SVG文件。

2.之后的操作同上。
生成完Vector Drawable之后,我们就要把它添加到layout中来了,其实跟普通的drawable一样用。
有一点不同的是,如果你需要drawable资源的确切的类的时候,你可能要根据版本区分一下:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

如果想对Vector Asset Studio生成的xml文件作出修改的时候,需要注意版本的问题。
针对Android5.0(API 20)及以上的版本,Vector Asset Studio支持所有的Drawable和VectorDrawable的属性。
针对Android4.4(API 20)及以下的版本,Vector Asset Studio只支持以下的属性:

<vector>
android:width
android:height
android:viewportWidth
android:viewportHeight
android:alpha
<group>
android:rotation
android:pivotX
android:pivotY
android:scaleX
android:scaleY
android:translateX
android:translateY
<path>
android:pathData
android:fillColor
android:strokeColor
android:strokeWidth
android:strokeAlpha
android:fillAlpha
android:strokeLineCap
android:strokeLineJoin
android:strokeMiterLimit

而且,只有5.0及以上的版本才支持动态属性,举个例子:

android:fillColor="?android:attr/colorControlNormal"

打包方式

因为版本问题,你可以有两种打包方式:
1.包里边既有vector image文件,也有png文件,这种是最简单的方法
2.根据API版本打不同的包,5.0以上的里边去掉生成的png文件,这样包会小很多。


分享文章