How to develop or migrate apps for iPhone 5 screen

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?

Answer 1

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: [e-mail]. 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 "[e-mail]" will not cause it to be loaded in place of "[e-mail]". 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
    }
}

Answer 2

There is a slight problem when testing on both iOS device and iOS Simulator. It appears that simulator (XCode 6.0.1) gives switched values for width and height in [[UIScreen mainScreen] bounds].size depending on a device orientation.

So this might be a problem when determinating the right physical screen size. This code helps also to distinct all 2014. iPhone model generations:

• iPhone4s
• iPhone5 (and iPhone5s)
• iPhone6 (and iPhone6+)

It can also be easily changed to make the distinction between e.g. iPhone6 from iPhone6+.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    CGSize iOSDeviceScreenSize = [[UIScreen mainScreen] bounds].size;

    if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone)
    {
        if (iOSDeviceScreenSize.width > 568 || // for iOS devices
            iOSDeviceScreenSize.height > 568) // for iOS simulator
        {   // iPhone 6 and iPhone 6+

            // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone6
            storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone6" bundle:nil];

            NSLog(@"loaded iPhone6 Storyboard");
        }
        else if (iOSDeviceScreenSize.width == 568 || // for iOS devices
                 iOSDeviceScreenSize.height == 568) // for iOS simulator
        {   // iPhone 5 and iPod Touch 5th generation: 4 inch screen (diagonally measured)

            // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone5
            storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone5" bundle:nil];

            NSLog(@"loaded iPhone5 Storyboard");
        }
        else
        {   // iPhone 3GS, 4, and 4S and iPod Touch 3rd and 4th generation: 3.5 inch screen (diagonally measured)

                // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone4
            storyboard = [UIStoryboard story    boardWithName:@"MainStoryboard_iPhone" bundle:nil];

                NSLog(@"loaded iPhone4 Storyboard");
        }
    }
    else if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPad)
    {   // The iOS device = iPad

        storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPadnew" bundle:nil];

        NSLog(@"loaded iPad Storyboard");
    }

    // rest my code
}

Answer 3

You can use the Auto Layout feature and create the design using iPhone 5 screen resolution and it will work for the both 4" and 3.5" devices, but in this case you should have a enough knowledge of layout manager.

Answer 4

Peter, you should really take a look at Canappi, it does all that for you, all you have to do is specify the layout as such:

button mySubmitButton 'Sumbit' (100,100,100,30 + 0,88,0,0) { ... }

From there Canappi will generate the correct objective-c code that detects the device the app is running on and will use:

(100,100,100,30) for iPhone4
(100,**188**,100,30) for iPhone 5

Canappi works like Interface Builder and Story Board combined, except that it is in a textual form. If you already have XIB files, you can convert them so you don't have to recreate the entire UI from scratch.

Answer 5

Point worth notice - in new Xcode you have to add this image file [e-mail] to assets

Answer 6

I guess, it is not going to work in all cases, but in my particular project it avoided me from duplication of NIB-files:

Somewhere in common.h you can make these defines based off of screen height:

#define HEIGHT_IPHONE_5 568
#define IS_IPHONE   ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone)
#define IS_IPHONE_5 ([[UIScreen mainScreen] bounds ].size.height == HEIGHT_IPHONE_5)

In your base controller:

- (void)viewDidLoad
{
    [super viewDidLoad];
    if (IS_IPHONE_5) {
        CGRect r = self.view.frame;
        r.size.height = HEIGHT_IPHONE_5 - 20;
        self.view.frame = r;
    }
    // now the view is stretched properly and not pushed to the bottom
    // it is pushed to the top instead...

    // other code goes here...
}