Vector Asset Studio的使用

作者 Vivian陈薇 日期 2016-03-09
Android Vector Asset
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 Module和Res 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文件，这样包会小很多。

¥打赏5毛

分享文章
{% if theme.mob_share.enable %} {% endif %}
FEATURED TAGS
Android Vector Asset
FRIENDS
{% if theme.mob_share.enable %} {% endif %}