How to Upgrade an iOS App for the iPhone 5 Screen

Creating a new project with Xcode 4.5 will automatically add support for the iPhone 5’s larger screen. However, it’s not immediately obvious how to add support for the larger screen. Let’s jump right in.

Since this is just to illustrate the basics of how to add support for the taller screen, I’m going to walk you through the actual migration I’ve made to Photo Hour, an actual app I sell in the App Store. It’s fairly simple and has only one view controller.

Before I make any changes to the project, Xcode looks something like this:

39e5b64d143a4203aa391a912ac2cc66

If I ran the app right now, I would get the following letterbox/pillarbox effect from the OS:

F07e5c57d6384f8d852ededb890d899967cd16741aad4872960f38619b079032

This is not the experience we stylish iOS developers want to provide for our users.

The only clue about what to do next is a compiler warning

56c93d758cbd4dc889cfb028d0915d4e

The iPhone 5 has a screen of 640x1136 pixels (or, more accurately, 320x568 point). Remeber that on a Retina screen, 1 point is equal to 2 pixels. What apple is doing here is being cute; they know that a screen that is 568pt high must be Retina, but they’re reminding us through the file name that even though the image we provide should be 640x1136px, it’s still only 568 points tall.

Adding this [email protected] launch image will enable iPhone 5 support for your app.

The way that I generate launch images is by actually using my app and hide all the UI componenets, then taking a screenshot. It’s a sort of chicken-and-egg problem: you need the larger launch image to enable support, but you need support enabled to take the screenshot. Let’s just throw in any launch image to get iPhone 5 support.

Open the project file in Xcode’s File pane, select your target, and drag any random .png onto the “Retina (4-inch)” space.

If I run the app now, it looks like this:

Cf671b33aac64e1db520130dfb19e295Ad8eb78623d24f0a88390fae216646c7

iOS is just taking the springs and struts defined by the UIViewAutoresizingMask supplied on the views that make up the interface. In landscape, that’s exactly what I want. In portrait, though, it looks like I’ve totally entirely forgotten about a whole 88pt of my app’s interface. I can’t ship this! What do I look like, an Android developer?

Let’s open the nib (or storyboard) and deal with this mess.

If you select the main UIView and open the Attributes inspector (⌘⎇4), you’ll see a new dropdown under “Simulated Metrics.”

60ae31bb2bae4158b6297bdfd4b1238b

This is the first time that developers have been able to specify any size other than 320c640pt for a view controller with a simulated status bar. Nice!

Since I only want to do this work once, I’m going to select “Freeform” so I can resize my nib and see visually how the springs and struts are being used to layout the interface. This would be a great time to migrate to Auto Layout, but that’s iOS 6 only and a topic for another blog post.

Protip : Hold down ⌘ while resizing interface elements on a nib or Storyboard to get the views to resize and reposition in accordance with their springs and struts.

Don’t forget to repeat these steps for any localized nibs you have!

A8b17d70b6c7422dbdf436f67d0d1ffd

Luckily, the rest of my app is using resizableImageWithCapInsets: and colorWithPatternImage:, so I don’t need to regenerate any assets besides the launch image.

That’s it! Take some new screenshots of your app in the iPhone 5 simulator (assuming you don’t have an iPhone 5, yet) and upload them to iTunes Connect; there is a special spot for screenshots of the iPhone 5. Submit, and know that you’ve done your due diligence and your users will get the best experience possible.


Posted on September 19, 2012