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.<

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.