在 Xcode 6 中使用矢量图( iPhone 6 置配 UI)

Posted Cocoa开发者社区

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在 Xcode 6 中使用矢量图( iPhone 6 置配 UI)相关的知识,希望对你有一定的参考价值。

点击上方“CocoaChina” 即可关注

ios应用程序是一个图像主导的产品。在开发一个应用程序时,你需要各种尺寸的图标,你需要为每个图像文件制作一个@1x尺寸和一个@2x尺寸。这样你的应用看上去才足够精美。但缺点是你必须单独生成这些文件。随着iPhone6iPhone6 Plus的到来,这个问题变得更加让人头疼:@3x 资源。


幸运的是,苹果在Xcode 6中提供了一些伟大的工具来管理这些资源。更好的是,这种方式也让你的应用程序能够运行在未来的iOS设备上打下了基础。工具之一是Xcode6iOS8支持以Storyboard(xib)作为Launch(启动)界面,让程序启动界面脱离图像的概念。另一个是Xcode 6具有了基于矢量图像(PDF文件)的编译能力。在这篇文章中,我们主要告诉你如何实现后者,以便节省你自己的时间。


WWDC411节的"什么是新的Interface Builder"中,讨论了-虽然很短-Xcode在构建时支持从量化的PDF构建PNG文件。我和大家分享一下这究竟怎么做到。


步骤1:用Illustrator制作PDFs矢量文件

首先,你要从Adobe Illustrator(或者其他你喜欢的矢量图绘制工具)导出你的应用程序需要的@1x大小的PDF图像,这很容易做:


1: 创建@1x资源规格的文档。

2: 选择一个路径保存你的新文件。

3: 在文件菜单中选择保存。

4: 记得保存时取消选中“保留Illustrator编辑功能”选项。


Illustrator导出的PDF文件将是一个可缩放的矢量图,完全可以扩展到@2x@3x分辨率。接下来让我们看看如何设置Xcode


步骤2:设置你的Xcode项目

为了使用这个功能,你需要一个Xcode的资源目录来管理你的图片。不用担心,你可以混合使用标准图像和XCAssets(资源目录)。请按照如下步骤设置Xcode使用矢量图像:


1: 如果你没有XCAsset文件,创建一个。如果你已经有一个XCAsset,那么打开他。
2:
从编辑菜单(右键)中选择“New Image Set”。
3:
在新出现的图像集合中,选择空白的图像集合,然后打开Utilities(右侧)面板。
4:
选择属性检查器(右侧面板中)
5:
在类型的下拉菜单中,选择“ Vectors”。
6:
这是图像设置的位置将变成一个空位,标有"All - Universal"
7:
拖放PDF文件到上面。


接下来,就如同使用xcode工程中的普通图片图像一样简单(在代码或通过生成器)。例如,在代码中使用 -imageNamed:,只需要使用图像集合的字符串名字即可。


步骤3: 观看奇迹发生


当你编译项目时,xcode会使用PDF格式的文件自动创建@1x@2x@3x的图像。举例来说,如果你有一个@1xPDF格式文件,大小是150*150像素,则xcode会自动生成如下尺寸图片并在程序中使用:


@1x.PNG 150px x 150px
@2x.PNG 300px x 300px
@3x.PNG 450px x 450px


当您运行程序时,ios会根据设备型号自动挑选合适的@1x@2x@3x尺寸来使用。请在AutoLayout(自动布局)是务必限制图像调整过大,否则你的图像最终会显示模糊。xcode是基于@1xPDF产生图像而后使用,不是在运行时实时缩放。


注:关于xcode中支持PDF


关于添加矢量图像到项目的注意事项:
1:
这并不是完全的支持矢量,只是在编译时生成png图像,并且过程无法控制。
2:
你在程序中使用矢量图像后,不能选择指定图像大小。如果你想要更大的图像,就要创建更大尺寸的@1x矢量图像,否则,扩大图像将会失真。
3: IOS8
不是全矢量支持(而是在编译时转换),这和os x不同,在os x中,你可以扩展图像而不会失真。
4:
与以前的ios版本向后兼容。//译者:测试ios7可正常运行。此句原文“There is no backwards compatibility with previous iOSversions.”,大概是我理解的不对。读者自己悟吧。
5:
如果你已经有了一个脚本或工具,能够自动实现这种功能,那么你可能体会不到自动生成png的好处。然而,如果你在os xios程序之间共享资源,这是一个方便的工具

译者注

2: 不管是iphone6还是iphone5,所有ios8设备均加载@3x图像,@2x图像不被加载。使用图像文件和XCAsset均不行,stackoverflow上也很多人问这个问题,不知道是不是ios8bug(2014923日测试)

3: 关于文中第一个工具:xcode6ios8支持以Storyboard(xib)作为Launch(启动)界面。只需要创建xib,然后在项目General里设置即可。使用Storyboard作为启动界面只支持ios8,在ios8以下不显示,但是可以和image Launch一起使用。

4: photoshop cc也可以制作pdf矢量图片,使用路径绘制后存储为photoshop pdf格式,取消“保留photoshop编辑功能”即可。

以上是关于在 Xcode 6 中使用矢量图( iPhone 6 置配 UI)的主要内容,如果未能解决你的问题,请参考以下文章

如何在 xcode 4.6.2 中使用 iphone 模拟器 5.1

如何将 PSD 文件中的所有图层导出为 PDF 矢量以在 Xcode 6 中使用资产目录

xcode 6.1 未加载正确的 iPhone 6 和 6+ 模拟器

在 ios 的 Xcode 6 中运行 Xcode 5 项目

使用 Xcode 13.2 在设备中进行测试时,应用程序在 iPhone 6、iOS 12.5 上崩溃

在 Xcode 6.1、iPhone 6 plus、iPad 滑块黑屏