Xcode Layout Not Appearing Right In Simulator or Real Device

Question

I have a layout working fine in Xcode storyboard for a Master-Detail splitview app but when I run it in the Simulator or on an actual device it appears slightly messed up and I have no idea why.

The image in Xcode looks like this;

The layout in Simulator and Device looks like this

Answer 1

This is almost certainly a problem with the autoresizing settings of your subviews (aka "Springs and Struts").

You are building a UISplitViewController-based application. Note that the dimensions of your Detail View Controller's frame are different when your app is running in portrait vs landscape mode. In your storyboard screenshot above you see the landscape-sized frame. The screen capture from your simulator shows the portrait-size frame. You'll need to set the struts and springs of your subviews (the UIPickerView, the brushed metal buttons, the white box below, etc) so that these elements resize (or not) and maintain their relative (or absolute) position in the parent view.

The easiest way to do this is to set the values in your storyboard, using the Size Inspector in the right column. Select which element you want to change settings for and then look for this:

By clicking on the red arrows inside the inner box you will toggle on/off the "springs", which determine whether your subview expands when the parent view expands, or whether it maintains its original size when that happens. By clicking on the outer red I-bars you will toggle on/off the "struts", which determine whether you subview will maintain a fixed distance from its parent view's edge when the parent view's size changes. Setting the right combination of these will make your view to look correct in both portrait and landscape orientations.

You can also change these settings programmatically in your code by setting the view's autoresizingMask property. See for reference:

http://developer.apple.com/library/ios/DOCUMENTATION/WindowsViews/Conceptual/ViewPG_iPhoneOS/CreatingViews/CreatingViews.html#//apple_ref/doc/uid/TP40009503-CH5-SW5