Lollipop(Android 5.0)开始, Android引入了对矢量图的支持, 但并不支持svg这种矢量图片格式, 而是以VectorDrawable的方式来实现矢量图的效果.我这里总结一下VectorDrawable的使用及使用中需要注意的地方.

如何使用

结构

VectorDrawable也是Drawable的一个直接子类, 像其它Drawable那样通常情况下是在xml中定义, 它对应的xml标签是<vector/>, 基本结构如下:

1
2
3
4
5
6
7
8
9
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">

<path
android:fillColor="#FF000000"
android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>

</vector>

上面的xml对应的下面这张矢量图:

下面对上面的一些参数作一下解释:

  1. vector是VectorDrawable对应的根标签
  2. android:widthandroid:height对应矢量图的实际大小(矢量图是可以无限大, 但通常情况下一个图片都应该有一个原始大小, 假如你将此VectorDrawable作为一个ImageView的src, ImageView的大小都设置为wrap_content, 则ImageView对应的实际大小就是这里设置的大小)
  3. android:viewportWidthandroid:viewportHeight是指当前Drawable对应的虚拟Canvas的大小, 之所以说是虚拟的是因为实际上并不存在这样一个Canvas, 又之所以需要这个值是因为在<path/>标签中的路径数据要基于具体的坐标系来绘制.
  4. <path/>标签对应路径信息, 这里的path与我们自定义绘制图形时用的Path原理一样, 就是记录一些绘图操作, 具体对应其中的pathData.PathData中对应的路径描述符号不需要我们去记, 通常情况下由绘图软件生成svg图片再从svg文件中提取.

如何引用

VectorDrawable与其它Drawable一样可以被用作View的背景, ImageView的res.

1
2
3
4
5
6
7
8
9
10
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:src="@drawable/done_animate_vector_drawable"/>

<View android:id="@+id/view"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/done_animate_vector_drawable"/>

如何向后兼容

上面说了VectorDrawable是Android 5.0之后才增加的, 那如何作兼容呢? 实际上这里有两种方式:

  1. 不需要添加任何依赖包, Gradle在编译时会自动生成Vectordrawable对应的位图资源(如果你支持的最低sdk小于api21, 若大于等于21就不存在兼容性问题了)
  2. 使用Support Library 23.2+(不会自动生成位图)

方式1: 会在打包APK时自动生成对应的位图资源, 在低版本的手机上运行时会自动引用位图, 在5.0及以后的手机上运行时会自动引用Vectordrawable. 这种方式的优点是不需要开发者去显式的做任何设置, 缺点是同时打包了位图与矢量图资源APK包会变大. 生成哪种分辨率下的位图资源可以通过下面的Gradle配置指定:

1
2
3
defaultConfig {
vectorDrawables.generatedDensities = ['hdpi','xxhdpi']
}

方式2: 不会自动生成位图, 在最终的APK中只存在一份VectorDrawable, 所以不会存在APK包增大的问题, 但需要在使用时作一些调整:
a. 首先需要在你的build.gradle配置文件中增加如下配置:

1
2
3
4
5
android {  
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}

上面的配置的作用是强制gradle在编译时不自动生成兼容低版本的位图资源.

b. 在引用Vectordrawable资源时使用app:srcCompat取代android:src, 若你还想将此Vectordrawable资源用作View的背景,遗憾的是这里没有一个类似的app:backgroundCompat方法, 你只能通过代码来设置

1
2
3
4
Resources resources = context.getResources(Resources, int, Theme);
Theme theme = context.getTheme();
Drawable drawable = VectorDrawableCompat.create(resources, R.drawable.vector_drawable, theme);
view.setBackground(drawable);

今年初Google发布了Android Support Library 23.2其中主要增加了对VectorDrawableAnimateVectorDrawable的支持.VectorDrawable可以被兼容到Android2.1, AnimateVectorDrawable可以被兼容到Android3.0.

如何编写VectorDrawable

直接手写去编写VectorDrawable是非常困难的, 大部分时候得到VectorDrawable的方式应该都是先使用矢量绘图软件生成SVG图片, 再通过一些工具将SVG转化为VectorDrawable.下面是两个比较推荐的:

  1. Android Studio 内置的Vector Asset Studio
  2. svg2android

Vector Asset Studio 的使用可以参考这里, 而svg2android是一个网站直接上传你的svg图片就能生成Vectordrawable.
注意: 工具可能不能支持绘图软件生成的svg的所有特性, 最终生成的Vectordrawable的最好在真机上预览一下看是否能接受.

注意点

1. 并不是所有的图片都适合使用VectorDrawable

A vector drawable is appropriate for simple icons. The material icons provide good examples of the types of images that work well as vector drawables in an app. In contrast, many app launch icons do have many details, so they work better as raster images.

上面是官方的原话, 大概意思就是说VectorDrawable只适合于像material icons这样的简单图片, 并不适合细节过于复杂的图片(原因也是很好理解的, 基于矢量图的原理, 它难以反应色彩层次丰富的图像效果).

2. VectorDrawable只支持部分的SVG特性
所以你在将SVG转化为VectorDrawable时, 需要注意一下, 不支持的部分特性被丢失后生成的VectorDrawable你是否能接受.

3. Support VectorDrawable 是有限制的.
假设你的应用最低兼容到android4.0, 你通过Support Library 23.2来兼容VectorDrawable, 若你在其它一些集合类型的Drawable中引用VectorDrawable在Android5.0以后没问题, 但在android5.0之前却会出现运行时异常, 虽然你使用了Support包, 这点需要特别注意.看个例子:

一个VectorDrawable

ic_check_circle_black_24dp.xml
1
2
3
4
5
6
7
8
9
10
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="44dp"
android:height="44dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">

<path
android:name="line"
android:fillColor="#FF000000"
android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>

</vector>

在一个InsetDrawable里引用

vector_wrapper.xml
1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_check_circle_black_24dp">

</inset>

上面的vector_wrapper.xml是一个普通的InsetDrawable, 但其中引用了一个VectorDrawable, 如果你在应用中使用了此InsetDrawable在Android5.0及以后的版本中不会有问题, 但在之前的手机上就会出现运行时异常.
官方对这点也是有说明的:

参考

  1. Add Multi-Density Vector Graphics
  2. Android Support Library 23.2
  3. 23.2.0 set vector drawable as background in 4.X————————————————————
    版权声明

    文章版权归本人所有,如需转载需在明显位置处保留作者信息及原文链接 !