Vector Images Tutorial for Xcode 9

In Xcode 6 and beyond we were able to add PDF vector images to the Xcode asset catalog. It’s a great way to manage your image resources and avoiding that your app becomes into a big one. I’ve been using Sketch for years and it’s true that creating 1x, 2x and 3x resolution images is very easy, but if we can remove this step in our daily tasks I think that will make our life so much easier. With Xcode 6 and later versions the vector images weren’t really scaled as they should, and as a result you got some fuzzy edges when you tried to make bigger images. This happened because images were generated when you added them to the asset catalog.

Now with Xcode 9 we have new options to get scaled images without losing quality and do the scaled process in runtime.

The Tutorial Project

If you want to follow step by step this tutorial, check the Template project release and download it.

The project has a main tab bar controller which contains two view controllers. The first one displays two images with PNG files and other two images with PDF files. Both type of images have a 100×100 image which represents the original size, and another 300×300 image which represents the scaled size. The second view controller is related to the UITouch force properties and it’ll be covered on a next tutorial.

Using PDF images

In the Template project provided with this tutorial, I’ve already added all the image resources you’ll need in PNG and PDF file formats. I’ll explain in a new tutorial how you can create PDF images from vector images like SVG or EPS file formats.

Scaling with Preserve Vector Data

With Xcode 9 you can scale PDF images as much easy as checking two options for every image you need to scale. One important thing is that vector images will be scaled at runtime, process which guarantees the quality for every image you display in your app. To achieve this you just need to select the PDF image you want to scale in the asset catalog, and in the Image Set panel tick the Preserve Vector Data option. Also, you’ll need to select the Single Scale option in Scales because you’ll just need one scale due you are using vector images.

💡 Check this changes in its respective commit.

Once we’ve set up all PDF images, we can run the project and we’ll see how the images are properly scaled like this:

Taking care of Accessibility

We can take advantage of two great features related with Accessibility in our brand new vector images. For this purpose we’ll work on the second Tab Bar View titled Accessibility.

Adjusts Image Size

One of the many new features in iOS 11 let us to adapt the size of an UIImageView or an UIButton depending on the Larger Accessibility Size option set by the user in the Settings app. This feature conforms the UIAccessibilityContentSizeCategoryImageAdjusting protocol and is triggered every time the user sets a different text size inside the Larger Text section. In order to handle this changes we need to open the asset catalog and select the pumpkin_pdf image and as we did before, we’ll tick the Preserve Vector Data and select the Single Scale type:

In the Main.storyboard we need to select the the two pumpkin images (PNG and PDF) and tick the Adjusts Image Size option in the Attributes Inspector:

💡 Check this changes in its respective commit.

If you prefer adding an image by code, you can set this property with the following line of code:

🙋 Don’t forget to also enable Accessibility for both images in the Identity Inspector. If you don’t do it, the images will never change its size when the user changes to larger font sizes.

UILabel, UITextField and UITextView objects already has enabled the accessibility behavior. But when you add a new image, the accessibility behavior is not enabled by default and you’ll need to tick the option in the Identity Inspector. Select both images, open the Identity Inspector and scroll down to the Accessibility section and tick the Enabled option:

🙋 Use Dynamic Type text styles in your UILabel, UITextField or UITextView objects in order to support Dynamic Type.

The project already has both labels (PNG and PDF) set with Dynamic Type text styles but if you don’t do that, you’d get a message like the following in Xcode:

No one wants to get warnings in their projects, so all you need to do to remove this warning is setting a predefined Dynamic Type text style that fits better with your view/project style. In this tutorial we already use the Headline text style, but you can choose a different one and check how it looks:

💡 Remember that selecting custom or system font families will result in a warning message like we talked before.

Once we’ve finished all the previous steps, our images will be scaled according the new font size selected by the user and never lose again any quality:

Bar Item Images

We’ll finish this tutorial with one more accessibility feature added in iOS 11 for the images used in the bar items like tab bars or toolbars. In this tutorial project we have a simple tab bar with two view controllers which we’re going to improve to help those persons that are using larger accessibility sizes:

💡 When I created the Template project, I forgot to add the 75×75 pixels images for the accessibility bar items, but you can add them by yourself in the asset catalog with the following resources: Images icon / Accessibility icon

As we’ve seen it’s a good idea to use PDF vector images in your asset catalog, even for the tiny icon images of 30×30 pixels in the tab bar. Luckily for us, they are already added in the asset catalog. The other resources you need are the 75×75 pixels icon images which will be displayed when the user holds pressed the tab bar item.

Add both images resources to the asset catalog and tick the Preserve Vector Data option and select the Single Scale option in the Attributes Inspector section, like we did with the other images we set before.