转:点击打开链接

ios应用程序是一个图像主导的产品。在开发一个应用程序时,你需要各种尺寸的图标,你需要为每个图像文件制作一个@1x尺寸和一个@2x尺寸。这样你的应用看上去才足够精美。但缺点是你必须单独生成这些文件。随着iphone6和iphone6 Plus的到来,这个问题变得更加让人头疼:@3x 资源。幸运的是,苹果在xcode6中提供了一些伟大的工具来管理这些资源。更好的是,这种方式也让你的应用程序能够运行在未来的ios设备上打下了基础。工具之一是xcode6和ios8支持以Storyboard(或xib)作为Launch(启动)界面,让程序启动界面脱离图像的概念。另一个是xcode6具有了基于矢量图像(PDF文件)的编译能力。在这篇文章中,我们主要告诉你如何实现后者,以便节省你自己的时间。

在WWDC的411节的"什么是新的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的图像。举例来说,如果你有一个@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编辑功能”即可。

5: Vectors矢量图片类似一种预处理机制,所以是支持ios6的(测试过)。

6: 另外一篇关于iphone分辨率的文章请阅读:http://blog.csdn.net/cuibo1123/article/details/39405973

7: 原创内容,转载请注明出处:http://blog.xoneday.com

转载于:https://www.cnblogs.com/forrestblog/p/5077438.html

在xcode6中使用矢量图(iPhone6置配UI)相关推荐

  1. powerdesigner怎么导出pdf_各种科研绘图软件中的矢量图导出技巧

    引言 科技论文常含有插图,借助插图来形象直观.简明扼要地表达所要表述的内容(梁福军. 科技论文规范写作与编辑[M]. 清华大学出版社, 2014.).科研绘图软件有很多种,而软件导出的图片可以分为矢量 ...

  2. Android tips(十二)--Android开发中使用矢量图

    转载请标明出处:一片枫叶的专栏 本文我们将介绍一些关于Android矢量图的相关知识点.最新的项目中要求以矢量图替代传统的.png资源文件,所以特意学习了一下Android中的矢量图相关概念,不得不说 ...

  3. Android开发中使用矢量图

    本文我们将介绍一些关于Android矢量图的相关知识点.最新的项目中要求以矢量图替代传统的.png资源文件,所以特意学习了一下Android中的矢量图相关概念,不得不说矢量图还是一个比较好的适配方案. ...

  4. Illustrator 教程:如何在 Illustrator 中对矢量图进行变形、定形和塑形?

    欢迎观看illustrator教程,小编带大家学习 illustrator 的基本工具和使用技巧,了解如何在 illustrator 中不改变其他区域的情况下对矢量图的一部分进行平滑调整. 打开文件中 ...

  5. SVG - 在Android中使用矢量图全攻略

    概念 什么是矢量图,SVG SVG全称:可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像 ...

  6. 在html页面中加入矢量图,HTML页面插入SVG的多种方式

    SVG (Scalable Vector Graphics) 可缩放矢量图,是一种基于XML语法的图像格式.其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积 ...

  7. word中插入矢量图的方法

    word中插入eps矢量图的方法 众多小伙伴在写论文时肯定需要在word中插入eps矢量图,我在网上查询了很多方法,有将eps转换成emf直接插入word的,但显示效果还是不好,依然不是矢量图的效果. ...

  8. Vue中使用矢量图图标

    在前台页面中开发过程中,有时候我们需要使用一些图标,来使我们的页面变得更加好看,下面介绍在vue中如何添加阿里巴巴的矢量图的图标 打开阿里巴巴矢量图标库https://www.iconfont.cn/ ...

  9. 在html页面中加入矢量图,HTML5画布矢量图形?

    有一些选择. 我没有使用过任何一个库,但是据我所知,Cake看起来通常更令人印象深刻,并且可以导入,但也大了三倍. 还有Burst Engine,目前是processing.js的扩展,甚至更小. 我 ...

  10. android 矢量图片使用方法,Android中的矢量图

    概述 VectorDrawable是通过XML文件中的一系列点,线和曲线及其相关颜色信息定义的. 使用VectorDrawable的主要优点是图像可扩展性. 它可以缩放而不损耗显示质量,这意味着相同的 ...

最新文章

  1. TF:tensorflow框架中常用函数介绍—tf.Variable()和tf.get_variable()用法及其区别
  2. Qt Post上传图片文件到服务器
  3. javascript权威指南——笔记(第十章:正则)
  4. spring boot test [ 2.0.6.RELEASE version ]
  5. 安装chrome插件
  6. java 百度爬虫_零基础写Java知乎爬虫之先拿百度首页练练手
  7. javascript无提示关闭窗口,兼容IE,Firefox
  8. 使用Python将DOTA数据集的格式转换成VOC2007数据集的格式
  9. linux dvd 刻录_如何将任何视频文件刻录到可播放的DVD
  10. Mac itunes安装旧版本步骤
  11. 开机启动时间计算机,Windows系统更改开机启动时间三种方法
  12. Unity笔记之切换鼠标图标样式、PSD格式文件导入Unity
  13. Windows + Linux 双系统 卸载 Liunx
  14. arm-linux内存页表创建
  15. Codeforces1144C(C题)Two Shuffled Sequences
  16. 1099: PIPI的油田
  17. Unity3d使用RenderTexture制作动态头像
  18. 有关计算机英语作文素材,英语作文素材范文
  19. 用5v1a的充电器给1.2v的镍氢电池充电(充满后可自动断电)或者可以定时
  20. 计算机组成原理——计算机的发展历史

热门文章

  1. 【Pre-Training】XLNet:预训练最强,舍我其谁
  2. 【每日算法Day 102】美团 AI 平台算法工程师面试编程题
  3. 每日算法系列【LeetCode 424】替换后的最长重复字符
  4. 深度学习TF—14.WGAN原理及实战
  5. matplotlib-plt.style.use
  6. 李宏毅机器学习——逻辑回归
  7. RabbitMQ学习——生产者与消费者入门例子
  8. django urls路由匹配分发
  9. 基于Hosted WebCore 方式部署Web Role
  10. 二十一天学通之cookie的路径和域