Question

Notice the Nib on the left displays a layout with 2 UILabels, 1 UITextView and 2 buttons. The Y coordinate of the buttons changes at runtime. What is causing this and how do I fix it?

Update #1 – Problem goes away when I shift to a iPhone Retina 4-Inch display.

Update #2 SOLVED – Problem goes away when by unchecking ‘Autolayout’ in the xib properties.

Answer 1

It looks like you’re using iOS 6 and a storyboard with the 4-inch “tall” iPhone screen form factor simulated. Assuming you are using Auto Layout, you probably have a constraint added to one or both of the buttons that pins them to the bottom of their superview. When you then run your app on the 3.5″ screen iPhone simulator, the buttons appear to “move up” as their superview has gotten shorter than on your storyboard.

Find the button with the icon pictured below while editing your storyboard, and click it to toggle the simulated screen size between the 3.5-inch and 4-inch form factors. You should see your buttons re-layout based on their constraints.

To set your buttons’ spacing relative to the top instead of bottom of their superview, select both buttons and from the menu bar choose the Editor menu > Pin > Top Space to Superview. (Or use the Pin button pictured below directly from the storyboard.)

There’s a good introductory tutorial to Auto Layout here, if you haven’t learned about it yet.