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

User · Answer

It s easy for migrating iPhone5 and iPhone4 through XIBs           UIViewController  viewController3  if    UIScreen mainScreen  bounds  size height    568        UIViewController  viewController3      mainscreenview alloc  initWithNibName   iphone5screen  bundle nil  autorelease                        else        UIViewController  viewController3      mainscreenview alloc  initWithNibName   iphone4screen  bundle nil  autorelease

User · Answer

You could add this code   if UI USER INTERFACE IDIOM      UIUserInterfaceIdiomPhone           if    UIScreen mainScreen  respondsToSelector   selector scale                  CGSize result     UIScreen mainScreen  bounds  size              CGFloat scale    UIScreen mainScreen  scale              result   CGSizeMake result width   scale  result height   scale                if result height    960                    NSLog   iPhone 4 Resolution                              if result height    1136                  NSLog   iPhone 5 Resolution                                    else              NSLog   Standard Resolution

User · Answer

You can manually check the screen size to determine which device you re on    define DEVICE IS IPHONE5    UIScreen mainScreen  bounds  size height    568   float height   DEVICE IS IPHONE5 568 480  if  height    568           4     else           3

User · Answer

Checking bounds with 568 will fail in landscape mode  iPhone 5 launches only in portrait mode but if you want to support rotations then the iPhone 5  check  will need to handle this scenario as well   Here s a macro which handles orientation state    define IS IPHONE 5  CGSizeEqualToSize   UIScreen mainScreen  preferredMode  size  CGSizeMake 640  1136      The use of the  preferredMode  call is from another posting I read a few hours ago so I did not come up with this idea

User · Answer

First show this image  In that image you show warning for Retina 4 support so click on this warning and click on add so your Retina 4 splash screen automatically add in your project     and after you use this code    if   UIScreen mainScreen  bounds  size height    568                   For iphone 5           else                  For iphone 4 or less

User · Answer

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  Default-568h 2x png  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  Image-568h 2x png  will not cause it to be loaded in place of  Image 2x png   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

User · Answer

Point worth notice - in new Xcode you have to add this image file Default-568h 2x png to assets

User · Answer

I never faced such an issue with any device as I ve had one codebase for all  without any hardcoded values  What I do is to have the maximum sized image as resource instead of one for each device  For example  I would have one for retina display and show it as aspect fit so it will be views as is on every device   Coming to deciding the frame of button  for instance  at run time  For this I use the   value of the patent view  example   if I want the width to be half of parent view take 50   of parent and same applies for height and center    With this I don t even need the xibs

User · Answer

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    Create a new image for your splash default screen  640 x 1136 pixel  with the name  Default-568h 2x png    In the iOS Simulator  go to the Hardware -  Device menu  and select  iPhone  Retina 4-inch   Create other images  e g  background images Detect iPhone 5 to load your new images      public static bool IsTall       get           return UIDevice currentDevice userInterfaceIdiom                        UIUserInterfaceIdiomPhone                  amp  amp  UIScreen mainScreen bounds size height                       UIScreen mainScreen scale  gt   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

User · Answer

You can use this define to calculate if you are using the iPhone 5 based on screen size    define IS IPHONE 5   fabs    double      UIScreen mainScreen   bounds   size height -   double  568    lt  DBL EPSILON     then use a simple if statement        if  IS IPHONE 5            What ever changes

User · Answer

Use the Auto Layout feature for views  It will adjust automatically to all resolutions   Create two xibs for a controller having controller name with suffix either  iphone or  ipad  At compile time  Xcode will take the right xib based on the device    Use size classes  if you want to create a single xib for both iPhone and iPad  if the view is simple enough to port to iPhone and iPad

User · Answer

First of all create two xibs and attach all delegates main class to the xib and then u can put in this condition mentioned below in your appdelegate m file in    -  BOOL application  UIApplication   application didFinishLaunchingWithOptions  NSDictionary   launchOptions       if    UIScreen mainScreen  bounds  size height    568                     self ViewController     ViewController alloc  initWithNibName   ViewControlleriphone5  bundle nil                      else                        self ViewController     ViewController alloc  initWithNibName   ViewControlleriphone4  bundle nil                you can use it any where in the program depending upon your requirements even in your ViewController classes  What matters the most is that you have created two xib files separate for iphone 4 320 480  and iphone 5 320 568

User · Answer

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

User · Answer

I would suggest to use Autoresizing Mask in your applications according to your UI interface  it saves a lot of trouble and is better than making different UI for iPhone 4 and 5 screens

User · Answer

Rather than using a set of conditionals you can resize your view automatically using the screen size    int h     UIScreen mainScreen  bounds  size height  int w     UIScreen mainScreen  bounds  size width  self imageView frame   CGRectMake 20  80   h-200    w-100      In my case I want a view that fills the space between some input fields at the top and some buttons at the bottom  so fixed top left corner and variable bottom right based on screen size  My app fills the image view with the photo taken by the camera so I want all the space I can get

User · Answer

The only really required thing to do is to add a launch image named  Default-568h 2x png  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

User · Answer

I had added the new default launch image and  in checking out several other SE answers     made sure my storyboards all auto-sized themselves and subviews but the retina 4 inches still letterboxed   Then I noticed that my info plist had a line item for  Launch image  set to  Default png   which I thusly removed and magically letterboxing no longer appeared   Hopefully  that saves someone else the same craziness I endured

User · Answer

In a constants h file you can add these define statements     define IS IPAD UI USER INTERFACE IDIOM      UIUserInterfaceIdiomPad    define IS IPHONE UI USER INTERFACE IDIOM      UIUserInterfaceIdiomPhone   define IS WIDESCREEN  fabs  double   UIScreen mainScreen  bounds  size height -  double 568   lt  DBL EPSILON     define IS IPHONE 5   IS IPAD  amp  amp  IS WIDESCREEN

User · Answer

According to me the best way of dealing with such problems and avoiding couple of condition required for checking the the height of device  is using the relative frame for views or any UI element which you are adding to you view for example  if you are adding some UI element which you want should at the bottom of view or just above tab bar then you should take the y origin with respect to your view s height or with respect to tab bar  if present  and we have auto resizing property as well  I hope this will work for you

User · Answer

This is a real universal code  you can create 3 different story board   Set your project Universal mode  and set your main story iPhone with the iPhone5 storyboard and the ipad main with iPad target storyboard  now add new storyboard target for iphone and modify the resolution for iphone 4s or less now implement your AppDelegate m  iPhone4 4s  is the same for 3 3Gs  one for iPhone5 and make the project universal  with a new Storyboard target for iPad  now in to AppDelegate m under the didFinishLaunching add this code       if UI USER INTERFACE IDIOM      UIUserInterfaceIdiomPhone           UIStoryboard  storyBoard           CGSize result     UIScreen mainScreen  bounds  size          CGFloat scale    UIScreen mainScreen  scale          result   CGSizeMake result width  scale  result height  scale      ----------------HERE WE SETUP FOR IPHONE4 4s iPod----------------------          if result height    960               storyBoard    UIStoryboard storyboardWithName   iPhone4 Storyboard  bundle nil               UIViewController  initViewController    storyBoard instantiateInitialViewController                self window setRootViewController initViewController                ----------------HERE WE SETUP FOR IPHONE3 3s iPod----------------------          if result height    480               storyBoard    UIStoryboard storyboardWithName   iPhone4 Storyboard  bundle nil               UIViewController  initViewController    storyBoard instantiateInitialViewController                self window setRootViewController initViewController                            return YES       So you have created a Universal app for iPhone 3 3Gs 4 4s 5 All gen of iPod  and All type of iPad  Remember to integrate all IMG with myImage png and myImage 2x png

User · Answer

I solve this problem here  Just add  568h 2x suffix to images and  568h to xib s  No needs more runtime checks or code changes

User · Answer

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  gt  568       for iOS devices             iOSDeviceScreenSize height  gt  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

User · Answer

Using xCode 5  select  Migrate to Asset Catalog  on Project General   Then use  Show in finder  to find your launch image  you can dummy-edit it to be 640x1136  then drag it into the asset catalog as shown in the image below   Make sure that both iOS7 and iOS6  R4 section has an image that is 640x1136  Next time you launch the app  the black bars will disappear  and your app will use 4 inch screen

User · Answer

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

User · Answer

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

User · Answer

If you need to convert an already existing app to universal  you need to select corresponding xib file- show Utilities-  Show Size inspector   In Size inspector you can see Autosizing  by using this tool you can convert to existing iOS App

User · Answer

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

User · Answer

Try the below method in a singleton class    - NSString   typeOfDevice               if UI USER INTERFACE IDIOM      UIUserInterfaceIdiomPhone                        CGSize result     UIScreen mainScreen  bounds  size              if result height    480                                return   Iphone                             if result height    568                                return   Iphone 5                                   else              return   Ipad                        return   Iphone

User · Answer

To determine if your app can support iPhone 5 Retina use this   This could be more robust to return the type of display  4S Retina  etc   but as it is written below  it just returns if the iPhone supports iOS5 Retina as a YES or NO   In a common   h  file add   BOOL IS IPHONE5 RETINA void     In a common   m  file add   BOOL IS IPHONE5 RETINA void        BOOL isiPhone5Retina   NO      if UI USER INTERFACE IDIOM      UIUserInterfaceIdiomPhone            if   UIScreen mainScreen  scale    2 0f                CGSize result     UIScreen mainScreen  bounds  size              CGFloat scale    UIScreen mainScreen  scale              result   CGSizeMake result width   scale  result height   scale                if result height    960                     NSLog   iPhone 4  4s Retina Resolution                              if result height    1136                     NSLog   iPhone 5 Resolution                    isiPhone5Retina   YES                          else                 NSLog   iPhone Standard Resolution                        return isiPhone5Retina

User · Answer

Download and install latest version of Xcode  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  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  If you didn t  adjust your view layouts  preferably with Auto Layout  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

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

Examples related to ios

Examples related to iphone

Examples related to screen

Examples related to iphone-5