Layout messed up on iPhone 5

Question

I use MainWindow.xib for the layout of my app. I set everything on the view controller attributes simulated metrics to iPhone 3.5 retina. There is no image set for the iPhone 5 Default, yet it still tries to run the app full screen on an iPhone 5, causing the screen to be all out of sorts. Any thoughts on fixing this?

Here is on 3.5" screen:

Here is on 4" screen:

Answer 1

You need the constraints on your labels and fields to be connected to the top of the view, not the bottom. By default, IB pins things to the closest edge. Use the pinning menu to achieve this, then delete the constraints that connect them to the bottom.

Alternatively you can switch to the 4" layout in IB and set things up there.

I have written about editing constraints in interface builder here, hopefully that will be useful to you.

Answer 2

As for fullscreen mode, I think Xcode will put -568.png image for you, you might want to check?

As for fixing the layout, it seems that all you need is to fix top strut on all text fields, so the top position is always the same.

Answer 3

set UITextField autoresizingMask to UIViewAutoresizingFlexibleBottomMargin

recipientLabel.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin;
nameLabel.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin;
...