AutoLayout: Vertically centering two UIViews in a superview that can resize

Question

I have two UIButtons, one on top of the other, in a superview whose height can be resized. The two buttons should have a constant vertical spacing between them, but the top and bottom spacing should resize so that the two buttons stay centered in the superview as it resizes.

I tried creating two less-than-or-equal constraints (with equal priority) on the spacing to the superview for each button, as well as a constant vertical spacing between the buttons, as shown below:

(The reason why it's less-than-or-equal here is because this view is defined at the given height in IB for 4" screens, but can be shrunk for 3.5" screens.) However, this doesn't do the trick, as you can see from the screenshot while the app is running:

It's almost as if you want to be able to tell AutoLayout that the two constraints themselves should have equal values, even if they are both set to "less-than-or-equal". Is there any way to do what I'm trying to do, or perhaps a better way?

Answer 1

The simplest way to vertically center is to add a NSLayoutAttributeCenterY constraint - preferably to the element that is near the center of the view. And if all views have a vertical spacing constraints, then they will all be centred. No need to muck with the view hierarchy or add spacer views.

[self.view addConstraint:
    [NSLayoutConstraint constraintWithItem:button2 
                                 attribute:NSLayoutAttributeCenterY
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeCenterY 
                                multiplier:1.0 
                                  constant:0]];

If you need to adjust the positioning, set the constant. For example: constant:-30 will move it up 30 points.

You can also anchor elements based on different logical areas of the view. For example, if you wanted to anchor your first button at 25% of the view height, you can set the multiplier to 0.5.

Answer 2

This is so trivial to do in IB.

1) ⌃ drag from button1 to top. select "center horizontally in container".

2) ⌃ drag from button1 to left. select "center vertically in container".

3) do the same with button2.

4) now the only thing left to do is size the buttons because this is what it looks like.

This is also very trivial.

5) ⌃ drag from button1 to the left. select "leading space to container margin".

6) ⌃ drag from button1 to the right. select "trailing space to container margin".

7) do the exact same thing with button2.

The finished product, looks like this (NB I didn't quite center them, but I could have easily enough):