When Xcode 5 was released, users noticed new projects included a file called “Images.xcassets.” Despite how it appears in the project navigator, this is not a single flat file. Rather, it’s a resource bundle – known as an “asset catalog” – that may contain one or more sets of images, along with a JSON descriptor file. The purpose of an asset catalog is to manage the varying sizes of icons, launch screens, and other images required to support multiple iOS devices. In addition to providing image management, an asset catalog is compiled into a smaller file (for iOS 7 and greater) compared to the total size individual image files would produce.
Configuring images.xcassets
The images.xcassets catalog is the default asset, used to manage the required app icons and launch images. Let’s start by configuring the app icons.
- Select “images.xcassets” from the project navigator.
- The editor panel is divided into two sections: a set list on the left and a set viewer on the right. Select “AppIcon” from the set list.
- Make sure the utilities panel is displayed and select the attributes inspector. This allows you to choose which device types you intend to support. The “IOS icon is pre-rendered” option is used to prevent devices running iOS 6 or earlier from adding the gloss/glare overlay to your app’s icon in the Springboard (Home Screen).
- With your devices now selected, the required app icons are displayed in the set viewer. Drag and drop icons from your Mac’s Finder into each image holder. You do not have to follow any particular naming convention, though many still use the image.png & image@2x.png convention. The “pt” size listed below each item can be used to determine the proper size of each image. For example, a 1x (non-retina), 76 pt icon should be 76 x 76 pixels. If the icon says “2x (retina)” it should be twice the pt size specified (e.g. 2x, 76 pt icon should be 152 x 152 pixels).
Launch images are configured in a similar manner to app icons. The primary difference between the two is that the dimensions aren’t listed under each launch image – just 1x (non-retina), 2x (retina), and R4 (4″ retina). You can find dimensions for each device listed in the iOS Human Interface Guidelines.
Configuring Custom app Images
Asset catalogs may be used to manage any image that is used in your application. Remember, a catalog may contain one or more sets of images. Each set is a single image in different sizes. I like to create one catalog, with multiple sets, per scene. I’ll also create separate catalogs for icons that are shared amongst multiple scenes. To create an additional catalog, follow these steps:
- Create a new file (⌘N) and select the Asset Catalog template in the iOS – Resource panel.
- Choose a name, select the targets that should include the catalog, and click “Create.”
- Select the new *.xcassets file in the project explorer. This causes the editor to display the set list and set viewer.
- Click the “+” button at the bottom of the set list, and select “New Image Set.”
- By default, a set is created with the name “Image” – this name may be changed in the attributes inspector. Also by default, the set viewer displays slots for 1x & 2x “Universal” images. This may also be changed in the attributes inspector to use “Device Specific” images.
- Drag your images into the set viewer.
- To add the image in Interface Builder, add an ImageView to your scene, and select the name of the set in the attributes inspector.
- To programmatically create the image, simply refer to the set name.
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Logo"]];
Now your app will automatically choose the appropriate images for each device you’ve chosen to support! In a future post, I’ll explain how to use the “Slicing” feature of the asset catalog.
