CODEWITHSUNDEEP
iosxcodeautolayoutinterface-builder
buttonSmasher96
buttonSmasher96

Reputation: 133

My layout constraints are causing errors when buttons are added to storyboard

I'm trying to make an app for iOS with a keyboard and a couple of buttons. My keyboard is one big view. So I added that first to my storyboard and set a leading, trailing, top and bottom constraint that are anchored to the safe area as so as well as a fixed width and height:

enter image description here

and it looks great on any screen but then as soon as I add a couple of buttons everything goes out of wack

enter image description here

That's how it looks when I switch from iPhone 8 to iPhone 8 plus.

Each button has a fixed width of 60, height of 45, all but the first and last button have their leading constraints anchored to the button on the left.

Here is an image with all my current constraints

enter image description here

I've followed along with what most tutorials and articles do when it comes to auto layout and I'm this point I really don't know what I'm doing.

Here are the errors

enter image description here

I would appreciate any help and advice on how to fix this issue. Thank you!

Upvotes: 1

Views: 193

Answers (1)

Paulw11
Paulw11

Reputation: 114783

If you want the buttons to auto size and auto distribute then it is probably easiest with a IUStackView.

Another approach is to constrain the leading edge of the first button to the leading edge of the superview (or the leading edge of your keyboard view if you want to align the buttons with the keyboard).

Then constrain the leading edge of the second button to the trailing edge of the first and so on until you get to the last button where you constrain its trailing edge to the trailing edge of the superview (or keyboard view)

Finally, the set all of the buttons to have an equal width to the first button. You will now have a fixed spacing between buttons and equal-but-variable sized buttons

Upvotes: 1

Related Questions