Android SVG支持

VectorDrawable 与 SVG

Android 5.0(Lollipop, API 21)后,新增了标签,以VectorDrawable的形式支持SVG类型矢量图形(SVG本质为XML标记描述的图形)。
※ Android不直接支持SVG图形文件

SVG文件(XML)对应的VectorDrawable资源封装格式为:

 
     
         
     
 

※ 通常由SVG文件转换为VectorDrawable,而非手工录入

  1. 是 VectorDrawable 对应的根标签
  2. android:widthandroid:height对应矢量图的实际参考尺寸(实际可根据容器尺寸无损缩放,但此值将作为容器(ImageView)的 wrap_content 参考尺寸),基于加载性能考虑,Google推荐限定在 200x200dp 以内,一般与下面的viewportWidthviewportHeight成比例定义
  3. android:viewportWidthandroid:viewportHeight是指当前Drawable对应的Canvas的大小,用于为标签中的路径数据提供绘制位置的参考坐标系及绘制范围
  4. 标签对应路径信息, 这里的path与我们自定义绘制图形时用的Path原理一样, 就是记录一些绘图操作, 具体对应其中的 pathData。
  5. android:fillColor为默认黑色(#FF000000)时,在View容器内将使用tint颜色取代,否则将呈现为android:fillColortint的混合颜色。

路径的路径描述指令含义表:

M = moveto 相当于 android Path 里的moveTo(),用于移动起始点 
L = lineto 相当于 android Path 里的lineTo(),用于画线 
H = horizontal lineto 用于画水平线 
V = vertical lineto 用于画竖直线 
C = curveto 相当于cubicTo(),三次贝塞尔曲线 
S = smooth curveto 同样三次贝塞尔曲线,更平滑 
Q = quadratic Belzier curve quadTo(),二次贝塞尔曲线 
T = smooth quadratic Belzier curveto 同样二次贝塞尔曲线,更平滑 
A = elliptical Arc 相当于arcTo(),用于画弧 
Z = closepath 相当于closeTo(),关闭path

大写代表绝对位置, 小写代表相对位置

官方标准定义细则参考:SVG Paths Definition - W3C

SVG图标平台

【Iconfont】阿里妈妈矢量图标平台

SVG编辑软件

Inkscape
跨平台开源矢量图形编辑软件,免费 + 三平台通用,支持直接编辑XML数据
类似的软件还有Illustrator、CorelDraw等


SVG 转 VectorDrawable

  • 使用 Vector Asset Studio 转换,在res目录右键菜单上选择 New > Vector Asset
  • 通过开源项目 svg2android 在线转换

※ 初始化VectorDrawable将消耗更多CPU资源,Google推荐将矢量图最大尺寸限定在 200x200dp 以内


VectorDrawable 向后兼容

对于Android 5.0之前的设备,有两种方式兼容VectorDrawable资源:

1. 利用 Vector Asset Studio 工具动态生成位图

Android Studio 内置一个名为 Vector Asset Studio 的工具,在低版本SDK上编译APK期间,针对VectorDrawable脚本自动生成一组PNG位图资源BitmapDrawable,取代矢量图形(在5.0及以后的手机上运行时会正常引用VectorDrawable)。

需要配置build.gradle

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

※ 自动生成PNG时,所支持的VectorDrawable元素子集

2. 添加 Support Library 23.2+ 兼容包

Support Library 23.2+ 包中包含VectorDrawableCompatAnimatedVectorDrawableCompat兼容类,用于代码中桥接为BitmapDrawable及其动画支持,其中Drawable最低SDK为Android 2.1,动画最低SDK为Android 3.0

※ 兼容包要求使用Gradle 2.0或以上版本,并且不支持VectorDrawable嵌套引用,不支持直接解析为VectorDrawable类型,也不再编译期生成PNG位图

build.gradle配置如下:

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

dependencies {
  compile 'com.android.support:appcompat-v7:23.2.0'
}

使用矢量素材时,需要在Activity中调用以下方法:

AppCompatDelegate.setCompatVectorFromResourcesEnabled(true)

layout控件可选用AppCompatImageButtonAppCompatImageView,普通checkbox似乎不支持矢量素材。

兼容包在矢量资源引用、代码调用时,存在一定限制

  • 在 ImageView 等引用 VectorDrawable 资源时,需要使用app:srcCompat取代android:src
  • 代码中使用setImageResource()指定资源 id 时,无需�更改代码
  • 将 VectorDrawable 用于 View 背景时,需要通过以下代码设定:
Resources resources = context.getResources(Resources, int, Theme);
Theme theme = context.getTheme();
Drawable drawable = VectorDrawableCompat.create(resources, R.drawable.vector_drawable, theme);
view.setBackground(drawable);

代码中需要进行Drawable的实现类型转换时,可使用以下代码段执行:

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

矢量动画

使用矢量图可进行特殊的动画绘制,如形态变换、动态绘图等。

主要步骤

定义矢量资源及其关联动画 XML 脚本

  1. 创建矢量图形资源VectorDrawable,并在需要动画特效的子元素上使用属性android:name给定任意动画对象名
  2. 创建Animator属性动画脚本,可使用ObjectAnimatorAnimatorSet,对VectorDrawable的特定元素属性进行动画控制
  3. 创建AnimatedVectorDrawable,作用是连接VectorDrawableAnimator,组合为单一动画型Drawable对象
  4. 创建好的AnimatedVectorDrawable不能直接用于 ImageView,需要通过代码设定,并显式开始执行动画
官方文档
  • XML脚本具体定义方式可参考 开发手册 AnimatedVectorDrawable
  • 开发手册 内联复合XML资源 提供了通过 AAPT 系统插件,实现单一XML脚本混合定义的方式,需要声明命名空间 xmlns:aapt="http://schemas.android.com/aapt"

在线实时输出 XML 脚本

Google工程师开发的开源项目 AndroidIconAnimator,可实现在线实时构造、编辑、预览 VectorDrawable 动画,并导出XML脚本,使用教程可参考 Qiita帖子

代码设置

创建好的 VectorDrawable 动画资源,需要通过代码方式加载到 View 容器内,并指定执行动画

使用原生支持的代码设定(5.0 LOLLIPOP, API 21)

ImageView imageView = (ImageView) findViewById(R.id.imageView);
AnimatedVectorDrawable vectorDrawable = (AnimatedVectorDrawable) getResources().getDrawable(AnimatedVectorDrawableRes, Theme);
imageView.setImageDrawable(vectorDrawable);
vectorDrawable.start();

使用 Support Library 时的动画设置

矢量动画要求最低SDK为Android 3.0,并且不支持路径类型的变换

ImageView imageView = (ImageView) findViewById(R.id.imageView);
AnimatedVectorDrawableCompat drawableCompat = AnimatedVectorDrawableCompat.create(context, AnimatedVectorDrawableRes);
imageView.setImageDrawable(drawableCompat);
drawableCompat.start();
  • 可执行的特有动画效果,可参考 VectorDrawable 元素属性列表
  • 所有属性中文解释可参考 Android矢量图形与矢量动画
  • 其中一种动效实例,可参考博文 Android使用SVG矢量动画

特别介绍几个特殊属性:

  • 元素:

    • rotation:旋转角度,取值为360角度,valueType=floatType
    • pivotX / pivotY:旋转中心坐标,以viewport为参照基准
  • 元素:

    • pathData:矢量图形的绘制路径数据位点,可动画形变为另一种图案,要求动画参数值必须拥有相同长度参数及一致的路径描述指令,并且 ObjectAnimator 中android:valueType="pathType"(Support 包不支持该数据进行变换动画)
    • trimPathStart:从路径起始点开始向后裁剪(擦除)的相对距离,取值 [0, 1],,0 表示路径起始点,1 表示路径结束点,可实现逐步消退、绘制动效,android:valueType="floatType"
    • trimPathEnd:从路径结束点开始向前裁剪的相对距离,取值 [0, 1],0 表示路径起始点,1 表示路径结束点
    • trimPathOffset:从路径起始、结束点开始裁剪的相对距离,取值 [0, 1],0 表示不裁剪,1 表示该路径完全不绘制
  • 元素:遮罩路径、反蒙版路径,该路径范围内的元素才会真正进行绘制,作用于当前所在的内定义在其后面的所有元素

    • pathData:定义遮罩路径,动画操作方式与相同

pathData 形变动画参考

  • 理解Android VectorDrawable中的pathData命令
  • PathMorphing with AnimatedVectorDrawables in Android
  • 【VectAlign】pathData自动算法变换对齐工具

已知bug:

  1. 标签在使用时会发生错误警告requires API level 21,不影响兼容包的编译运行
  2. 放置于animator目录内的Animator脚本,需要在中手工引用@animator/资源id(自动提示补全菜单失效)
  3. 使用动画时,ImageView 不能使用android:tint属性,否则会导致Mutate() is not supported for older platform异常崩溃
  4. 通过 AAPT 标签使用单一脚本混合定义时,Android Studio 会出现识别错误提示
  5. 矢量动画通过关联 Property Animation 打包为 Drawable 方式实现,对属性的动态修改将影响所有同一 Drawable 资源产生的对象(Drawable 状态共享机制),并且兼容包不支持 mutate() 调用(状态分离,兼容包内要求API 23以上),实际上代码暂时无法访问矢量元素内部属性(如 pathData 等)

其他参考文献及工具链接集合:

  • VectorDrawable
  • Iconfont 矢量图标平台
  • AndroidIconAnimator 矢量动画XML生成器
  • VectAlign pathData自动对齐工具
  • Android的矢量图支持 - VectorDrawable
  • Android中使用SVG矢量图

你可能感兴趣的:(Android SVG支持)