CODEWITHSUNDEEP
iosiphoneautolayout
Mark W
Mark W

Reputation: 3909

set UIButtons equal distances apart with autolayout

My issue is that I can't find a way to set 3 UIButtons equal distances apart from each other and the 2 outer buttons that same equal distance from the left and right sides.

This is basically a drop-down view that will hold 3 buttons, and the constraints for x positioning all need to be related to each other somehow.

What concept in Autolayout am I missing?

enter image description here

Upvotes: 2

Views: 411

Answers (5)

Shamas S
Shamas S

Reputation: 7549

Autolayout doesn't support this right out of the box.

Luckily there is a clever way how to do this. Insert transparent UIViews between the buttons. Mark these UIView's widths equal to each other. Now they will take equal spaces between each other.

This is how it would look. Portrait. enter image description here

Upvotes: 1

Rathna Kumaran
Rathna Kumaran

Reputation: 113

check this for sharing the parent space with ratio to child. check here

Upvotes: 0

Mehul Thakkar
Mehul Thakkar

Reputation: 12592

  1. Give Y position to all 3 same value
  2. Give equal Height to each of them
  3. Give equal width to each button
  4. give zero horizontal spacing between all 3 views and 2 borderdviews to superview

This will make all the 3 equally spaced with equal width and equal height

Upvotes: 1

larva
larva

Reputation: 5148

  1. set center button2

  2. Add leftcontent view and rightconent view fit bettwen button2 and left, right spaces

  3. button 1 is child and center of lefcontent
  4. button 2 is child and center of right content

You can set constraints like following:

enter image description here

Upvotes: 1

Siriss
Siriss

Reputation: 3777

You can set them to equal distance. Here is an example:

enter image description here

Make sure to set Placeholder on the right for all the buttons, so it does not force the size on runtime.

Set each button to equal width with each other (select all and set equal width). Then, then set the width to placeholder, then set the left and right constraints on the left and right buttons. Then set the horizontal constraint on the center button. Then set the bottom constraint for the center, and constrain the right and left vertical to the center button vertical.

This should not matter with button width. Make sure your constraints between buttons are set.

enter image description here

At run:

enter image description here

Example with smaller button widths:

enter image description here

Upvotes: 0

Related Questions