Centering two buttons with Cocoa Auto Layout

Question

I have a problem with Cocoa Auto Layout and can't get my head around this problem. All I'd like to achieve is to have two buttons always centered in a view as depicted below.

I've tried lots of different approaches without any success :( please help me out here.

Answer 1

I'm writing this from memory so hopefully all the information is right. I'm using XCode5. Here's the way I ended up doing this starting from no constraints:

1. Select both buttons and add constraints to set their height and width in the Add New Constraints window accessible from the second button on the bottom right of the IB canvas.

2. With both buttons still selected add constraints to set their Y position. Either the space above or space below in the Add New Constraints window will do.

3. Now select Button 1 and add an alignment constraint "Horizontal Center In Container" in the Add New Alignment Constraints window accessible from the first button the bottom right of the IB Canvas. By default the "constant" value of the added constraint is 0. We want to change that because it is wrong.

4. At this point button 1 will have a yellow bar running vertically through it. This is a warning indicating that the horizontal center of the button is not equal to the horizontal center of the container + the constraint's constant (0). The number on the vertical bar is how far off from center the button is. Remember that number.

5. Either double click the vertical yellow bar on Button 1 (dexterity required) or select button 1 go to the left pane and click on the ruler and "select and edit" the constraint called "Align Center X to:".

6. Input the number from Step 4 in the text box labeled "constant". Button 1 has now satisfied all the constraints it needs to for its display. It has a width, height, Y (top space or bottom space constraint), and now an X (horizontal center alignment). Button 2, however is still missing its X position which it can piggy back off Button 1.

7. Select Button 2, goto the Add New Constraints window and simply set the leading space to Button 1 (the left bar off the top white box).

You should now have two buttons which will always stay in the center of their container at a fixed width apart from each other.

Answer 2

A neat trick with Auto Layout is to use invisible views as spacers. The constraint system still lays them out as normal. In this case, that space between the two buttons can be an invisible view. You can use the constraints from this constraint string:

@"[button][invisibleView(5)][button2(==button)]"

Then create a constraint setting invisibleView.centerX = superview.centerX.

Answer 3

Another trick to do this is to align the right side of button to be half the size of the space away from the Center of superview, and the left side of button2 to be half the size of the space away from the Center of superview.

This only really works if you have a superview that only surrounds the two views you want to centre though.

Answer 4

If you have fixed width buttons and you want fixed distance between two then following steps can do the work :

1. add Width and Height constraint to button1 Example value: 100 height and 100 width.
2. select both buttons and add constraint Equal Widths and Equal Heights.
3. add Horizontal Spacing between button1 and button2. or we can say add Leading Space to button2 from button1. Example value : 150
4. select button1 and add constraint Horizontally in Container with -125 value.
5. add other constrains like Vertical Spacing to Container etc as per needed.

Example value 125 is equals to (button1 width / 2) + (Horizontal Spacing/2) which is 100/2 + 150/2 = 125.

So adding Horizontal in Container to -125 will move the buttons to left and that will make this layout center in screen.

Example layout and Constraints images attached below :