11
votes

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

If I chose Retina 4, then in the 3.5 inch phone it crosses/overflows the screen border

Using code, I can set the frame accordingly, but then what is the use of using interface builder?

How should one do it using Interface Builder?

EDIT

My question is for iphone 5 retina 4 inch screen. When inspecting the size of the view which has a status bar and navigation bar, here is the value of self.view.frame.size.height/width, frame 320.000000 x 416.000000 in case I choose freeform/none/retina 3.5

The autoresizing options are set so that the view expands in all directions, that is all struts and springs are enabled.

EDIT For testing in iOS6 simulator, If I set the following in code

self.tableView.frame    = CGRectMake(0, 0, 320, 546);
self.tableView.bounds   = CGRectMake(0, 0, 320, 546);
self.view.frame         = CGRectMake(0, 0, 320, 546);
self.view.bounds        = CGRectMake(0, 0, 320, 546);
NSLog(@"%2f - %2f", self.view.bounds.size.width, self.view.bounds.size.height);
NSLog(@"%2f - %2f", self.tableView.bounds.size.width, self.tableView.bounds.size.height);

I get the following output

 320.000000 - 546.000000
 320.000000 - 546.000000

And All the rows below the 480 px from the top are not selectable, as the 'view' still thinks they are out of bounds.

MY SOLUTION

Set the size to Retina 4 for all screens, even the main window xib file. It seems to work fine even on the iphone 4 after this. And all rows below 480px are now clickable in iOS 6 simulator

5
Have you looked at the autoresize options in IB?ott--
Add startup image [email protected] all will be fine. IB have option to simulate 4inches - in the bottom right corner near zoom buttons....k06a
I had the same issue that the bottom row was not clickable. I ended up setting the size to Retina 4 for all screens as well.RocketMan

5 Answers

18
votes

BEWARE of setting the size attribute to "Retina 4 Full Screen" if you present actionsheets in your application. This solution actually sets the dimensions of the main Window to the dimensions of the iPhone 5. In my case, setting this affected display in the iPhone 4 when you try to show an action sheet because it will try to show it from below the viewable screen.

The proper solution that works for all cases is to set the size to none and detect the screensize in the app delegate didfinishloading method and set the main window to that size or set the rootviewcontroller's view to that size. Actionsheets will work correctly.

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

self.window.frame = CGRectMake(0, 0, [[UIScreen mainScreen]bounds].size.width, [[UIScreen mainScreen]bounds].size.height);

}
11
votes

Choose your xib file and change the Size attribute.

enter image description here

3
votes

From what i have understand u want to create a table view which can be applicable to both iPhone 4 and 5. First thing first i havnt tried the Xcode 4.5, but the code

 CGRect fullScreenRect = [[UIScreen mainScreen] bounds];
 theTableView.frame = CGRectmake = (0,0,fullScreenRect.width,fullScreenRect.height);

the fullScreenRect will return the bound of the current device whether its 3.5 or 5 inch. and u can set the height and width dynamically.

Let me know if it worked..

Cheers

W

3
votes

Settings like choosing from "freeform", "Retina 3.5" or "Retina 4" in Interface Builder are in the "Simulated metrics" section of the right panel (note the emphasis added).

This means that they are only used to show you how the view will look when displayed at those dimensions. Typically you use this to know at design time what space you will have to layout your views. But the UIView of a UIViewController is always resized when displayed on screen at the end.

For example if you know that you will have a status bar and a NavigationBar at the top, and a TabBar at the bottom, you will have less space to organize your remaining view on the screen, so selecting these in the "Simulated Metrics" section of the panel will help you see which space you have in the view and avoid placing elements at say y=460 that will go offscreen at runtime due to these NavBar and TabBar.

But at the end, the UIViewController will resize its view so that it takes the maximum space available, moving the subviews according to the AutoresizingMask properties (the struts & springs you can configure in the Size Inspector pane in IB).

In conclusion, the only thing you have to do is:

  • Prefer choosing the "Retina 3.5" simulated metric for your view to see in Interface Builder the smallest size you may have when this view is displayed (helping you avoid to placing views and controls in a portion of you screen that will be only visible in 4" screens but not on 3.5" screens and desining your view by keeping in mind the smallest common zone)
  • Configure your AutoResizing Masks correctly (or use AutoLayout and constraints if you plan to release your app for iOS6 only and not iOS4 or iOS5) so that your views will me rearranged correctly when the screen is higher (Retina 4").
0
votes

if your interface is using Storyboard:

Open *.Storyboard with "Text Editor"

and go the end bottom find <simulatedScreenMetrics key="destination" type="retina4"/>

delete type="retina4"

then it will be default size in 3.5"