CODEWITHSUNDEEP
iosstoryboardautolayout
JeffB6688
JeffB6688

Reputation: 3880

How To Add Storyboard Constraints For Equal Spaced Buttons

I am trying to add two buttons to a view that also contains a table view. I want the two buttons to fill the width of the screen for different screen sizes (portrait only). There is a minimum width of say 100 units for the buttons to hold the text, but I would like them to be wider for larger screens. I would like the space between buttons to be at least 20 units and at least 20 units of space between the outside edges. This seems like it should be straight forward, but I can't make sense of the align and pin constraints in the Storyboard auto layout. So far, the tutorials I have seen are confusing and don't seem to cover the right amount of detail to help me. Please provide me with some guidance. Below is the layout before constraints are put in place.

enter image description here

And here is what the layout would look on a 4" iPhone:

enter image description here

I have already spent a day trying different combinations of constraints, but continue to have problems. Just when I think I have something that works, it won't build because it says I have conflicts.

I am trying to use the following tools (along with the align tools - not shown) to create the proper constraints. I have tried selecting one or both buttons and then using the editor to set the constraints, but each attempt looks bad. Even when I choose "Reset to Suggested Constraints", I get wacko results. Please help with suggestions on how to accomplish this seemingly basic task.

enter image description here enter image description here enter image description here

Upvotes: 0

Views: 905

Answers (1)

Andrei L
Andrei L

Reputation: 3641

You must have:

  • Leading for first button 20
  • Trailing for second button 20
  • horizontal spacing between buttons 20
  • equal widths for both buttons
  • width >= 150 for each button

constraints

Upvotes: 2

Related Questions