How to develop or migrate apps for iPhone 5 screen resolution?

Question

The new iPhone 5 display has a new aspect ratio and a new resolution (640 x 1136 pixels).

What is required to develop new or transition already existing applications to the new screen size?

What should we keep in mind to make applications "universal" for both the older displays and the new widescreen aspect ratio?

Solution 1

1. Download and install latest version of Xcode.
2. Set a Launch Screen File for your app (in the general tab of your target settings). This is how you get to use the full size of any screen, including iPad split view sizes in iOS 9.
3. Test your app, and hopefully do nothing else, since everything should work magically if you had set auto resizing masks properly, or used Auto Layout.
4. If you didn't, adjust your view layouts, preferably with Auto Layout.
5. If there is something you have to do for the larger screens specifically, then it looks like you have to check height of [[UIScreen mainScreen] bounds] as there seems to be no specific API for that. As of iOS 8 there are also size classes that abstract screen sizes into regular or compact vertically and horizontally and are recommended way to adapt your UI.

Solution 2

If you have an app built for iPhone 4S or earlier, it'll run letterboxed on iPhone 5.

To adapt your app to the new taller screen, the first thing you do is to change the launch image to: [email protected]. Its size should be 1136x640 (HxW). Yep, having the default image in the new screen size is the key to let your app take the whole of new iPhone 5's screen.

(Note that the naming convention works only for the default image. Naming another image "[email protected]" will not cause it to be loaded in place of "[email protected]". If you need to load different images for different screen sizes, you'll have to do it programmatically.)

If you're very very lucky, that might be it... but in all likelihood, you'll have to take a few more steps.

• Make sure, your Xibs/Views use auto-layout to resize themselves.
• Use springs and struts to resize views.
• If this is not good enough for your app, design your xib/storyboard for one specific screen size and reposition programmatically for the other.

In the extreme case (when none of the above suffices), design the two Xibs and load the appropriate one in the view controller.

To detect screen size:

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
{
    CGSize result = [[UIScreen mainScreen] bounds].size;
    if(result.height == 480)
    {
        // iPhone Classic
    }
    if(result.height == 568)
    {
        // iPhone 5
    }
}

Solution 3

The only really required thing to do is to add a launch image named "[email protected]" to the app resources, and in general case (if you're lucky enough) the app will work correctly.

In case the app does not handle touch events, then make sure that the key window has the proper size. The workaround is to set the proper frame:

[window setFrame:[[UIScreen mainScreen] bounds]]

There are other issues not related to screen size when migrating to iOS 6. Read iOS 6.0 Release Notes for details.

Solution 4

Sometimes (for pre-storyboard apps), if the layout is going to be sufficiently different, it's worth specifying a different xib according to device (see this question - you'll need to modify the code to deal with iPhone 5) in the viewController init, as no amount of twiddling with autoresizing masks will work if you need different graphics.

-(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

    NSString *myNibName;
    if ([MyDeviceInfoUtility isiPhone5]) myNibName = @"MyNibIP5";
    else myNibName = @"MyNib";

    if ((self = [super initWithNibName:myNibName bundle:nibBundleOrNil])) {


...

This is useful for apps which are targeting older iOS versions.

Solution 5

Here you can find a nice tutorial (for MonoTouch, but you can use the information for Non-MonoTouch-projects, too):
http://redth.info/get-your-monotouch-apps-ready-for-iphone-5-ios-6-today/

1. Create a new image for your splash/default screen (640 x 1136 pixel) with the name "[email protected]"

2. In the iOS Simulator, go to the Hardware -> Device menu, and select "iPhone (Retina 4-inch)"

3. Create other images, e.g. background images

4. Detect iPhone 5 to load your new images:

---

public static bool IsTall
{
    get {
        return UIDevice.currentDevice.userInterfaceIdiom
                    == UIUserInterfaceIdiomPhone
                && UIScreen.mainScreen.bounds.size.height
                    * UIScreen.mainScreen.scale >= 1136;
    }
}

---

private static string tallMagic = "-568h@2x";
public static UIImage FromBundle16x9(string path)
{
    //adopt the -568h@2x naming convention
    if(IsTall())
    {
        var imagePath = Path.GetDirectoryName(path.ToString());
        var imageFile = Path.GetFileNameWithoutExtension(path.ToString());
        var imageExt = Path.GetExtension(path.ToString());
        imageFile = imageFile + tallMagic + imageExt;
        return UIImage.FromFile(Path.Combine(imagePath,imageFile));
    }
    else
    {
        return UIImage.FromBundle(path.ToString());
    }
}

View more solutions

Comments

[bluevoid]

Maybe it's a shoot-the-messenger thing. New resolution AND aspect ratio? New autorotation? Noooo! Actually, more autorotation control could be nice.

[tvon]

It's worth noting that [UIImage imageNamed:@"background.png"] will still only load either "background.png" or "[email protected]", it will not load "[email protected]" if it exists.

[Lukasz]

Is adding "[email protected]" enough or are there any extra options in build settings we can/should adjust?

[Filip Radelic]

@Lukasz it's enough (and only way) to support 1136 px height. Wether your app will stretch properly depends on how you setup your views, but even if you hard-coded everything, it shouldn't be a lot of work to setup autoresizing masks or autolayout.

[Lukasz]

@Filip - I just wanted to clarify if there are any more controlling things to save time for anyone wondering if "is that just it?"

[NiKKi]

@FilipRadelic - The resolution you specified i.e 1136*960, ist it 1136 * 640..??..

[rickster]

@RhythmicFistman: No worries; the new autorotation API is opt-in. And it's pretty well explained in the WWDC videos.

[Raheel Sadiq]

hi sanjay, as we have to find whether its iphone 5 or earlier, so will have to resize everything accordingly, like i say i have a tableview with height 367 with navigation bar and and tabbar, i will have to resize for iphone 5

[PeterK]

Thanks a lot meta, i will take a look at this but i am a very new programmer and really would like to learn how to handle this in clean Objective-C.

[Leonardo]

Let me add that it's going to be a lot of work if you used storyboard, in particular with elaborated non strechable background. Considering there's no possibility to have reusable templates, you have to enter each segue and perform changes.

[Filip Radelic]

This is actually slightly wrong. Any iPhone running iOS 4.0 or later will respond to scale selector on UIScreen and you will have a case where your "standard resolution" code doesn't exec.

[Gruntcakes]

What if your app doesn't use a launch image and you don't want to add one to it? Then how do you migrate to iPhone 5?

[Filip Radelic]

Then I suggest this: stackoverflow.com/questions/12397811/…

[valexa]

What about iPod touch ? What about the next iPhone generation ? One should be referring to screen sizes, 3.5inch/4inch not iPhone/iPhone5

[Shimanski Artem]

Just add this classes in project. You don't need to write additional code. For example, you have one xib-file with background images with resolution 320x480, 640x960, 640x1136 (iPhone 3, iPhone 4, iPhone 5). Just set correct autoresizing mask and name images image.png, [email protected], [email protected].

[Stunner]

+1 Something to be weary about, however, is future compatibility. Currently this piece of code is not safe as it only takes into account the iPhone 5 device, a check for screen size would be a safer alternative.

[Yashesh]

@Filip Radelic i have integrate code for iPhone 5 support in my old app. I am using xCode 4.5.2 when i am run app in iPhone (Retina 4-inch) with iOS 5 it show me my app in full screen size but when i run app in iOS 6 then app is not in proper size in the same simulator. can you please help me about that?

[Filip Radelic]

@Yashesh try to Clean (⇧⌘K). If it doesn't help, please ask a new question and describe your issue.

[SomaMan]

True - this could be part of the utility which returns device type - it was just an example to show how to use different nibs, not really about getting the device.

[Adel]

@ShimanskiArtem But i notice that some components run to another positions !, do you have any idea ????

[Shimanski Artem]

Check your autoresizing masks. I see no other reason.

[SinisterMJ]

One other gotcha to look out for is that viewDidLoad gets called before your xib is resized, so if you are doing any calculations based on things in the nib be aware of how position may shift (or do said calculations in viewWillAppear).

[jonypz]

This will not work for devices that don't support iOS 6 though.

[Hernan Arber]

Saved MY LIFE BRO! Where is the +10 Button?