CODEWITHSUNDEEP
iosautolayout
J.B.J.
J.B.J.

Reputation: 430

Auto layout - 5 buttons in center

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): IB Of views

So i have the following constraints:

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

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. added trailing to last button

* 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: In IB

In simulator

Upvotes: 6

Views: 5672

Answers (4)

Hiran Stephan
Hiran Stephan

Reputation: 134

  1. Place 5 buttons vertically and horizontally center in UIView

  2. Select all of them and embed them in a stack view

  3. Change distribution to fill equally.

  4. Adjust spacing in attribute inspector to make space between buttons.

  5. Add leading and trailing space and height constraint to stack view. Also vertically align it.

enter image description here

Upvotes: 0

Fogmeister
Fogmeister

Reputation: 77621

OK, here goes...

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

Upvotes: 21

Simon
Simon

Reputation: 2469

What I always do in such a situation is just simply think. How much constraints 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 this are the following constraints (hope I wont forget one)

  • They are all squares (equal width height, not a value)
  • They have equal size, just set it to equal, not to a value
  • Horizontal spacing between elements and edge, set it to fixed size
  • Vertically centered

Upvotes: 0

yoshiiiiiiii
yoshiiiiiiii

Reputation: 944

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.

Upvotes: 1

Related Questions