Supporting the 4-inch Retina Display

It already seems a long time ago that the iPhone 5 and iPod touch (5th generation) devices were released with the 4-inch retina display. Better late than never I finally get around in this post to sharing my notes on the often minimal changes required to support the new screen dimensions.

Letterbox Mode

If you make no modifications to an existing app it will still work on the new devices but displays in a letterbox with black bars at the top and bottom of the app. The following screenshots show an unmodified version of my World Facts example app in both portrait and landscape orientations running on the larger 4-inch device (in this case a 5th gen iPod touch):

letterbox portrait letterbox landscape

The sinking feeling I get when I see an App displaying in letterbox mode reminds me of when the iPad launched and many apps would only run in 2x mode.

Retina 4 Launch images

If you have an app using standard view controllers without any custom drawing or artwork it turns out there is very little you need to do to support the new screen dimensions other than add a new launch image. The iOS Human Interface Guidelines give the required dimensions to use:

For apps that run on iPhone 5 and iPod touch (5th generation), create a launch image that measures 640 x 1136 pixels.

You can also find details in the iOS App Programming Guide include the naming convention for the default filename:

To specify default launch images for iPhone 5 and iPod touch (5th generation) devices, include the modifier string -568h immediately after the portion of the filename. Because these devices have Retina displays, the @2x modifier must always be included with launch images for the devices.

If you open an existing app in a recent version of Xcode (4.5.2 at time of writing) you will get a build issue that also shows you the required filename:

Retina 4 Support: Missing "Default-568h@2x.png" launch image.

Clicking on the issue in the navigator will display a dialog with Xcode offering to add the missing launch image for you:

missing retina 4 launch image

If you accept and allow Xcode to add the missing launch image it will add a file named Default-586h@2x.png to the project with dimensions of 640 x 1136 pixels. This will work but the image that is added to the project is a plain black background which does not match our initial user interface very well. Since I never previously bothered to add any launch images (or icons) to this example app I will add three of my own launch images as follows:

  • Default.png - 320 x 480 pixels (standard resolution iPhone)
  • Default@2x.png - 640 x 960 pixels (high resolution iPhone 4)
  • Default-568h@2x.png - 640 x 1136 pixels (iPhone 5)

The launch image consists of a 20 pixel high (40 pixel for high resolution) status bar, a 44 pixel high title bar (88 pixel for high resolution) and then a white content area. Since this is an iPhone only app we do not need to worry about iPad or landscape launch images. Once added to Xcode the three launch images should show up in the target summary screen of the project (if you prefer you can just drap and drop the images onto the relevant placeholder to have Xcode add the files to the project for you):

xcode launch image

With the correct launch image in place the application should now make full use of the larger 4-inch screen:

screenshot

Auto-sizing

One issue that can cause problems on the larger 4-inch screen is that a view may not correctly resize to the taller screen size. Assuming you have not yet migrated to auto-layout the auto-sizing springs and struts must be set correctly to allow each view to grow in height.

autosizing

This is something that is easy to overlook when testing so be sure to check each view on an actual device. In this case I already had the main table view set correctly to fill the content area so everything just worked.

Wrapping up

As the iOS device family grows so does the list of image assets and resources required. Whilst it will not be so simple for all apps in this case supporting the 4-inch retina display only required adding one new launch image. What continues to be important is to thoroughly test on a real device.

The modified example Xcode project that accompanies this post can be found in my GitHub Code Examples repository. Since I am posting this on the last day of 2012 I will also take the opportunity to wish you all a happy new year!