How to Use Asset Catalogs to Develop Your iOS App - dummies

How to Use Asset Catalogs to Develop Your iOS App

By Jesse Feiler

Now that there are several screen sizes for iPhones and (currently) two resolutions, your iOS app images need to be managed in a more sophisticated way than in the past. Initially, images had specific names that indicated if they were icons, launch images, or other images. With Xcode 5, things are much simpler because instead of relying on naming conventions, you use asset catalogs.

Images inside an asset catalog are divided into sets. Each set contains one or more image representations. You create an asset catalog by creating a new file (File→New→File) and choosing Asset Catalog from the Resource section at the left of the window.

The navigation at the left of the workspace window and the Utility area at the right are hidden. Inside the Editor area are two columns. At the left of the Editor area, a list of the sets is shown.

  1. Select the image set you want to work with in the set list.

    The App Icon set is selected. To follow along, select it now.

  2. Notice that the set viewer (the right-hand column in the asset catalog) now reflects the images of the selected set (AppIcon in this case).

    There may be several representations of a single image reflecting the appropriate idioms (iPhone or iPad).

  3. If you want, you can change the name of the set either in the Status area or by double-clicking and editing the name in the set list.

    You can also specify which representations (iPad, iPhone, Mac) you want to use at the top of the Status area and the appropriate scales for each (1x for non-Retina and 2x for Retina displays).

  4. Select the representation you want to work with in the Editing area.

    The Status area at the right of the workspace window reflects the details for the selected representation below the set information.

    An open app design in Xcode.

An asset catalog can contain four types of images:

  • App icons: You may think you have a single app icon, but you would be wrong. You actually have an app icon image set with a multitude of idioms and scales. Each representation has its size shown both in the Editor area and in the Status area so that you know what you should be working with. It is best not to rename this set.

  • Launch images: These are images that are shown as early as possible in the app’s launch. They should provide the background of the first screen the user sees. When the launch is completed, the actual screen and its data appear. The effect is that the background is drawn and relevant text and graphics are drawn on top of it. There’s a launch image set in the Master-Detail template.

    Note that in the Status area, you can specify the details of the launch images, including not only the idiom but also the orientation. These are check boxes: You only have to provide the ones you choose. It is best not to rename this set.

  • Images: These are all the other images in your app. Using the button at the lower right of the Editor area, you can show the overview that lets you edit the representations for a specific image set (by defaults, there are two idioms and two scales, but this may well change over time). You can also look at image slicing.

  • OS X icons: For completeness, these are mentioned.

You can see the representations for launch images.

The representations for launch images in the different iOS devices.

You drag your images from your disk into the appropriate representation of the appropriate set. For app icons and launch images, if the image you try to drag is the wrong size, you will get an error. Note that for both app icons and launch images, there are different images for the different devices. Also note that there are separate versions for Retina (2X) and non-Retina (1X) displays.

If you are using one of the Xcode templates, you will have an asset catalog with an icon and launch images. You can add your own image sets to it. It has Retina and non-Retina display representations for Universal, iPhone, iPad, and Mac. (There is also a Retina display for the iPhone 4.)

An open app template in Xcode.

You can choose the representations you want for your image set using the Editor→Device Image Reps submenu.

Many developers don’t modify the template’s asset catalog which contains the launch images and app icons. Instead, they create a separate asset catalog for their own image sets. Here’s how to do that:

  1. Choose File→New→File.

  2. In the dialog that appears, select Resource under iOS at the left.

  3. Select Asset Catalog.

  4. Name and save the file in your project.

    If you want, you can place the file in the Supporting Files group in your project (or anywhere else you choose).

Pre-Xcode 5 code for manipulating images was not pretty. Today, after you have set up your image catalog(s), you simply select the image set name that you want (often from a pop-up menu in the Utility area). At runtime, the appropriate image is chosen for you depending on the device in use. You don’t have to do anything but use the image set name: iOS will choose the correct file.

The Editor drop down menu in Xcode.