矢量图在iOS中的应用细节

对于矢量图的调研, 最开始是始于对其占用iOS App的空间的好奇。笔者好奇一个问题: 利用矢量图能不能帮助iOS App减少整体空间?

iOS其实在很早的时候就已经支持矢量图的应用(XCode 6时代开始支持), 只不过因为大部分开发者沿用了以前@1x、@2x、@3x格式图的习惯, 并没有一个地方专门普及使用矢量图。当然, 还有另外一个原因就是iOS对复杂的矢量图支持的不是很好。

本文并没有特别深入的技术点, 仅仅只是笔者做的几个实验的总结和矢量图基础使用的教程普及~

矢量图和iOS

关于矢量图在iOS中的使用早在15年2月就有一篇博文介绍了它的使用 - iOS使用矢量图的总结。笔者按照它的用法操作了一遍, 基本大同小异~ 针对该文章没有涉及到的一些细节, 笔者进行一定程度的补充。

iOS中矢量图的使用方法

笔者为了做一下简单的矢量图实验, 使用Sketch随意拖了一个星星出来并导出一个PDF。(实际上UI绘制矢量图的工具有很多很多, 这里不赘述。如果读者懒得自己去导出, 可以直接挪用)

XCode支持矢量图一定要放置在xcasset文件中才能够生效, 操作步骤如下:

拖拽提前制作的PDF进入XXX.xcassets中。
选择Image Set下的参数选项Scale Factors为Single Vector或Vector With Overrides
如果图形不在框框中, 拖入框框中(XCode某些版本不能自动对号入座)

iOS矢量图使用

Vector With Overrides是Single Vector的增强, 可以在放置完矢量图之后继续放置@1x、@2x和@3x的png格式的图片。放置的png会优先覆盖矢量图, 未放置对应倍率图片的设备才会使用矢量图对应生成的图片。

矢量图在iOS中的应用原理

iOS对矢量图的支持其实只是一种方便开发者的选择, 本质上在XCode编译的阶段矢量图会自动生成对应Target的@1x，@2x和@3x的png格式图像。在iOS实际运行中使用的图片实际上已经是png格式的图片了~

iOS下矢量图工作原理

通俗的理解 - 放置在xcassets里的矢量图会自动根据设备编译成对应尺寸的图片, 如果是Generic iOS Device则会自动生成全尺寸的同名图片。

PS: 自动生成的@1x图会和矢量图的原始尺寸保持一致。

下图为利用ThemeEngine打开的基于Generic iOS Device编译出来的Assets.car文件

ThemeEngine下car文件

矢量图能否减少空间

回归到最初的问题, 到底使用矢量图能不能帮助iOS App减少空间呢?

笔者用简单粗暴的实验来对比说明, 步骤如下:

使用pdf原始文件编译生成通用IPA
从生成的IPA文件中提取Asset.car文件
利用iOS Image Extractor提取Asset.car文件
将提取出来的@1x、@2x、@3x放置回工程, 并删除原始pdf中重新编译
对比步骤1生成的car文件和步骤4生成的car文件大小

步骤一编译car大小(仅PDF) - 115KB
步骤四编译car大小(仅3张图) - 86KB
测试PDF尺寸 - 20KB

在iOS8.3以下, 相同压缩比例的条件下, 矢量图是无法帮助App减少空间。但是在iOS8.3以上, 利用xcassets可以避免多余的资源图片下载, 只下载对应的倍率的图片。因此, 严格意义下, 利用矢量图并不能帮助App节省空间。

其实笔者使用的简单粗暴的方式在苹果新的瘦身机制下是不成立的, 因为编译生成的最终包不一定就是设备最终安装的包。引用官方文档App Thinning中Slicing章节中的一段话:

In Xcode, specify target devices and provide multiple resolutions of images in the asset catalog.
You must use the asset catalog in order for resources to be sliced.

笔者未能完全参透这句话的意思, 只知道xcasset会根据不同的设备会有不同的解决方案, 但是不知道粒度会达到什么样的程度。笔者尝试过针对不同的模拟器编译, 只会生成对应的倍率图, 但是上传给App Store是通用格式的, 难道下载的过程中进行了一定的处理? 这个就需要一台越狱设备去验证了, 就靠各位读者大大了~

PS: 对iOS如何控制多余资源图片下载感兴趣的童鞋们, 可以找一台越狱设备, 将iOS 8.3以上的App给提取出来分析分析哈~ 记得分享哇~ \(^o)/

题外探究之提取原理

笔者在对比大小的时候使用的iOS Image Extrator。在使用过程中, 笔者对该工具的提取原理产生了那么一点点的好奇。笔者好奇xcasset的格式应该是封闭不开放的, 该工具是怎么从Asset.car中提取图片的, 难道该工具破解了Asset.car的格式?

既然iOS Image Extrator是开源的, 那么笔者就有必要去看一看究竟了~ iOS Image Extrator其实是基于开源库iOS Asset Extrator开发实现的, 核心提取的功能是在iOS Asset Extrator库下提取的, 笔者通过阅读其源码, 找到两个核心方法exportToDirectory:和exportThemeRendition:

通过阅读这两个方法的源代码可以了解到这个库的基本实现。exportToDirectory:方法有该库核心的提取图片的所有逻辑代码。而exportThemeRendition:可以看出该库支持的所有格式, 并且通过苹果内置的各个格式的Rendition类提取导出。

iOS Asset Extrator库本质上调用的是苹果的私有API。在该系列API中, CUICommonAssetStorage负责存储Asset资源的关键key, CUICatalog是承载了具体资源图片信息的登记目录。

回归主题, 开源库底层既然是苹果API, 那么就基本是一个黑盒子了。笔者既不能从暴露的API中分析出car的格式, 又不能判断iOS设备是否在执行中解压, 只好放弃~

总结

矢量图严格意义上并不能帮助减少App的空间, 但是却使用起来非常的方便, 建议使用。iOS本质上并不支持矢量图, 但是在编译阶段会将矢量图转化成目标设备对应的尺寸图, 同时会利用xcassets的特性在iOS8.3以上设备下支持部分资源下载, 带到包瘦身的效果。每次都要让UI给多个尺寸的图, 肯定没有给一张方便吧? 当然, 前提是UI的童鞋是基于矢量图工具制作的图片的前提下~

参考文献

知乎 - iOS对矢量图片的支持如何?
iOS使用矢量图的总结
App Thinning
ThemeEngine
iOS Image Extrator
iOS Asset Extrator