[译] Xcode 6的“矢量图支持”是如何工作的

翻译自这个答案

矢量图在Xcode 6中如何使用

  1. 以一倍图(@1x)大小将图片保存成PDF格式的矢量图
  2. Images.xcassets文件中新建一个Image Set
  3. attributes inspector中,将Type设为Vectors
  4. 将pdf文件拖拽到All, Universal
  5. 这样,你就可以通过名称(指images.xcassets对此图片起的名称)来指向这个图片,跟使用png图片一样。

矢量图在Xcode 6是如何工作的

“矢量图支持”在Xcode 6中可能跟大家想象的有所出入,因为很多人想到矢量图的时候,他们想到的是那些可以被扩大,缩小,但是还能显示得完好的图片。然而,Xcode 6对于iOS的矢量图支持并不完全,所以它的做法有点不同。

为了消除这种疑惑,在此说明矢量图系统的工作流程如下:

  • 它只是一个转换系统,它在 构建期 通过你的png文件生成@1x.png, @2x.png, @3x.png

比如,假定你有44×44大小的foo.pdf矢量图,在 构建期 ,它会生成如下的文件:

  1. foo@1x.png 44 x 44
  2. foo@2x.png 88 x 88
  3. foo@3x.png 132 x 132

这意味着:

  • 你不能更改图片的大小(指的是把一个44×44的图片塞进100×100的ImageView里)。它只有在44×44的大小中才看起来对。原因是(iOS)并没有实现矢量图的完全支持。这些矢量图的作用只是让你保存image assets的时候帮你节省时间。如果你已经用了某些工具,比如一个Photoshop脚本,这些pdf文件的作用只是对未来可能出现的情况的适配(比如如果苹果要求对iOS 9进行@4x图片的支持的时候),以及减少文件的管理。
  • 你必须将所有的矢量图保存为@1x大小的PDF格式。这样做才能保证UIImageView有正确的固有大小(intrinsic content size)

苹果这么做的原因是:

  • 能对老版本的iOS向下支持。
  • 运行时缩放矢量图是一个计算密集型的工作,但是通过上面这种方式,就不会对性能造成任何影响。

No Comments

Post a Comment