Extend app for iPhone 5 - best practice

Question

Now that Apple is about to start shipping iPhone 5's, I'm looking into extending my applications so they appear full screen on the iPhone 5. I ran my apps on the simulator, and even the ones with a UITableView extending to the bottom of the screen, the black bars appear at the top and bottom of the screen.

Here's my question: What is the best practice for extending apps for the iPhone 5?

Should I make a separate nib now for the 3.5 and 4 inch screen, or extend everything in code?

I'm trying to make this as smooth a transition as possible, so I appeal to knowledge of SO to clue me in onto what the best way is to build for both screens.

Archicarp

Answer 1

Taking advantage of the full 4" screen in your apps seems to be as simple as adding a new Default image named [email protected] with size 640 x 1136. Xcode 4.5 will actually offer to do this for you automatically by adding a black image of the proper size and name to your project.

For apps that use standard UI components, such as table views, the tables are magically extended to fill the screen. I updated an app for work and it was literally this simple, with only a couple minor issues related to my own code and UI setup. But all in all, very easy.

Contrast this with another app I work on (for myself), which uses none of the standard UI components except for UIViews. To deal with both 3.5" and 4" screens, I have had to spend quite a bit of time refactoring code that needs to know screen size for various operations of the app. (The app in this case is more of a game/simulator than say, a productivity app.)

So, your mileage may vary with regard to the level of effort really required to support the 4" screen. It will depend on how complicated and "non-standard" your app is, as I have discovered.

Zebrawood

In the iPhone version of my app I'm loading a NIB for my interface, using a Tab Bar as the root view, and the auto-sizing stuff just isn't doing the right thing on its own to adapt to the 4" screen. How can you get a UITableView inside of a UITabBarController to stay pinned at the same vertical position, and grow in vertical size by exactly the right amount (88pt or 176px)? My followup best-practice question would be, is it better to adjust these subviews in code, or is there some way to get it to work reliably just through auto-sizing in the NIB? – Foust

@ScottLahteine In the case of the first app I mentioned, I did not have to to anything special (other than adding the 3rd Default image) to get the table views to resize automatically. And these table views are within navigation controllers that are part of a tab bar controller, too. I'd check your NIB files for any autoresizing oddities. – Zebrawood

Specifically, I need one sub-view (a UITableView) to always be 35pt from the top, and its height should stretch so its bottom is always 108pt from the tabs below, then a second sub-view (108pt tall) will stay pinned right above the tabs. What dimensions should Tab Bar sub-views have as their starting point? Does it matter? I expect a sub-view pinned to the bottom of the root view to stay pinned just above the tabs, and this seems to be the formal behavior as I mess with it now. The I-beam seems to preserve the original distance. Ah, it's all falling into place now... – Foust

Answer 2

When updating an existing app for the larger-screen iphone 5, you may also find that the bottom of the screen is not "clickable". For example, if you have a toolbar along the bottom of the screen, that toolbar would be displayed correctly, but buttons would not react to the touch. If this is the case, you need to tell the app that the window is using full screen.

If you have MainWindow.xib, open it, select the window and in the attributes inspector make sure that "Full Screen at Launch" is checked.

If you don't have MainWindow.xib in your project (and most newer projects don't), then you need to add one extra line in the applicationDidFinishLaunching of your app delegate:

- (void)applicationDidFinishLaunching:(UIApplication *)application {

    [window setFrame:[[UIScreen mainScreen] bounds]];
    ...
}

I put it in the beginning of the method. Worked like a charm.

Debris

In my GL11 game I had to set the "Full Screen at Launch" attribute, before the window stretched to fill the screen (without this auto-resize settings made no difference). I also use MainWindow.xib, from the GLES2Sample project from Apple. – Alfonse

Answer 3

You will find this path with simulator XCode->Targets->Summary->iPhone/iPod Deployment Info( the Retina 4-inch )

You need to add a Default image with size 640 x 1136.

Apply this code in your AppDelegate file

mainWindow = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

mainWindow.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

You will get the main screen size of your window. one more thing whenever you want to check in your class file just add this code

if ([UIScreen mainScreen].bounds.size.height > 500.0f)

For your view controller just add one property autoresizingMask

self.view.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

This works fine for me.

Tellurate

Answer 4

I was looking for the same issue, trying to get iPhone 5 (4") to render my xib files to full screen, and I found this answer, which says you only need to add the [email protected] image to tell the iOS that it needs to render your app in 4" fullscreen. just adding this fixed the problem for me.

Why [UIScreen mainScreen].bounds] is not returning full screen size?

Oratorian