Building High Res Apps for iPhone 4

Anybody who has used the iPhone 4 is no doubt blown away by the pixel density. The resolution cannot be described in words. One bit of confusion I had was how exactly to take advantage of the new high resolution screen. I found a useful article from Apple to help clear things up.

In a nutshell you either build with vector graphics, or create two versions of each raster image in your project. The standard res version, and a high resolution version which is 2x as wide and 2x as tall. You don’t need to change ANY code in your project, all you need to do is append @2x to the name of the high res raster image name and iOS 4 will automatically use the high resolution version if on an iPhone 4 and the low resolution version on the 3G or 3GS.

Here is a simple example with an interface builder created UIImageView set to use a 480×320 image called HighResTestImage.png that says “This is low res.” Also in the project file is an image labeled HighResTestImage@2x.png which is a 960×640 image that says “This is high res.” To test it, simply compile and run in the simulator or on a 3G / 3GS, then compile and run on an iPhone 4. See how iOS automatically picks the correct image for the available screen? Beautiful.

[Download: HighResTest Source Code - 57k]

[Link: Support high resolution iPhone displays - Apple.com]

Random Posts:

If you found this useful, shoot me a small donation or at the very least leave a comment, every bit of encouragement helps keep me motivated to update with more content on a regular basis!

Comments

*

3 Responses to “Building High Res Apps for iPhone 4”

  1. Dorald says:

    Hi .

    HighResTestImage.png missing from Resources folder and i get this : warning: ‘High Res Test View Controller’ has both its ‘View’ and ‘NIB Name’ properties set. This configuration is not supported.

    Thanks

  2. Nick Vellios says:

    Fixed now thanks.

  3. [...] I updated SpaceBubble to support the retina display on the iPhone 4. It was quite simple really, just had to change a few lines of code, rebuild my Entitlements.plist file, and add high resolution images. [...]

Twitter Me