Problem
面对iOS手机不同的分辨率,Xcode很早推出了让同一图片使用@1x, @2x 出iPhone6Plus系列后还有 @3x 来针对不同分辨率将图片分成不同缩放比例的解决办法,但往往一个项目堆积了大量@1x,@2x,@3x图片,让图片资源管理起来相当麻烦,并且针对一个特定的iOS设备使用对应size的素材,而其它不同尺寸的素材都算白白占用了App容量.
Solution
现在Xcode 6以上, 就支持在Asset catalog使用PDF矢量图片来代替原来的不同分辨率的图片.
原来素材图标都是这样

现在素材图标可以是这样的

Begin
首先制作矢量图标,然后用默认的原始尺寸以PDF的格式将图标导出.

然后选择Xcode的指定工程的Assets,将矢量图标直接拖入资源列表中

选中这个刚添加的imageAsset,然后选择Xcode右边工具栏的"Show Attributes inspector",设置Scale Factor
参数选择为 Single Vector

然后该imageAsset就变成了这样

最后将pdf图标拖到所空出来的矩形区域内, 就over了! 剩下的事就交Xcode了.

End
这样之后不论是在IB使用该icon, 还是代码中获取,图片的尺寸都和之前的方式一样 let icon = UIImage(named: "star")
系统就会在编译期间根据设备来自动缩放成适合的矢量位图,这样就算iOS以后有了要求4x图标尺寸也不用担心了,直接一张PDF矢量图标就能代替那些1x, 2x, 3x…Nx相同内容的素材, 也不用管理相同内容却不同尺寸的图片, 极大了提高了生产力.
网友评论