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.