在xcode6中使用矢量图

2023-10-25 16:40
文章标签 使用 矢量图 xcode6

本文主要是介绍在xcode6中使用矢量图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

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

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

360桌面截图20140923112044.jpg

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

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

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

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

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

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

步骤2:设置你的Xcode项目

360桌面截图20140923112101.jpg

为了使用这个功能,你需要一个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的图像。举例来说,如果你有一个@1x的PDF格式文件,大小是150*150像素,则xcode会自动生成如下尺寸图片并在程序中使用:
@1x.PNG   150px x 150px
@2x.PNG   300px x 300px
@3x.PNG   450px x 450px
当您运行程序时,ios会根据设备型号自动挑选合适的@1x,@2x或@3x尺寸来使用。请在AutoLayout(自动布局)是务必限制图像调整过 大,否则你的图像最终会显示模糊。xcode是基于@1x的PDF产生图像而后使用,不是在运行时实时缩放。

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

更多信息和资源

WWDC ‘14 Session 411
Apple Developer Asset Catalog Guide
Apple Developer Interface Builder Guide

译者注

1: 翻译自英文原文(USING VECTOR IMAGES IN XCODE 6),地址:http://martiancraft.com/blog/2014/09/vector-images-xcode6/

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

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

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

这篇关于在xcode6中使用矢量图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/283834

相关文章

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中,括号匹配是一个常见问题,尤其是在

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下:1. 字符串的不可变性:每次修改都创建新对象2. 使用 == 比较字符串,陷阱满

Python使用国内镜像加速pip安装的方法讲解

《Python使用国内镜像加速pip安装的方法讲解》在Python开发中,pip是一个非常重要的工具,用于安装和管理Python的第三方库,然而,在国内使用pip安装依赖时,往往会因为网络问题而导致速... 目录一、pip 工具简介1. 什么是 pip?2. 什么是 -i 参数?二、国内镜像源的选择三、如何

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定

Linux使用nload监控网络流量的方法

《Linux使用nload监控网络流量的方法》Linux中的nload命令是一个用于实时监控网络流量的工具,它提供了传入和传出流量的可视化表示,帮助用户一目了然地了解网络活动,本文给大家介绍了Linu... 目录简介安装示例用法基础用法指定网络接口限制显示特定流量类型指定刷新率设置流量速率的显示单位监控多个

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》:本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本

C++ Primer 多维数组的使用

《C++Primer多维数组的使用》本文主要介绍了多维数组在C++语言中的定义、初始化、下标引用以及使用范围for语句处理多维数组的方法,具有一定的参考价值,感兴趣的可以了解一下... 目录多维数组多维数组的初始化多维数组的下标引用使用范围for语句处理多维数组指针和多维数组多维数组严格来说,C++语言没

在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

《在SpringBoot中使用@Autowired和@Bean注解的示例详解》本文通过一个示例演示了如何在SpringBoot中使用@Autowired和@Bean注解进行依赖注入和Bean... 目录在 Spring Boot 中使用 @Autowired 和 @Bean 注解示例背景1. 定义 Stud