Xcode 6 device-specific asset catalog

Question

I'm trying to update my app for the new 6 and 6+ devices.

I've added launch images for the new iPhone sizes (6 and 6+). There are entries in the asset catalog for both the 6 and 6+. No problem there.

I also have some full-screen view overlay images that I need to add as well. I already have images for these in @2x (iPhone 4s) and R4 (iPhone 5 5s 5c). I've created images at the new resolution sizes, but I'm not sure how to add them into an image set.

When I go into the asset catalog, I can choose device-specific in the image set, and I see entries for iPhone, retina-4, and iPad. There are drag/drop wells for 1x, 2x, Retina 4 2x, and 3x.

My question - where should I put the image for the iPhone 6? Obviously the 3x is for the 6 plus. I don't see how the retina-4 well can be used for both the iPhone 5 and iPhone 6 because the screen sizes are different.

What am I missing?

Answer 1

I'm fairly certain that this is a bug in Xcode 6. When you load an image from an asset catalog image set, you will always get the 3x entry for an iPhone 6+ whether you are zoomed or standard display mode. For an iPhone 6, you will always get the 2x entry in both modes. For an iPhone 4s, you will also get the 2x entry.

All these devices have different scaling and aspect ratios, so this is not acceptable for pixel-accurate images. My images are all full-screen and meant to be overlays, so I was seeing incorrect placement when in zoomed mode.

I worked around this problem by creating two image sets:
1) iPhone 6/6plus in standard mode
1242x2208 image in the 3x entry
750x1334 in the 2x entry

2) iPhone 6/6Plus in zoomed mode or iPhone 5
1125x2001 for the 3x entry
640x1136 for the 2x entry
640x1136 for the R4-2x entry

To make this work, I then need to determine if the device is one of the new ones and if they are in zoomed mode. Based on this information, I load the image from the correct image set.

This is the code I use to determine if the device is one of the new ones in zoomed/standard mode:

UIScreen *screen = [UIScreen mainScreen];
if (screen.scale == 3 && screen.currentMode.size.width == 1242 ||
    screen.scale == 2 && screen.currentMode.size.width == 750) {
    self.overlay = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"StdImageSet"]];
} else {
    self.overlay = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ZoomedImageSet"]];
}

This is ugly, and I hate having to do this, since image sets are supposed to eliminate this kind of code. I haven't seen a better way around this, and I've filed a radar (radar 18463463) bug.

Answer 2

I found this helpful: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Seems the iPhone 6 will use a resampled @2x (iPhone 5) image. Also, the image set's properties (utilities pane) lets you switch between 'Universal' (x1, x2, x3) and 'Device-specific' image wells.

Answer 3

This is really annoying. For device-specific setting, we would all expect a menu like in LaunchImage Set, different placeholders for different screen sizes.

Answer 4

I place here some of my observations which I did for iPhone devices (maybe someone will find it helpful):

1. iPhone 4S - 2x Any/Any tile
2. iPhone 5 - 2x 1GB/Any tile
3. iPhone 5S - 2x 1GB/Any tile
4. iPhone 6 - 2x 1GB/Any tile
5. iPhone 6 Plus - 3x 1GB/Any tile

To achieve this I checked Devices - iPhone, Memory 1GB. As you can see there is no distinction for graphics between iPhone 5/5S/6. Maybe playing with settings for Metal 1v2/2v2 could be distinguish but this looks to me like going too crazy. Knowledge reference starts at 10:50

What I got from WWDC right now we should think not resolution/device/device orientation specifics but focus on a size classes (which are the same for iPhones except 6 Plus) but if anyone would still, for some reasons, need that device specific graphics and wants to use asset catalogs (which are great) then here you get what I found available at the moment (Xcode 7).

Answer 5

Just found a new solution for this issue. Use the retina 4 image for 2x and set the full screen image view's content model to scale aspect fill will get it working on both iPhone 4s and iPhone 6.