Xcode Auto Constraints not Working Properly

Question

For some reason when I add constraints, by clicking "Add Missing Constraints," it actually looks worse than without constraints in the iPhone 4S simulator.

Here is how it looks in Xcode:

Here is how it looks in the simulator:

Notice that even with the auto constraints, the top text is hidden in the simulator. I want it to look exactly like it looks in Xcode, but I cannot figure it out. I have played around with the constraints for hours now to no avail. It looks better and better with the bigger screen size I use in the simulator, but I need it to have a universal look across all devices. What am I doing wrong?

Answer 1

First remove all constraint for the view.

1) Apply pin Width and Height constraint for your all three controls.

2) Apply Top space from Top Layout Guid for all three controls.

3) Apply Align Centre Horizontally in Superview of your all your three controls.

After applying above constraints your controls will appear in centre in any device.

Answer 2

I believe the three controls should be centre aligned with the top view and the vertical space between the three controls is constant.

The controls will automatically adjust their width according to the text given. So all you have to do is to only add the constraints for their positions. So each control will need two constraints, only for Y position, another for X position.

And of course, you can change the multiplier of the constrains to support the Landscape orientation.