在xcode6.x中使用矢量图

最近app做适配,设计很给力,也在找适配的文章,想要以最正确的方式在设计方面做出应用的适配。发现xcode6.x支持矢量图,设计可以省去制作三种尺寸的切图,开发也可以简化同一张图,3个png文件的冗余管理,换用Asset catalog管理图片资源,一个资源只对应一个矢量图,也省去了多图的烦恼,并且资源文件可以同名,不会出现协同时类似的icon取了同一个名字,编译后xCode warning,然后还要重命名文件balabala的。

PS:如果你还要支持iOS5,Asset catalog就用不了了。相信开始iOS8的适配以后,很多人也已经不再做iOS5的支持了。

首先是选中工程中的Images.xcassets,然后点左下角的+,New Image Set:

01

然后选中内容区域列表中的第一项(默认也只有一项),然后打开对应的Attributes inspector,会看到下面参数:

02

默认是type是Bitmaps,改成Vectors,就换用矢量图了,是下边的样子:

03

然后把做好的pdf格式的矢量图拖到方框内,就加进去了。

04

 

然后可以重命名这个asset的名字,比如tab_car_b, 是我工程里tabbar上某icon的选中状态的图片。然后通过[UIImage imageNamed:@”tab_car_b”],就可以加载这张图了。

另一种方式:

直接将图片拖到Images.xcassets中,可以是多张,建议命名好的,拖拽方式创建image set默认会取图片的名字;且拖入后是bitmaps方式,然后修改type为Vector:

05

 

然后把下边的Unassigned的图拖到Universal上就行了。

FAQ:

  • 矢量图要做多大的?

矢量图需要按照单倍图的尺寸绘制

  • x都支持那些格式的矢量图?

常见的矢量图格式有svg、eps、pdf。你会发现用svg、eps文件往xCode中拖拽是无效的,显然也不支持。

  • 用矢量图是不是包就小了?

理论上包是不会小的,用矢量图是在xcode在编译时根据矢量图帮你生成了三张1倍、2倍、3倍的静态图片文件到包中的,这也是为什么ios7、ios6上也能正常显示;并不是app运行时动态加载矢量图片。

  • pdf的默认背景是白色有没有影响?

默认情况下pdf文件的背景呈现给我们的是白色,实际上是透明的画布,用ps打开相应的pdf文件可以看出来,所以绘制的时候,白色图标的预览和添加是很蛋疼的。

reeoo.com - web design inspiration