What is the relationship between Storyboard form factor & Active Scheme in Xcode using Autolayout?

Question

I have a project in Xcode 5.0.1 targeting iOS7. I'm designing the app with a Storyboard, and I'm using Autolayout.

When I build and run the app, I'm using the iOS Simulator to test it. I switch between the 3.5" and 4" retina schemes to view the app on different screen sizes.

For the most part, everything works fine and Autolayout seems to work great. However, on one screen, there is a problem with the layout, but only under the following conditions:

• I set the scheme to "iPhone Retina (4-inch)" under iOS Simulator
• On the Storyboard, the form factor is set to "Retina 3.5-inch"

In this case, Autolayout seems to work everywhere, with the exception of one place where I'm using a more complicated view structure:

However, if I simply change the form factor on the Storyboard to "Retina 4-inch" everything looks fine on the storyboard, and when it runs, it looks fine too. The same is also true if I leave the form factor at "Retina 3.5-inch" and change the iOS Simulator to "iPhone Retina (3.5-inch)":

So, my question is: Is this the proper behavior? Does the Storyboard form factor have to match the device you are testing on? I wonder because this is the only view in the Storyboard causing issues, and yet, switching the form factor makes everything behave properly, so it would seem that Autolayout is working correctly.

Answer 1

No, Storyboard form factor is there to show you what it looks like in different screen sizes. It does not dictate the size of the views in runtime.

My guess is that there must be some constraint in your view that is not set up correctly to work with 4" screen in that screen.

Answer 2

I know this question is old, but I just experienced and solved the same problem.

My situation was this:

1) I have a UITableView, constrained to the size of my view controller's frame. 2) In viewDidLoad method I added a table header view to it, using the frame of my table view as the header's frame.

UIView *headerView = [UIView alloc]initWithFrame:self.tableView.frame];    
self.tableView.tableHeaderView = headerView;

This gave me a header that hid the contents on the table view until the header was swiped up (similar to Yahoo weather).

3) At the bottom of the header I had a couple labels displaying information that would be visible before the upward swipe.

The problem:

If I launched my app on the 3.5" emulator BUT had the storyboard set to the 4" phone the labels at the bottom of my header view would render below the bottom of the screen, cutting them off.

If I launched my app on the 4" emulator BUT had the storyboard set to 3.5", the labels appeared too high in the table's header view.

If I launched the app on the same size emulator as the storyboard was set to, everything worked perfectly.

After hours of head banging, I realized that my table view's frame was not set using the auto layout constraints when viewDidLoad is called. It was inferring the size from my storyboard at that point, and adjusting based on the constraints later. As a result, my table view header was not the same size as my table view as expected.

Moving the code adding the table view header, based on the size of the table view to the

viewDidLayoutSubviews 

method, when the auto layout constraints had been applied solved the problem.

Answer 3

I had the same issue with a UIScrollView. The answer above from user3847320 is probably correct. But in my case I got a crash while doing the layout stuff in viewDidLayoutSubviews.

To quickly avoid this, just add the following in the viewDidLoad:

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.scrollView.frame = self.view.frame;
}