Android的矢量图也就是Vector Drawable在项目里的普及率其实已经很高了。但我发现很多人在用的时候基本是从设计资源网站直接下载一个XML丢进drawable目录能用就行对里面的pathData、viewport、group这些概念并不深究。这本身没什么问题可一旦遇到要改图标颜色、做动画、或者处理兼容性崩溃时就有点抓瞎了。这篇文章我想从工程落地的角度把Vector这套东西彻底掰开揉碎讲一遍不光是讲它能干什么重点讲它内部是怎么工作的、在什么场景下该用、什么场景下别硬用。1. Vector Drawable到底解决的是什么问题1.1 从“切图地狱”到“一个XML走天下”在Vector出现之前Android适配不同屏幕密度的图标是个挺烦人的事情。设计师交付一个图标通常得给出mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi五套不同尺寸的PNG每套都得手动切。如果后续图标要改颜色哪怕是纯色图标从灰色改成蓝色也得重新导一套图。而且五套图放到APK里体积也会相应增大图标一多包体直接膨胀。Vector Drawable的思路是从根源上绕开这个问题它本质是一个用XML描述的矢量图形由路径path和几何形状组成。因为它是数学描述不是像素点阵所以无论缩放到多大都不会失真并且理论上只需要一个文件就能适配所有屏幕密度APK体积也能因此瘦身。拿我自己的项目举例以前光底部导航栏的五个图标五套密度加起来差不多有近200KB的PNG换成Vector之后五个XML加起来不到10KB。不光是省空间换主题色的时候改一行tint属性就能全局变色这在深色模式适配里简直太关键了。1.2 和iOS那边的SVG对照理解如果你开发过iOSVector Drawable在思路上可以简单类比成CoreGraphics里的矢量绘制但更贴近的其实是SVG的一小部分子集。Android的Vector Drawable遵循的是自身定义的VectorDrawable XML语法并不是直接把SVG文件拿来用。Android Studio虽然内置了SVG转Vector的工具但转换过程会把SVG里的一些高级特性丢弃掉只保留path、group这些基础结构。理解这一点很重要因为很多人指望把设计给的SVG原封不动变成Android文件结果发现转换后丢东西了就开始骂工具不行。实际上这更像是“矢量能力的一个受控子集被放进了Android平台”局限是有意设计的为了换取在低端设备上的解析效率。简单列一下Vector Drawable的定位替代小尺寸图标类的PNG比如工具条图标、按钮图标、列表项图标。支持主题换色tint这是PNG做不到的。可以做Path动画比如菜单图标变化成关闭图标的过渡动画。不适合承载大尺寸复杂插画和照片级图像。2. Vector XML的内部结构一行行拆给你看2.1 一个典型Vector文件的完整构成随手打开一个Vector Drawable里面其实就三个核心层级vector、group、path。下面我写一个实际项目里的例子用它来讲比空谈概念有用得多vector xmlns:androidhttp://schemas.android.com/apk/res/android android:width24dp android:height24dp android:viewportWidth24 android:viewportHeight24 group android:namearrowGroup android:pivotX12 android:pivotY12 android:rotation0 path android:namearrowPath android:fillColor#FF000000 android:pathDataM5,4 L19,4 A2,2 0 0,1 21,6 L21,18 A2,2 0 0,1 19,20 L5,20 A2,2 0 0,1 3,18 L3,6 A2,2 0 0,1 5,4 Z / /group /vector这里有几个参数经常有人搞混我分开说android:width和android:height这个定义的是Vector在布局里的实际显示尺寸单位是dp。android:viewportWidth和android:viewportHeight这个定义的是一个虚拟画布坐标系。所有的pathData里的坐标都基于这个虚拟画布来写并不对应实际像素。两者之间的关系是什么说穿了很简单Vector会先按照viewport坐标系把图形画出来然后再等比缩放到width和height指定的实际尺寸里。比如viewportWidth24width24dp那pathData里的1个单位就等于1dp如果width改成48dp图形就变成两倍大小但pathData不用改。很多新手直接改width和height发现图形变形了就是因为没理解上面这层缩放逻辑——viewport的比例和width/height的比例不一致时图形会被拉伸。2.2 pathData语法速成看懂M、L、C、A这些命令pathData里的字符串才是整个Vector的灵魂它用的是类似SVG path的语法包含了一系列绘图命令MmoveTo把画笔移动到某个坐标。LlineTo画一条直线到指定坐标。C/S三次贝塞尔曲线及其平滑版本。A圆弧。Z闭合路径把终点和起点连起来。H/V水平线、垂直线。这里最需要注意的坐标体系矢量坐标的0,0点默认在画布左上角X轴向右增大Y轴向下增大。这和我们在数学课上学到的直角坐标系不一样Y轴是反的。我在刚接触的时候经常因为Y轴方向问题画出来的形状上下颠倒。举个例子画一个从左上角到右下角的斜线path android:pathDataM0,0 L24,24 android:strokeColor#FF000000 android:strokeWidth1 /再看一个带圆弧的例子这个在画弹窗箭头之类的图形时经常出现path android:pathDataM10,0 L14,0 A4,4 0 0,1 18,4 L18,10 Z android:fillColor#FFFFFF /这里A4,4 0 0,1 18,4的含义是绘制一个半径x为4、半径y为4的圆弧最终到达18,4。中间的0 0,1分别代表旋转角度、large-arc-flag、sweep-flag。大弧标记为0表示画小弧为1表示画大弧。sweep-flag为1表示顺时针方向。说实话手写pathData是件挺痛苦的事正常开发中一般不需要完全手写。我的实际操作方式是能找现成图标库的直接抄复杂图形用SVG转Vector工具只有简单的几何图形才手写。但看懂pathData依然很重要因为后面要在Android Studio里预览、调坐标、做动画时看不懂就别想改了。2.3 group标签的真正价值动画和整体变换很多教程都把group一笔带过但它其实是做动画的关键角色。group可以看作一个容器可以把多个path包起来统一做变换而且支持三组变换属性rotation旋转角度需要配合pivotX和pivotY指定旋转中心。scaleX/scaleY缩放同样围绕pivot点进行。translateX/translateY平移。比如我想做一个加载态箭头图标——整组图标先旋转90度再让其中的某个path透明度渐变就可以这样组织group android:namerotationGroup android:pivotX12 android:pivotY12 android:rotation0 path android:namearrow android:fillColor#FFFF0000 android:pathData... / path android:namecircle android:fillColor#FF00FF00 android:pathData... / /group做动画时ObjectAnimator就能直接去操作rotationGroup的rotation属性完全不需要代码里手动做矩阵变换。这里有一个关键细节在动画中如果只写了android:rotation的起始值那pathData里的坐标是以viewport原点0,0为默认旋转中心的。如果图标不是从原点开始的动画会表现为围绕左上角转圈非常诡异。所以用group做旋转时必须显式设置pivotX和pivotY尤其是当图标中心不在0,0附近的时候。3. 项目落地从静态引用到动态换色3.1 最普通的用法ImageView的src和background如果是纯展示用途Vector可以像普通Drawable一样放进drawable目录然后ImageView android:layout_width48dp android:layout_height48dp android:srcdrawable/ic_arrow_forward /这种用法最省心但有个很容易被忽略的地方如果你的图片是纯色图形强烈建议不要给path写死颜色而是统一用tint来做着色。比如ImageView android:layout_width48dp android:layout_height48dp android:srcdrawable/ic_arrow_forward app:tint?attr/colorControlNormal /为什么推荐这种做法因为Vector的path里是可以写死fillColor的但写死就失去了换色的灵活性。比如同一个图标在普通按钮里是灰色在主要按钮里是白色。如果写死颜色就得复制两份Drawable文件。用tint配合主题属性一份Vector就能全局适配深色模式、品牌主题切换全都跟着主题走。3.2 用tint实现深色模式自动适配深色模式是一个典型的Vector发挥优势的场景。如果你用的是PNG方案通常是准备两套不同颜色的图放到drawable-night目录。但用Vector加上tint之后想在不同主题下展示不同颜色只需要在主题里定义颜色属性即可。举个例子定义一个主题属性style nameAppTheme parentTheme.MaterialComponents.DayNight item nameiconColorcolor/icon_color_light/item /style然后在values-night里把iconColor覆盖为深色模式的颜色style nameAppTheme parentTheme.MaterialComponents.DayNight item nameiconColorcolor/icon_color_dark/item /style布局里所有用到图标的地方都统一写ImageView android:layout_width32dp android:layout_height32dp android:srcdrawable/ic_settings app:tint?attr/iconColor /这样深色模式下所有图标自动变色不用复制任何一份图片文件。这是Vector Drawable最实用的工程价值之一。3.3 动态创建VectorDrawable与代码修改有些场景需要在代码里动态修改图标的颜色或路径形状。VectorDrawable本身虽然是Drawable的子类但直接改pathData在代码里操作比较绕正常做法有两个第一种是用DrawableCompat.setTint()val drawable AppCompatResources.getDrawable(context, R.drawable.ic_search) DrawableCompat.setTint(drawable, Color.BLUE) imageView.setImageDrawable(drawable)第二种是针对自己做主题化换色的场景直接使用androidx.core.graphics.drawable.DrawableCompat包装后设置不同的TintList。需要提醒的是如果你用getDrawable直接拿到的VectorDrawable在某些机型上可能还没有完全初始化直接用setTint偶发失效。稳妥的做法是通过AppCompatResources.getDrawable来加载这是一个长期和这种问题打交道后踩坑总结出来的经验。4. 兼容性Vector在旧系统上的深水区4.1 为什么5.0以下的设备表现不一样Vector Drawable是Android 5.0API 21引入的也就是说在Android 5.0以下的设备上系统本身不认识Vector这个Drawable类型。如果你直接把Vector放到src里跑在4.4的设备上表现很可能是直接崩溃或者是显示不出来。这个问题的标准解法是引入AndroidX的兼容库配合vectorDrawables.useSupportLibrary开关。基本上在build.gradle里这样做android { defaultConfig { vectorDrawables.useSupportLibrary true } }然后布局里使用app:srcCompat而不是android:srcImageView android:layout_width48dp android:layout_height48dp app:srcCompatdrawable/ic_arrow_forward /在有了AppCompat的前提下这个属性会在运行时把Vector转换成兼容的Drawable对象处理从而让旧系统也能正常显示。4.2 兼容库的边界哪些地方会失效这里要说一个很多老开发都会踩的坑app:srcCompat只在ImageView这类View上有效但如果你把Vector用在通知栏图标、桌面快捷方式图标、或者其他系统组件里兼容库是帮不上忙的。因为通知栏图标和桌面图标都是系统进程去渲染的和app进程无关系统进程不认识Vector。所以这些场景必须老老实实提供PNG或者用Adaptive Icon的方式来做启动图标。另外如果用app:srcCompat加载Vector在RecyclerView的item里频繁创建、回收的话性能上会比直接用PNG差一些。原因在于Vector的绘制过程是Path解析加Canvas绘制多了一步XML解析和Path构建的开销。如果列表每屏有几十个图标一直在滚动性能敏感场景会发现掉帧。所以我的经验判断是图标数量多且变动频繁的滚动列表优先考虑用IconFont或者干脆用PNG。工具条、设置页、按钮、空状态等静态展示场景用Vector非常划算。4.3 Vector在低版本系统上加载的内存差异有必要澄清一个经常被误传的说法Vector不一定会让内存变小。在Android 5.0以上VectorDrawable的绘制机制其实是先按viewport尺寸栅格化成一个Bitmap再把这个Bitmap绘制到Canvas上。如果你把Vector的显示尺寸设置得特别大比如一个24dp的资源被拉到了480dp展示它所占据的像素内存其实和一张480dp的Bitmap差不多。这就解释了为什么有些场景用Vector反而会卡——把一个小图标无限放大会触发很大的位图分配。正确的做法是Vector适合在它尺寸附近使用不适合做超大尺寸的图形。真想做大尺寸的可变图形应该考虑让绘制管线直接基于Path处理或者使用GPU相关技术而不是简单地把Vector拉伸。5. 进阶玩法矢量动画与状态切换5.1 AnimatedVectorDrawable的组成结构Vector真正的杀手级应用是AnimatedVectorDrawable。它能把几个Vector之间做属性动画常见的效果是菜单按钮从三条横线变成关闭的X。它的核心是三个文件起始的Vector Drawable。一个objectAnimator的XML。一个animated-vector的XML把前两者关联起来。下面给出一个极简的例子。起始图标是一个汉堡菜单图标三条横线vector xmlns:androidhttp://schemas.android.com/apk/res/android android:width24dp android:height24dp android:viewportWidth24 android:viewportHeight24 path android:nametopBar android:pathDataM4,7 L20,7 android:strokeColor#FF000000 android:strokeWidth2 / path android:namemiddleBar android:pathDataM4,12 L20,12 android:strokeColor#FF000000 android:strokeWidth2 / path android:namebottomBar android:pathDataM4,17 L20,17 android:strokeColor#FF000000 android:strokeWidth2 / /vector动画XML这里让顶部横线移动到中间位置并旋转45度objectAnimator xmlns:androidhttp://schemas.android.com/apk/res/android android:duration300 android:interpolatorandroid:interpolator/fast_out_slow_in propertyValuesHolder android:propertyNamepathData android:valueFromM4,7 L20,7 android:valueToM4,12 L20,12 / /objectAnimator注意pathData动画有个强约束起止路径的数据结构必须完全一致命令数量、命令类型、参数个数都要一一对应。比如起始路径用了ML目标路径也必须是ML不能一个用M一个用C否则动画会直接失败。然后把它们关联起来animated-vector xmlns:androidhttp://schemas.android.com/apk/res/android android:drawabledrawable/ic_menu target android:nametopBar android:animationanimator/move_top_bar_to_middle / /animated-vector使用时把这个AnimatedVectorDrawable设给ImageView然后代码里启动val drawable imageView.drawable as AnimatedVectorDrawable drawable.start()想要真正做菜单到关闭的完整动画通常还需要第二条路径让middleBar淡出、让bottomBar向中间移动组合起来才自然。完整的过渡可以用animated-vector里多个target标签一起声明。5.2 AnimatedVectorDrawable在应用中的实际形态在Android 8.0API 26之后Android原生还支持把多个pathData动画组合到一个animated-vector里并且可以直接在XML里写属性动画。但考虑到很多项目minSdk还在21或23兼容方案通常还是通过androidx.vectordrawable库里的AnimatedVectorDrawableCompat来处理代码用法基本不变。这里有个实际经验如果用AnimatedVectorDrawableCompat记得在ImageView.setImageDrawable()后再拿drawable强转因为setImageDrawable内部可能会做兼容包装拿到的类型不完全是你给进去的那个。踩过一次之后我再也不直接强转setImageDrawable传进去的对象了。6. 什么时候别用Vector以及性能层面的取舍6.1 大图和复杂图形的性能困境Vector并非全能前面也提到了。如果是一个复杂的插画pathData可能包含几百个命令、上千个坐标点。每次绘制都相当于重新解析并执行一遍这些命令在低端手机上绘制开销会非常明显。这种情况下PNG或者WebP反而是更好的选择因为它们是预栅格化的不需要重复几何计算。另一个问题是内存。就像前面讲的Vector最终绘制时会栅格化成一个Bitmap这个Bitmap的大小与Vector实际显示的尺寸成正比。如果你把Vector放到一个很大的区域比如做成占位图或者全屏背景那么它在内存里可能是一张非常大的位图。对比同尺寸的PNG后者在解码后也有一个固定的Bitmap开销但因为PNG不用额外做Path解析第一帧加载时体验会更好。因此实际项目里我的原则是图标类优先Vector。插画、复杂背景、头像、照片压缩图继续用位图格式。超大尺寸图形用硬件加速层的方案或者直接用OpenGL系方案而不是Vector硬撑。6.2 Vector在RecyclerView中的卡顿陷阱有个比较普通的场景我踩过坑一个列表项里有三个Vector图标全部在item最左侧列表中有几百个item。滚动起来偶尔掉帧当时以为是布局层级太多后来发现问题出在Vector的解析和绘制上。原因是每项创建时都要解析XML生成Path对象滚动时又不断有新的item被创建解析和绘制都跑在UI线程。优化方式主要有几种把小图标缓存成静态Drawable用StateListDrawable等复用避免运行时重复解析。如果动态换色需求不高直接把Vector预先栅格化成Bitmap用Bitmap代替Vector显示。提高RecyclerView的复用能力减少item重建频率。说这些并不是劝退Vector而是让大家清楚它更适合用在什么位置。静态页面、设置页、工具条、各种状态图标Vector是绝佳选择高频滚动的列表里就要多留个心眼了。7. 实操中经常会踩到的几个细节坑7.1 关闭硬件加速导致Vector完全无法显示是的你没看错Vector和硬件加速有绑定关系。在API 21以下如果关闭了硬件加速VectorDrawable在某些设备上会直接不显示。虽然这种组合现在很少见了但如果你维护的是一个老项目minSdk低又对某些组件调用了setLayerType(View.LAYER_TYPE_SOFTWARE, null)就要注意排查是不是这个原因导致图标莫名其妙消失了。如果确认是这个原因有两个办法一是把图标从Vector换成位图二是想办法避开对支持Vector的那个View关闭软件绘制。实际操作中我一般只对有特殊绘制需求的View单独关闭硬件加速而不是全局关闭。7.2 路径数据不一致导致动画崩溃pathData动画对命令一致性要求很严格。我在早期做动画时为了达到“看起来像在变形”的效果给起始路径用了MC结束路径用了ML逻辑上我认为图形是同一条线结果运行时直接抛异常。后来我学到的经验是设计Path动画时必须保证起止路径的命令序列完全一样每个命令的参数数量也一样。如果实在做不到就退一步做透明度交叉过渡或者旋转、位移动画来弥补。所有动画要提前做运行时验证不要只在Android Studio预览里看静态结果。7.3 主题换色和Tint叠加导致颜色异常另外一件小事当你在布局里既给ImageView设置了srcCompat又设置了backgroundTint或者给同一个Drawable通过代码设置了多个Tint最后看到的颜色很可能不是你想要的那个。Tint是会叠加生效的也就是说先给Drawable设置了一个半透明Tint再设置第二个Tint时第二个会盖在第一个上面视觉上出现偏色。所以我一般建议换色只在一处处理要么在XML里统一通过app:tint要么在代码里用DrawableCompat.setTintList不要混用。8. 最后说一点关于工具链的体验开发Vector时我的主力工具还是Android Studio自带的Vector Asset。可以从Material Icon库里直接选现成图标也可以导入本地的SVG。这个工具会在导入时自动做SVG到Vector的转换并帮你在res/drawable下生成XML。但有一点要留意这个转换器对于简单的线性图标效果很好一旦SVG里包含了滤镜、渐变、剪裁路径这类复杂特性转换后的效果往往不理想甚至会丢失部分内容。遇到这种情况我通常会让设计师把图形简化成基础形状或者直接用位图方案代替。如果你需要批量处理图标我也建议写一个简单的脚本用命令行工具批量把SVG转成Vector XML顺道统一viewport尺寸、统一命名规范。这在大项目里很实用毕竟手改几十个XML文件耗时又容易出错。Vector Drawable本身不复杂复杂的是在什么场景下用它、什么场景下换掉它、遇到不兼容时怎么改。项目里真正吃透Vector这套逻辑之后图标适配这类事的效率会明显提升希望这篇内容对你有实际帮助。