Auto layout: Xcode 6: Centering UI elements

Question

I'm using Interface Builder in Xcode 6 to make an app and am having trouble getting the text fields and button to centre on the screen for different size screens.

I thought it was a matter of selecting horizontal and vertical centering in container but it doesn't seem to be that when I try it in auto layout. Actually I've tinkered around a bit and I still haven't got it.

I just want to be able to see all of my button and text fields for any size iPhone screen and right now simulator is only showing part of these UI elements like this:

I also want to do this in storyboard and not in code as I'm not at the level of doing this in code yet.

Answer 1

Step 1: Make sure your size class covers all the iPhone screen at least in portrait view. So, change the size class to "wCompact hRegular".

Step 2: After setting the size class properly, add the UITextFields and UIButton to your storyboard. To me, it looks something like-

Step 3: Before, you start adding constraints, you need to remember two things-

a. Your element(UITextField, UIButton, UIView or any component) needs to know its starting position unambiguously, and

b. Your element needs to know its size meaning, its height and width.

In this case, as you want to centre your elements, I am just assuming that it needs to be centred starting from 10 scale from the left edge and should end 10 scales away from the right edge of your iPhone screen. Now, that means, it's width will be different based on the screen size, but its height will be same.

So, I just add the constrains following way for the 1st text box-

Notice, in the size inspector, I set the text box's starting point, x and width in a way that it is 10 pt away from left edge and 10 pt away from the right edge. Don't worry, it's just simple math.

For the 2nd textField, I add the constrain, the same way-

Lastly, for the button, the constrains are following-

Now, you are good to go. Everything is centered.