How to take advantage of the iPhone 4 retina display

The “retina display” on the iPhone 4 is really awesome. Icons and photos are sharper than any screen I’ve ever seen. Obviously, I would want to take advantage of this in my own app. How did I go about doing that you ask?

On the iPhone, one way to create UIImages is like this:

[UIImage imageNamed:@"compassGreen.png"];

It’s very simple and easy. Now how do you take advantage of the retina display?

Just make your image twice as big as the control.

Thats it? Yes, that is it, sort of. What if your designer doesn’t trust the cocoa touch scaling algorithm? How do you load a different icon for the older iPhones?

if( has retina display )

{

[UIImage imageNamed:@"hiResImage.png"];

}

else

{

[UIImage imageNamed:@"regularResImage.png"];

}

NO! Don’t do that. You could do it that way if you really wanted, but then every time you wanted to use an image you’d have to type that if statement. Also, what would you do for images in Interface Builder?

Luckily, Apple knows what they’re doing and added a URL naming scheme to solve this problem. Name your regular resolution image image.png and then your high resolution image will be image@2x.png. Then all of your calls will use the regular image name. So you just say [UIImage imageNamed:@”image.png”] and then it will automatically load the correct image based on your device.

It wasn’t all puppies and rainbows. I had a hard time getting some of my images to load correctly. I couldn’t figure it out. They looked great in Interface Builder but they wouldn’t load on my phone. It was just the hi-res versions too. It turned out that when I was saving them in Photoshop I didn’t change the image format. I just changed the file extension. This meant that even though the files looked like PNGs to me, they were actually PSDs. For some reason, they work just fine in Interface Builder, even though they aren’t PNGs.