CODEWITHSUNDEEP
iosobjective-cautolayoutconstraintsios-autolayout
James
James

Reputation: 201

Stretch two buttons horizontally across all devices AutoLayout

I'm attempting to have two buttons side by side that look correct across all devices but no matter what constraints I seem to add in I keep getting issues similar to this (one button larger then the other):

enter image description here

Any ideas what I'm doing wrong as far as adding in constraints? I'm not using code for this simply doing it through the InterfaceBuilder in Storyboard.

Constraints set:

Reply: Leading Space, Bottom Space, Height Equals :45, Trailing to Delete Button

Delete: Trailing Space, Bottom Space, 32:9 Ratio, Height Equals :45, Leading to Reply Btn

Upvotes: 6

Views: 2426

Answers (3)

iamVishal16
iamVishal16

Reputation: 1780

According to me add following constraints

  • Select Reply button adds leading space and bottom space to superview
  • Add center Y constraints to delete button
  • Then align top and bottom space to delete button and also add trailing space to delete button
  • After this select delete button add bottom space and trailing space.

I had similar operations on one of my view, please see this picture for more infoReply Button

Happy Codding :)

Upvotes: 3

mc01
mc01

Reputation: 3770

You need to add a constraint for equal widths, and also remove the '32:9 ratio' constraint, which is currently setting a width for the "Delete" button w/o having a set width for the "Reply" button. That's what's causing the issue.

If you then still have the leading & trailing edges pinned to their respective sides of the container view, and set the space between them to zero, then you should be good.

Upvotes: 2

Morgan Chen
Morgan Chen

Reputation: 1217

With both buttons selected, go to Editor > Pin > Widths Equally. Then set the height, leading/trailing space, space between the buttons, and bottom space.

Upvotes: 13

Related Questions