Automatic layout - 5 buttons in the center

Question

I am trying to get into the Auto Layout business, but I find it pretty heavy.

I am trying to get 5 views of images to display next to each other in the center of the view. They must also be resized to expand their height and width.

Here's what it looks like in IB (and it’s kind of like looking for it when you start the application):

So, I have the following limitations:

• 1: 1 aspect ratio added so they are always square
• The first button "hugs" the left side of the view, so it will be displayed on the side.
• The next 4 buttons have a horizontal distance to the button next to them.
• Each button has a restriction on the top and bottom of the screen, so they will increase if you change the screen size.

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

And I'm just a little here. What am I doing wrong?

Thanks in advance, Best regards - / JBJ

** EDIT ** I added the last restriction to the last button. This ensures that they are all within the screen, but it is quite problematic when we think about its size, so that also did not solve it.

* EDIT EDIT * Tried to remove the upper and lower limit, as they force the size up. Added vertical restriction for everyone. That won't work either. Their display is very small (beautifully built, but too few), and also contains warnings:

Answer 1

OK, here it goes ...

• Add 5 buttons to the view ... No limits.

2. Add horizontal space restrictions between them. Also add restrictions from the first and last views to the supervisor. I also changed the last limit to 0 (note that +306 tells me that it is not true now).

3. Select all buttons and (using the add restriction button) add "Equal Widths" to everyone. Notice that the orange dashed line tells me that now everyone will have the same width.

4. Now align them vertically in the center with this button ...

5. The last thing to do is go to each of them and add a 1: 1 aspect ratio. You will need to add a constraint and then edit it at a ratio of 1.

Make sure you update the frames as soon as you are done to move the buttons to your new restrictions ...

The preview screen shows that it works on all different sizes ...

Answer 2

To place them vertically in the center of the screen, use

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

To place them horizontally Button width = (screen width) - (interval between buttons) - (left distance) - (right distance) / 5;

Same thing for height. The original left limit for the first image will be left.

Answer 3

What I always do in this situation, just think. How many restrictions do I need to 100% define the design? What should I write to tell someone on the phone what it looks like?

In your case, these are the following restrictions (I hope that I will not forget it)

• These are all squares (width height, not value)
• They have the same size, just set it equal, not value
• The horizontal distance between the elements and the edge, set it to a fixed size
• Vertically centered

Answer 4

• Place 5 buttons vertically and horizontally in a UIView

• Select all of them and paste them into the stack view.

• Change the distribution to fill the same.

• Adjust the spacing in the attribute inspector to make a space between the buttons.

• Add a stack and height constraint to represent the stack. Also align it vertically.