野火🔥

生命如野火,骄傲而顽强

从开发角度,比较三种iOS图标矢量化方案

1、SVG转Obj-C code

2、PDF vector

该矢量方案为xcode6的新特性,具体使用方法为

1 将图片保存成.pdf,图片尺寸就使用@1x时的大小

2 在Images.xcassets中新建该矢量图Image Set,在“attributes inspector”栏中,将Types设为Vectors,这是,@1x、@2x、@3x的位置变成一个“Universal”

3 将.pdf的矢量图拖拽到“Universal”位置

4 其它地方即可以直接使用该Image Set,使用方法和其它的PNG文件一样。

该方法优点:

1、使用和PNG一致,具有和使用PNG文件相同的读取速度和内存占用

2、使用灵活,管理方便

3、虽然是xcode6的新特性,但编包之后能够向下支持到iOS5(iOS4没条件做测试),通用性好

4、呈现效果好,与使用PNG文件没有什么区别

缺陷:

安装包占用较大,未能解决在增加@3x图片后体积膨胀的问题
从模拟器的Application目录比较增加该.pdf文件和未增加的空间占用:

pic

上图是未添加,占用32k。

pic
上图是增加后的占用,发现新增了一个Assets.car的文件,大小大概是原.pdf文件的16倍,可以估算@2x文件大小是@1x文件的4倍,@3x文件是@1x文件的9倍,在加上源文件,基本就是16倍的样子,可以确认,xcode在编译pdf vector的方式就是生成了@1x,@2x,@3x三个文件。

下面比较下ipa的安装包大小:

优点:

1、和png一样,也就是和过去一样,使用上和性能上没有差别

2、UI同学在制图时,一次制作,适配多种

缺点:

空间占用。微信现在已经不保存@1x的图片,

3、Font Icon

该方案即使用iOS的NSAttributedString对自定义的字体进行渲染,并通过其drawInRect方法将其切割并转成UIImage压入Image栈中。这种方法实现的步骤:

1、制作字体图标svg文件,将文件拖入http://iconfont.io/下进行字体的转换,会生成ttf文件

2、做映射表,映射关系为:“图标在程序中的命名”---“图标在字体文件中的ASCII编码”---“图标在app中的@1x宽度”---“图标在app中的@1x高度”---“图标在app中颜色”
3、将ttf导入到app的应用字库,在代码中根据图标属性生成对应的NSAttributedString,并转成对应尺寸的UIImage

评测:

1、启动速度

测试原因:由于加入了ttf文件,并在每个icon绘制过程中先后经过了生成NSAttributedString和drawInRect两个方法,速度和直接从contentfile中读取png文件肯定存在差别

测试方法:渲染相同大小(30*30)样式的8个UIImageView,并add到viewcontroller中,计算总的时间(每个数据共3组样本,取平均值,时间单位为ms)

测试机型 使用PNG 使用字体 ttf字体load进入内存后
5c真机 10.939 16.469 10.325
6plus模拟器 32.511 5.382 2.585

单独load 9k共19个图标的字体用时(ms):8.234, 5.604, 5.486, 5.473, 5.863

字体load进入内存后,8张30*30的@2x图标load用时(ms):7.206, 7.548, 7.084, 7.266, 7.438

8张30*30的@2x 的png文件load用时(ms):5.87, 5.97, 5.757, 6.75, 6.35

上图中,5c会读取@2x的图片,发现在字体文件load进入内存后,速度和使用png基本一致

6plus会读取@3x的图片,因此预想中字体的效果会略好一些,但好真么多确实没想到,怀疑模拟器和真机之间存在差异,等有真机在做测试

2、内存占用

测试原因:除了和使用png文件一样,在内存中加入image文件外,方法会加入ttf字体文件。而且在渲染image过程中,会生成NSAttributedString并做截
屏,这会可能会造成瞬间的内存增加

下表采用xcode默认的memory测试,单位MB

测试机型 使用PNG(单位:MB) 使用字体(单位:MB) 界面空白(单位:MB)
5c真机 2.4 2.3 2.1
6plus模拟器 19 18.7 18.4

下表为在代码中获取task_basic_info得到,单位MB

空白页面 仅load进入字体 load进入字体和字体的View 仅load进入png文件
7.21 7.24 7.32 7.45

结论:

  • 大小9k共19个图标的字体进入内存会占用30k
  • 8张用字体绘制的30*30的@2x UIImageView占用内存80k
  • 8张30*30的@2x png文件绘制的UIImageView内存占用230k

预想中由于多load字体文件会造成内存更大,实测反而更小,@3x下更加明显。可能由于contentfile中的资源文件会有一些冗余数据,而用字体绘制出来的更纯净,反而更小

3、磁盘占用

测试原因:使用png文件会有@1x @2x @3x文件,造成安装包较大,而字体只有一个ttf文件

字体为19个图标的字体,大小9K,压缩后5k

png文件一共16个,对应8个图标(没有@1x),大小为22k,其中@3x为14k,@2x为8k

总结
方法优点:

缺点: