11

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

Anand
  • 4,182
  • 6
  • 42
  • 54
  • Have you looked at the autoresize options in IB? – ott-- Sep 13 '12 at 12:52
  • Add startup image Default-568h@2x.png all will be fine. IB have option to simulate 4inches - in the bottom right corner near zoom buttons.... – k06a Sep 13 '12 at 13:11
  • 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 Sep 17 '12 at 05:16

5 Answers5

18

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);

}
M. Alvanez
  • 181
  • 2
  • 5
    Thanks, using `[window setFrame:[[UIScreen mainScreen] bounds]]` is enough and it is shorter. ;-) – Tomáš Linhart Oct 26 '12 at 19:28
  • I'm using this and still get the "black bars" above and below my application. Any idea to what am I doing wrong? Thanks! – daveomcd Dec 01 '12 at 02:25
  • 1
    FIXED: Looked at my warnings... I had one saying I was missing a Retina 4 display image. I clicked it then clicked "Add" and it added a default image which fixed my problem. Hopefully this helps someone else. – daveomcd Dec 01 '12 at 02:34
11

Choose your xib file and change the Size attribute.

enter image description here

fannheyward
  • 18,599
  • 12
  • 71
  • 109
  • yes i know, doing that does not help as it does not work on the other option's screen size. – Anand Sep 17 '12 at 13:03
  • This definitely works to fix a non-responsive tabbar on 4 inch displays - set it to Retina 4 Full Screen, and then all sizes will work (both 4 inch and 3.5 inch). Not sure what the bug is but it's probably something in the way xCode saves Nib files. – Kenny Grant Sep 18 '12 at 11:19
3

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

WaaleedKhan
  • 685
  • 7
  • 18
  • I know how to do it in code. I was looking at how to do it in the interface builder – Anand Sep 13 '12 at 13:46
  • 1
    check my edits, even after setting in code, the parts below 480 px are not selectable/clickable – Anand Sep 14 '12 at 07:32
  • +1, I need to change programatically the size, the correct code it is: `CGRect fullScreenRect = [[UIScreen mainScreen] bounds]; self.view.frame = CGRectMake (0,0,fullScreenRect.size.width,fullScreenRect.size.height);` –  Jan 16 '13 at 10:07
3

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").
AliSoftware
  • 32,623
  • 6
  • 82
  • 77
  • Not true, 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 – Anand Sep 13 '12 at 14:02
  • Yes, and? That's the size of the view if presented by a ViewController that has a status bar (20pt), and a NavigationBar (44pt) on a 3.5" screen (480pt in height), so seems legit to me. – AliSoftware Sep 13 '12 at 14:50
  • my question is for iphone 5 retina 4 inch!! height is not 480px!! – Anand Sep 14 '12 at 06:35
  • am testing on the iOS 6 simulator. – Anand Sep 14 '12 at 06:39
  • Oh you mean that even when you test on the iPhone 5 (4") simulator, it gives you 480pt and not 568pt? Sorry then, didn't try it myself yet, but if it is the case it is very strange (and not very logical)… Is your application taking the whole screen height in the iPhone 5 simulator, or do you have black bands at the top and the bottom? What is the value of [UIScreen mainScreen].bounds ? – AliSoftware Sep 14 '12 at 10:28
  • 1
    yep, am trying in the new iOS6 simulator, thought it was clear in the questions "compatible with 4 inch iphone5". – Anand Sep 17 '12 at 13:02
0

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"

Frank Wu
  • 51
  • 3