How do I use vector graphics in Xcode 6?

The visual form of iOS applications is usually driven by graphical elements. When designing and developing an application, you need different specifications for application icons, such as default.png pictures of different sizes, as well as preparing @1x and @2x graphics resources for the implementation of the UI. All of these graphic elements will make your product look more appealing, but the drawbacks are obvious-you need to slice the graph individually for each specification. And with the release of iphone 6 and plus, we have another set of @3x to deal with, and things are getting more complicated.

Luckily, Apple has brought us some great tools to manage graphics resources in Xcode 6. Even better, new tools and implementations can help us calmly deal with future iOS devices, such as generating startup images for iOS 8 devices based on storyboard, so you don't have to make separate devices for different types of equipment. In addition, there is a very important new feature, that is, in the application build phase based on PDF image files automatically generate a variety of graphics resources. In this article, let's explore a way to help you save a lot of time and cost.

　　First, using illustrator to generate PDF vector graphics

First, we need vector graphics in PDF format. You can use Adobe Illustrator or other vector graphics tools you are familiar with to generate @1x specifications.

If you use illustrator:

Create a new document for the graphical elements you are exporting, and use the @1x specification to set the size of the document.

Copy the graphic elements you want to export to the new document.

From the File menu, select Save.

Remember to uncheck "Preserve Illustrator Editing capabilities" when saving.

The exported pdf is a stretch vector graphic that can be perfectly processed in iOS for @2x and @3x specifications. Next, we'll see how to set it up in the Xcode.

　Set up in the Xcode project file

To use vectorization graphics resources, you need to manage your pictures in Xcode with asset catalog. Don't worry, you can still mix the standard graphics into the xcassets, without creating problems. Perform the following steps:

If you do not have a xcasset file, create one. If you have already created it, open it in your project.

From the Editor menu, select New Image Set.

In the newly created set of pictures, select an empty picture set, and then open the Utilities panel.

Select the property inspector Attributes Inspector.

In the Type Drop-down list, select Vectors.

The picture assembly becomes a "all–universal" with only one drop point.

Drag and drop your PDF vector graphic into the gallery.

Next, you can use the graphical resources in image catalog as usual, either by code or by Interface Builder. For example, in code, use the string "imagenamed:" + the name of the picture set.

　Iii. Witnessing the magic moment

Xcode builds the project by automatically creating @1x, @2x, and @3x Three specifications of PNG files based on PDF vector graphics in asset catalog. For example, you provide a @1x specification, 150px*150px PDF file for Xcode, then Xcode automatically creates the following PNG graphics:

@1x specifications, size for 150px*150px

@2x specifications, size for 300px*300px

@3x specifications, size for 450px*450px

When the application is running, iOS picks out the appropriate specs from the top three graphics resources according to the different device types. Also remember to set the constraints for AutoLayout to ensure that the graphics will not be stretched on the large size device. What Xcode does is create a PNG file based on PDF vector graphics, and the application runs with a raster picture, not a vector graphic that can be scaled automatically.

　　Attention

Support for vector graphics is only staged – during the build phase, Xcode generates PNG images based on PDFs and outputs them to the interface.

Once you've finished setting up the vector graphic, you can't specify a new output size for it. If you need a larger specification, you need to create a new PDF graphic, otherwise the original picture will be distorted when you use AutoLayout.

As mentioned earlier, IOS 8 can only support PNG files based on PDF, but OS X can truly support vector graphics, and you can scale vector graphics directly with auto layout or code, without creating any distortion.

This approach is not compatible with iOS 7 systems, because the associated graphics resources are managed through asset catalog.

If you have used a similar script or tool to automatically generate a variety of graphical resources, this approach will not be of much use to you. However, if your application has both OS X and iOS two versions, and you use some of the same graphics, this approach will be much more effective.