Auto layout - 5 buttons in center

Question

I am trying to get into the Auto Layout business, but i find it kinda hard.

I am trying to get 5 image views to display next to each other in the center of the view. They need to resize themselves to expand their height / width as well.

This is how it looks in IB (and kinda the way it needs to look when running the app):

So i have the following constraints:

• Added aspect ratio of 1:1 so that they will always be squared
• First button is "hugging" the left side of the view, so it will be displayed in the side.
• The following 4 buttons have a horizontal spacing to the button next to them
• Each button has a constraint to the top and bottom of the screen, so they will get bigger if you resize the screen.

However, when i run it, it looks like this:

And i am just kinda stumped here. What am i doing wrong?

Thanks in advance, Best Regards - /JBJ

** EDIT ** I added a trailing constraint to the last button. This makes sure they are all within the screen, but is kinda problematic when thinking about the size of it, so that didn't solve it either.

* EDIT EDIT * Tried removing the top and bottom constraint since they are the ones forcing the size up. Added a vertical center constraint to them all. This won't work either. Displaying them very small (lined up nicely, but too small) and also comes with warnings:

Answer 1

OK, here goes...

1. Add 5 buttons to the view... No constraints.

2. Add horizontal space constraints between them all. Also add constraints from the first and last view to the superview. I've also changed the last constraint to 0 (notice the +306 telling me it's currently out of place).

3. Select all the buttons and (using the add Constraint button) add "Equal Widths" to them all. Notice the orange dotted outline telling me they now all will have equal widths.

4. Now align them in the vertical centre of the view with this button...

5. The last thing to do is to go to each one and add the 1:1 aspect ratio. You'll need to add the constraint and then edit it to a 1 ratio.

Make sure you update the frames once you're done to reposition the buttons to their new constraints...

The preview screen shows this working at all different sizes...

Answer 2

For placing them at the centre of the screen vertically use

NSLayoutConstraint *constraintHorizontal = [NSLayoutConstraint constraintWithItem:self
                                                                    attribute:NSLayoutAttributeCenterY 
                                                                    relatedBy:NSLayoutRelationEqual
                                                                       toItem:self.superview 
                                                                    attribute:attribute 
                                                                   multiplier:1.0f
                                                                     constant:0.0f];

For placing them horizontally Button width = (width of the screen)-(button spacing dimension)- (left distance)- (right distance)/5;

Same for height. Initial left constraint for the first image view will be left distance.