How to make xib compatible with both iphone 5 and iphone 4 devices

I am trying to layout my xib so that layout fits in both iphone 5 (4 inches retina) and 3.5 devices.

Because I have to support IOS-5 I cannot use autolayout. I have to use springs and Struts.

I tried everything in interface-builder. But either my view is going beyond the bottom of iphone-3.5-inch or not filling completely the iphone-4-inch-retina.

Can someone give a hint how to actually make an xib compatible to both the devices?

For more clarity I am adding screenshots:

When I set size 3.5 in attribute inspector: How to make xib compatible with both iphone 5 and iphone 4 devices

it looks in iphone-5. There is a space below the buttons: How to make xib compatible with both iphone 5 and iphone 4 devices

If I set size 4 inch in interface builder. You can see that bottom buttons are not visible in iphone-4. How to make xib compatible with both iphone 5 and iphone 4 devices

So you will ask what are the settings I am using. Here are they:

How to make xib compatible with both iphone 5 and iphone 4 devices How to make xib compatible with both iphone 5 and iphone 4 devices How to make xib compatible with both iphone 5 and iphone 4 devices

load different xib for iphone5 not working in device

Possible duplicate: How to make xib compatible with both iphone 5 and iphone 4 devices Can I use two xibs with one viewcontroller – re: porting to iPhone 5 I have developed an iPhone app which now I

Convert app from iPhone 5 to iPhone 4 device

How to make ios app compatible with iphone4 devices (i.e 3.5 inch), which is already built in iphone 5 (4.0 inch screen) without creating different xib?

How to make code compatible for both IOS 5 and IOS 4 [iphone]

I am on a new project. I want my code compatible to be for both IOS4 and IOS5 SDKs. I need all my functionalities work both in IOS4 and IOS5. That said, i am not planning to use new features in IOS5 (

Using the same .xib file for both iPhone 4S and iPhone 5

I’m trying to use the same .xib file for two different screen sizes (iPhone 4 and iPhone 5). I’ve checked other solutions here, but I can’t seem to get it working. For example, I’ve checked How can I

Existing ios project making compatible with iPhone 5 [duplicate]

Possible Duplicate: How to detect iPhone 5 (widescreen devices)? I already have a project which is running properly on iPhone 4 and iPad. Now I want to make that project compatible with iPhone 5 (4

How can I create xibs for both iPhone 4 and iPhone 5 using Xocde 4.5

I have set deployment target as iOS 4.3 and creating viewcontroller with xib. But XCode 4.5 is creating xib for iPhone 5 (4 inch) only. How can I create a seperate xib for iPhone 4?

How to make a uitableview in interface builder compatible with a 4 inch iPhone

How do I make a uitableview in interface builder compatible with 4 inch iphone5, and the older iPhone 4/4s? There are three options in Xcode 4.5: Freeform Retina 3.5 full screen Retina 4 full screen

Same xib for iPhone4 and iPhone5 possible?

Is there any way I can design my classes for both iPhone4 and iPhone5 using the same xib?

How to make iPhone4 and below version app compatible for iPhone5?

I have an application in iphone market which works for iPhone 4s and lower version. So now iPhone 5 has been launched which bigger size screen, my question is what all changes i have to do in my appli

How to make an app that would work fine for both iphone 5 and 4s

I am making an iphone app using the latest Xcode i.e Xcode 4.5.1. The current XIB files are suited for iphone 5. I am not sure how to make the app that would work on both the screen sizes i.e 3.5 and

Answers

Without using autolayout you may need to handle a lot of things in code. I assume most of your layout can work well with springs and struts but some UI elements can’t so just manually set the frames of certain objects according to the size of your view is necessary.

  • In your storyboard, click ‘Show file inspector’.
  • Under Interface builder document->Document versioning, select Deployment=iOS 5 (or your choice).

If this doesn’t work, you need to work with each of your views. Select them. Under Attributes inspector for each of them, under View section, see Mode attribute. Set this to ‘Redraw’.

If even that doesn’t give satisfactory result, set the view size to the smallest of all the version you are going to use. And set the Mode attribute = ‘Scale to fill’.

Programmatically, Mode attribute is view.contentmode property.

I have an idea. Let separate your UI into header, body and footer (like website). Then in your code console, locate to Size Inspector and use the Autosizing.

Notice the outside lines of the square, it is your control location against main view. Set the controls (navigation bar, UIImageView, UIButton etc.) in header part and body part attached to Top and the controls (Bookmark, Close etc.) in footer to Bottom.

Everytime you run, the controls will attach to their autosizing settings. You will have a space between header/body and footer on iPhone 5 but I think it’s fine.

  1. You add new category for UIviewController and add this code in .h file

     - (id)initWithNibNameforIphone4:(NSString *)nibNameOrNil4 NibNameforIphone5:(NSString *)nibNameOrNil5 NibNameforIpad:(NSString *)nibNameOrNilpad bundle:(NSBundle *)nibBundleOrNil;
    
  2. Add this code in your .m file

     - (id)initWithNibNameforIphone4:(NSString *)nibNameOrNil4 NibNameforIphone5:(NSString *)nibNameOrNil5 NibNameforIpad:(NSString *)nibNameOrNilpad bundle:(NSBundle *)nibBundleOrNil
     {
       if (self = [super init])
     {
      self = [self initWithNibName:[self CheckDeviceIphone4:nibNameOrNil4 Iphone5:nibNameOrNil5 Ipad:nibNameOrNilpad] bundle:nibBundleOrNil];
      }
      return self;
    
    }
    
      -(NSString *)CheckDeviceIphone4:(NSString *)iphone4 Iphone5:(NSString *)iphone5 Ipad:(NSString *)ipad {
    
        return ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPad) ? ipad :([[UIScreen mainScreen] bounds].size.height == 568) ?  iphone5 :iphone4;
      }
    
  3. Open YouProject-Prefix.pch file and import your category here

  4. now you just use this in all over project like this

     self.firstView=[[firstView alloc]initWithNibNameforIphone4:@"firstView4" NibNameforIphone5:@"firstView" NibNameforIpad:@"firstViewIpad" bundle:[NSBundle mainBundle]];
    

    thanks and any question then comment and dont forget to upvote 🙂

Try adding this to all your controllers which need to support iPhone 5:

- (void) loadView
{
    [super loadView];
    self.view.frame = [UIScreen mainScreen].bounds;
}

Just set view size to None using Interface-builder
It will take view size at runtime, just you need to take care of origin and autosizing for each element(UILabel, UIImage, etc.) in the view.

  • Interface-builder(XIB) -> Attribute Inspector -> Simulated Metrics – Size: None

How to make xib compatible with both iphone 5 and iphone 4 devices

ivanzoid’s snippet above that queries for the whole screen size does the trick so long as you remember to subtract the offsets for navigation and toolbars (totalling 64 under most conditions).

It’s the view height that needs to be adjusted; springs and struts otherwise take care of it.

Retesting my app on the iPhone 5 I only had to do this on one screen with some runtime control position adjustments. Every other case is handled by XIB defaults.

If you dont want use two xib and interested to do using Autosizing here

If your UI is too complicated and contains too many UIControls , then I suggest to do the following in viewDidLoad():

NSLog(@"Iphone %f ",[[UIScreen mainScreen] bounds].size.height);
if ([[UIScreen mainScreen] bounds].size.height == 568) 
{
     //design frames of your controls accordingly add add the controls as subview to
     self.view            
     //this is iphone 5 xib
} else 
{
     //design frames of your controls accordingly add add the controls as subview to
     self.view 
     // this is iphone 4 xib
}

You need not use a different nib for the 3.5 inch and 4 inch devices. Design the app for the 4 inch device and set the AutoResizingMask correctly and it should work correctly.

In your case just set the AutoResizingMask to

[view setAutoresizingMask:UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth];

The autoresizing mask places the view correctly to its position in both the devices.

If you go with the solution of using 2 xib files; in your initWithNibName() method simply make a call to super with the different nib name.

I would test on the original 480 height dimension rather than on the 568 height so that the larger xib file is selected when Apple releases a larger screen. In the future, at least the larger xib won’t be letter-boxed as much as the smaller one.

// From MainView.m
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    CGSize result = [[UIScreen mainScreen] bounds].size;
    if(result.height == 480)
    {
        // iPhone Classic
        self = [super initWithNibName:@"MainView" bundle:nibBundleOrNil];
    }
    else
    {
        // iPhone 5 or maybe a larger iPhone ??
        self = [super initWithNibName:@"MainView5" bundle:nibBundleOrNil];
    }

    return self;
}

Define below line and check condition based on device.

#define IS_IPHONE_5 ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) 
if (IS_IPHONE_5) {
    btnBookmark.frame=CGRectMake(0, 460, 100, 70);
    btnBookmark.frame=CGRectMake(150, 460, 100, 70);
}
else {
    btnBookmark.frame=CGRectMake(0, 360, 100, 70);
    btnBookmark.frame=CGRectMake(150, 360, 100, 70);
}

I was having an issue with 3.5″ vs. 4″ as well, and I misunderstood what was wrong so I wanted to document it here incase it helps anyone.

If you are trying to access self.view.frame it will not be correctly reported until viewDidAppear or some similar event. If you try to access self.view.frame from within viewDidLoad then you can be reported the dimensions of the frame before autosizing takes place.

I was struggling with this today, and no matter what I did, my views were always showing up as 320×480, even when running on the retina 4″ simulator. Even [UIScreen mainScreen].bounds was returning 320×480!

I found that adding the [email protected] launch image was the key to getting iOS to recognize my app as ‘retina 4″ ready’. Once I did that, I found had to do nothing else to get nibs to automatically size without the black bars. No need to have two separate xibs, change settings in Interface Builder, overriding loadView, etc.