Use a vector graph (UI for iPhone 6) in xcode6 and xcode6iphone6

Use a vector graph (UI for iPhone 6) in xcode6 and xcode6iphone6

Ios applications are image-dominated products. When developing an application, you need icons of various sizes. You need to create a @ 1x size and a @ 2x size for each image file. In this way, your application looks beautiful enough. However, you must generate these files separately. With the advent of iPhone 6 and iPhone 6 Plus, this problem becomes even more troublesome: @ 3x resources.

Fortunately, Apple provided some great tools in xcode6 to manage these resources. Better yet, this method also enables your applications to run on future ios devices. One of the tools is that xcode6 and ios8 support using Storyboard (or xib) as the Launch (startup) interface, removing the program startup interface from the concept of images. The other is that xcode6 has the ability to compile vector images (PDF files. In this article, we mainly show you how to implement the latter to save your time.

In section 411 of WWDC, "what is new Interface Builder", we discussed-although very short-xcode supports building PNG files from quantified PDF files during building. I would like to share with you how to achieve this.

Step 1: Use Illustrator to create a PDFs Vector file

First, you need to export the @ 1x PDF image required by your application from Adobe Illustrator (or other vector graph rendering tools you like), which is easy to do:

1: create a document for @ 1x resource specifications.
2: select a path to save your new file.
3: Select save from the File menu.
4: Remember to deselect the "retain Illustrator edit function" option when saving the file.


The PDF file exported from Illustrator is a scalable vector image, which can be expanded to @ 2x and @ 3x resolution. Next let's take a look at how to set up xcode.

Step 2: Set Your Xcode Project

To use this function, you need an xcode Resource Directory to manage your images. Don't worry, you can mix standard images and XCAssets (Resource Directory ). Follow these steps to configure xcode to use a vector image:

1: If you do not have an XCAsset file, create one. If you already have an XCAsset, open it.
2: Select "New Image Set" from the editing menu (right-click ".
3: In the new image set, select a blank image set and open the Utilities (right side) panel.
4: select the property Checker (in the right panel ).
5: Select "Vectors" from the drop-down menu of the type ".
6: This is where the image is set and will become a vacant space, marked with "All-Universal ".
7. Drag and Drop the PDF file to the top.

Next, it is as simple as using normal image images in the xcode project (in code or through generators ). For example, to use-imageNamed: in the code, you only need to use the string name of the image set.

Step 3: Watch the miracle

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

@ 1x. PNG 150px x 150px
@ 2x. PNG 300px x 300px
@ 3x. PNG pixel PX x pixel PX

When you run the program, ios automatically selects the appropriate @ 1x, @ 2x, or @ 3x Size Based on the device model. In AutoLayout (Automatic Layout), make sure to limit the image size to a large value. Otherwise, your image will eventually be blurred. Xcode generates Images Based on a PDF file of @ 1x and then uses them, instead of real-time scaling at runtime.

Note: PDF is supported in xcode.

Notes for adding a vector image to a project:

1: This does not fully support vectors. It only generates png images during compilation and the process cannot be controlled.
2: After you use a vector image in a program, you cannot specify the image size. If you want a larger image, create a larger @ 1x vector image. Otherwise, the enlarged image will be distorted.
3: IOS8 is not fully vector supported (but converted during compilation), which is different from OS x. In OS x, you can expand the image without distortion.
4: backward compatible with previous ios versions. // Translator: THE ios7 test can run normally. The original Article "There is no backwards compatibility with previous iOS versions." is probably wrong. Readers can understand it by themselves.
5: If you already have a script or tool that can automatically implement this function, you may not be able to realize the benefits of Automatically Generating png. However, if you share resources between OS x and ios programs, This is a convenient tool.

More information and resources

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

Translator's note

Using vector images in xcode 6, address: http://martiancraft.com/blog/2014/09/vector-images-xcode6/

2: For iPhone 6 and iPhone 5, @ 3x images are loaded on all ios8 devices and @ 2x images are not loaded. Neither image files nor XCAsset can be used. Many people on stackoverflow asked this question. I don't know if it is an ios8 bug. (Tested in September 23, 2014)

3: The first tool in this article: xcode6 and ios8 support using Storyboard (or xib) as the Launch (startup) interface. You only need to create xib and set it in project General. Using Storyboard as the startup interface only supports ios8, which is not displayed below ios8, but can be used with image Launch.

4: photoshop cc can also be used to create a pdf vector image, which is stored in photoshop pdf format after being drawn using a path. simply cancel the "retain photoshop editing function.

5: another article on iphone resolution please read: http://blog.csdn.net/cuibo1123/article/details/39405973

6: original content, reproduced please indicate the source: http://blog.xoneday.com

The iPhone 6 may not be available in Mainland China

I am also paying attention to it. I checked it and it seems that there is a lock. I want to use a card sticker to get it back.

Due to the policy of the local carrier, the daily version of the iPhone locks the network and can only use the SIM of the Japanese version of the local carrier, which is usually referred to as a locked machine.

Of course, iPhone 6 is no exception. If you want to use the Japanese version of iPhone 6 to send text messages, you must use the corresponding stickers to unlock the carrier.

The advantage of the Japanese iPhone 6 is the price, which is usually more than one thousand yuan different from other unlocked iPhones such as the Chinese mainland and Hong Kong,

However, the disadvantage of the Japanese version is that you need to use a card sticker and only support the GSM mobile Unicom 2G network.

How can I use an iPhone 6 from Japan in China?

Card stickers