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

Basically, I have two UIButtons inside my UITableViewCell positioned below that needs to be always centered and with same widths. This is how I made it work in Xcode 7.2. I'm using Swift by the way, if that's in any way related.

1. In the left button, I gave it a leading and bottom constraints
2. In the right button, I gave it a trailing and bottom constraints
3. In the right button, I gave it a leading space to the left button
4. Lastly, in my right button, I gave it an equal width constraints to the left button.
5. Done.

Answer 2

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 :

Answer 3

You can achieved as below way also.

1.Take Leading space for left button, Trailing space for right button.
2.Construct Outlets for both Leading and Trailing constraints.

 __weak IBOutlet NSLayoutConstraint *leadingConstraint;
 __weak IBOutlet NSLayoutConstraint *trailingConstraint;

3.Caluclate constants as below formula.

NSInteger constant = (SCREEN_WIDTH - (CGRectGetWidth(leftButton.frame) + CGRectGetWidth(rightButton.frame))) / 3;
    leadingConstraint.constant = constant;
    trailingConstraint.constant = constant;

Hope it will helps you.

Answer 4

Great tips. In my case i wanted the buttons to be centered 10 pixels apart from the center of my view so my math is slightly different

leadingConstraint.constant = (self.frame.size.width / 2.0) + 5.0;
trailingConstraint.constant = (self.frame.size.width / 2.0) + 5.0;

Answer 5

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 6

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.