Asset Catalogs, Image Sets, and App Icons

As I have been working on Speculid, I have found some the interesting idiosyncrasies which come with Asset Catalogs. Basically, asset catalogs are collections of specialized files (such as graphics files) as well as JSON files containing metadata. The metadata from the JSON files is used for organizing the specialized files and denoting their purpose within the set. In the case of graphic sets like Image Sets, they contain several pieces of information.

Asset Catalogs — Image Sets

Here is a sample Image Set:

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "[e-mail]",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "[e-mail]",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "[e-mail]",
      "scale" : "3x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

First, we have a collection of images with the following properties:

filename – the file name for the particular image

scale – the designated scale for the image file; as of now there are four scales used:

• default unspecified — vector pdf file for any display
• 1x – iPhones up to 3GS, iPod Touch up to 3rd Get
• 2x – iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone SE, iPhone 6, iPhone 6s, iPhone 7, iPhone 8, iPhone Xr, iPod Touch 4th Generation and Up, MacBook Pro 3rd Generation and up, MacBook (2015 and newer)
• 3x – iPhone 6+, iPhone 6s+, iPhone 7+ iPhone 8+ iPhone X, iPhone Xs, iPhone Xs Max, iMac 4K and 5K

idiom – the designated device and purpose for the particular image file

More About Idioms…

Idioms designate the device and purpose of the image file. Here is the general
device values of the field for the particular property:

• universal – The default value, designates the image file works on any device and platform.
• iphone – The image is for iPhone devices.
• ipad – The image is for iPad devices.
• mac – The image is for Mac computers.
• watch – The image is for the Apple Watch devices.
• tv – The image is for Apple TV.

Some idioms denote their purpose is for App Store:

• ios-marketing – An image for the App Store icon
• watch-marketing – An image for the App Store icon.

Asset Catalogs — App Icons

Image Sets are fairly simple as far the properties they contain. However, App Icons inside Asset Catalogs contain the same information and more. For instance, here is an example of notification center icon for a 38mm Apple Watch:

... 
{   
"size" : "24x24",   
"idiom" : "watch",   
"scale" : "2x",   
"role" : "notificationCenter",   
"subtype" : "38mm" 
}, ...

• size the size of the image file in points, this designates whether the image
• subtype – typically used for Apple Watch icons, they designate what Apple Watch size the image file is for
• role – typically used for Apple Watch icons, they designate a specific purpose for the icon.

The values for a role could be:

• appLauncher – An image shown app launcher.
• companionSettings – An image for the Apple Watch Settings app
• notificationCenter – An image for the notification center on watchOS.
• quickLook – An image used for a short look notification
• longLook – An image used for a long look notification

With each device available, as well as their possible roles and subtypes, an App Icon set may contain as many as 41 individual files. That’s why it’s best to use an automated method to render these files. Check out our series of blog posts on automating that process for more details.

If you interested in learning more about Asset Catalogs and Bundles, also check out Guilherme Rambo’s post also Apple documentation has more details on each property and value available.

---

Originally published at learningswift.brightdigit.com on November 7, 2018.