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.

Answer 2

By using your size class selector in the bottom of the storyboard window, set you sizes as any width and any height and then follow the below auto layout constrains. It will work for you.

First select the view you want to set the auto layout, and then select the pin option from the right bottom corner of your storyboard and then add the constrains as shown in above picture and click button Add 4 constrains

Repeat the process for all views and set the constrains as Fix the top, bottom, left and right constrains of all views except the last button that should be fix from top,left,right and fixed height.

Answer 3

You need to make use of the size class selector in the bottom of the storyboard window.

So for an iPhone 6 or 6 Plus in portrait you would choose a compact width and regular height like this:

And then you would do whatever auto layout stuff for the given device there