How to Update Your Apps for the 4-Inch iPhone 5 Display

The iPhone 5 comes with a gorgeous new screen that has a lot more space for your app’s content – 88 points (176 pixels) to be exact.

But like in the past with the Retina display, you need to do a little work to gain the benefits of the larger screen.

Luckily, it’s simple to “turn on” the new screen size. Then, with a little thought and design, your apps can make use of the added space in interesting ways.

If you haven’t already updated your app for the new 4-inch display, this tutorial will show you how easy it is and how it can improve your app!

Getting Started

First off, you need to have a version of Xcode that’s capable of building for the iPhone 5, which means at least version 4.5. You can find Xcode’s version by selecting Xcode\About Xcode. If you have an earlier version than 4.5, head to the Mac App Store and download or upgrade to the latest version.

Note: With Xcode 4.5, Apple dropped support for the armv6 instruction set. This means that apps you build with Xcode 4.5 and above won’t be able to run on the original iPhone, iPhone 3G, or the first two iPod Touches.

For the project code, you’re going to take what may be a walk down memory lane if you are a devoted reader of this site, and revisit How to Use Blocks in iOS 5 – the first tutorial I wrote for this site!

Even though the iOS Diner project from that tutorial had lovely artwork created by Ray’s wife Vicki, I was never really happy with how crowded it had to be to fit on the screen. This tutorial is the perfect opportunity to fix that!

Download the finished project from the old tutorial (plus some bug fixes) here to open the diner for business once more.

Open the project and immediately build and run it. Make sure you run the iPhone 6.1 Simulator, because all iPhone 5s will be running at least iOS 6. If the app does not come up in the iPhone 5 4-inch Simulator, change the device type in the Hardware menu and build and run again.

BOOM! The iPhone 5 Simulator in all its 4-inch glory!

Oh, but wait. What are those ugly black bars on both sides (indicated by the red circles)? It’s because the app isn’t iPhone 5 aware yet. You’re about to change that.

Hey, You’ve Got Space!

It’s a relatively simple matter to make your app aware of the fact that it’s capable of running on the 4-inch screen.

If you’ve been doing the proper thing all along (like I know you have been) and setting a launch image, then you already have some files like Default.png and Default@2x.png. All you have to do is add a Default–568h@2x.png launch image! You don’t need a non-@2x version since all 4-inch screens are retina. Simple, huh?

Download this new launch image named Default–568h@2x.png and add it to the project by dragging it from the Finder into the spot shown below.

Build and run.

First, the app loads with the correct, larger launch image:

But then…

Well, it’s not entirely automatic after all. You can see just how much space the new screen gives you to play with, but you can also see that, at least in this case, you’ll have to do some legwork to get it to behave correctly.

This is because this app was designed with the normal screen dimensions in mind, and doesn’t use autosizing, Auto Layout, or other techniques. You will fix that soon!

Working With Constraints

There are different techniques you can use to get your views to resize themselves according to the different screen dimensions, but in this tutorial you are going to use the Auto Layout system that was introduced in iOS 6. With Auto Layout, you can pin edges and set views to auto-expand or shrink.

Note: This tutorial just scratches the surface of working with Auto Layout. For a more in-depth look, check out the Beginning Auto Layout in iOS 6 series on this site. You can find the first part of the series here.

First, enable Auto Layout. It must be enabled on each storyboard file individually, allowing you to use it where necessary and leave things as-is if they already look good on the larger device.

In this project, there is only one storyboard file, named MainStoryboard.storyboard. Select it, then open the file inspector and check Use Autolayout, as shown below.

Now in the Diner App user interface, look at the right-facing arrow that lets the user select the next item from the available items.

It seems like it pins itself to the right so that when the frame gets bigger, the right arrow is the only one that pops over. You’re going to change it so it’s pinned to the left like the other views.

Select the arrow and then the Size Inspector. You can see the Auto Layout constraints already on the view.

At the bottom of the storyboard canvas, select the icon (the one that looks like a sideways “I”) and select Leading Space to Superview, as shown below.

You will see the new constraint is selected immediately.

Instead of having to recompile and rebuild the whole project, you can test the effect this will have on a 4-inch screen by changing the screen size in the storyboard. Do this either with the menu item Editor\Apply Retina 4 Form Factor, or with the form factor button at the bottom of the canvas that looks like a rectangle with an arrow at the top and bottom.

Hmm, that’s not quite what you were going for! Reselect the arrow and the Size Inspector to find out why.

Ah, you can see that there are three constraints now. One aligns the view to the top of the other button, which is correct. Another is the one you just added.

But that middle one, Trailing Space to: Superview, pins the right-hand side of the button to the right-hand side of the superview. So with the left-hand side pinned by your new constraint and the right-hand side pinned by the old constraint, Auto Layout has no choice but to stretch the middle when the screen is expanded!

Fixing this is easy, but before you do anything else, be sure to switch back to the small screen size or else things will not work out the way you expect. (To understand why, see the Note below.)

Then, simply select the gear icon for the Trailing Space to: Superview constraint and choose Delete. There’s no need to pin the right-hand side of the button to the superview.

When you switch back to the large screen size, it should look like the image below.

Ah, that’s better.

Why switch back to the small screen size? If you had deleted the constraint while displaying the larger form factor screen, Xcode would have added a new width constraint that forced the arrow to stay stretched out. So instead of fixing it, you would have broken it for both screen sizes!

This is because when Auto Layout is enabled, any change you make to the views or the constraints causes Xcode to recalculate the current set of constraints. Xcode always adds whatever constraints it thinks it needs in order to produce the view as it currently looks on screen. So if you delete a constraint while the arrow is stretched out, Xcode will add another constraint to keep it stretched out.

This is why, while working with Auto Layout, you will often see constraints appear that you don’t think you want. When this happens, simply deleting them usually won’t work, because Xcode will just put them right back. Instead, you need to create different constraints until Xcode decides the ones you want to delete are no longer necessary.