Using vector diagrams in Xcode6 (IPhone6 UI)

Reprint Source: http://blog.xoneday.com

An iOS app is an image-led product. When developing an application, you need icons of various sizes, and you need to make a @1x size and a @2x size for each image file. This way your app looks beautiful enough. But the downside is that you have to generate these files separately. With the advent of iphone6 and Iphone6 Plus, the problem has become even more daunting: @3x resources.

Fortunately, Apple offers some great tools to manage these resources in Xcode6. Better yet, this approach also allows your application to run on future iOS devices to lay the groundwork. One of the tools is xcode6 and iOS8 support to storyboard (or xib) as the launch (Start) interface, allowing the program to launch the interface out of the image concept. The other is that Xcode6 has the ability to compile based on vector images (PDF files). In this article, we mainly show you how to achieve the latter in order to save your own time.

In section 411 of WWDC, "What is the new interface Builder", discussed-although very short-xcode support for building PNG files from quantization PDF at build time. Let me share with you how this can be done.

Step 1: Make PDFs vector files with illustrator

First, you'll want to export your application's @1x-sized PDF images from Adobe Illustrator (or other vector drawing tools you like), which is easy to do:

1: Create a document for the @1x resource specification.
2: Select a path to save your new file.
3: Choose Save from the File menu.
4: Remember to uncheck the "preserve illustrator editing features" option when saving.


The pdf file exported from illustrator will be a scalable vector graph that can be extended to @2x and @3x resolutions. Now let's look at how to set up Xcode.

Step 2: Set up your Xcode project

In order to use this feature, you need a Xcode resource directory to manage your images. Don't worry, you can mix standard images with Xcassets (Resource directory). Follow these steps to set up Xcode to use vector images:

1: If you do not have a xcasset file, create one. If you already have a xcasset, then open him up.
2: Select "New Image Set" From the Edit menu (right-click).
3: In the new Image collection, select the Blank image collection, and then open the utilities (right) panel.
4: Select the property Inspector (in the right panel).
5: In the Type drop-down menu, select "Vectors".
6: This is where the image settings will become an empty space labeled "All-universal".
7: Drag and drop the PDF file to the top.

Next, it's as simple as using a normal image image in the Xcode project (either in code or through the builder). For example, using-imagenamed in your code: you only need to use the string name of the image collection.

Step 3: Watch the miracle happen

When you compile a project, Xcode automatically creates images of @1x,@2x and @3x using files in PDF format. For example, if you have a @1x PDF file with a size of 150*150 pixels, Xcode will automatically generate the following size picture and use it in the program:

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

When you run the program, iOS automatically picks the right @1x,@2x or @3x size to use depending on the device model. Please be sure to limit the image adjustment too large in AutoLayout (auto layout), otherwise your image will eventually appear blurry. Xcode is a @1x-based PDF that produces images and then uses them instead of zooming in real time at runtime.

Note: Support for PDF in Xcode

Considerations for adding a vector image to a project:

1: This is not a full support vector, just a PNG image is generated at compile time and the process cannot be controlled.
2: You cannot choose to specify the image size after you use the vector image in the program. If you want a larger image, create a larger @1x vector image, otherwise the enlarged image will be distorted.
3:ios8 is not full vector support (but rather at compile-time conversions), unlike OS X, in OS X, you can extend the image without distortion.
4: Backwards compatibility with previous iOS versions. Translator: Test iOS7 can run normally. The original phrase "there is no backwards compatibility with previous IOS versions.", probably I understand the wrong. Read the reader's own awareness.
5: If you already have a script or tool that automates this function, you may not realize the benefits of automatically generating PNG. However, if you share resources between OS X and iOS programs, this is a handy tool.

More information and resources

WWDC ' 411 Session
Apple Developer Asset Catalog Guide
Apple Developer Interface Builder Guide

Translator note

1: Translated from the original English language (USING VECTOR IMAGES in XCODE 6), Address: http://martiancraft.com/blog/2014/09/vector-images-xcode6/

2: Both Iphone6 and iphone5, all iOS8 devices load @3x images, @2x images are not loaded. The use of image files and Xcasset are not, StackOverflow also many people ask this question, do not know is not iOS8 bug. (Tested on September 23, 2014)

3: About the first tool in the article: Xcode6 and iOS8 support to storyboard (or xib) as the launch (Start) interface. Just create a xib and set it up in Project General. Using storyboard as the boot interface only supports iOS8, not shown below iOS8, but can be used with image launch.

4:photoshop cc can also make PDF vector images, use the path to save as Photoshop PDF format, cancel "preserve Photoshop editing function".

5:vectors vector images are similar to a preprocessing mechanism, so they are supported by IOS6 (tested).

6: Another article on the resolution of the iphone please read: http://blog.csdn.net/cuibo1123/article/details/39405973

Using vector diagrams in Xcode6 (IPhone6 UI)