Arrange 3 UIButtons(of equal width) side-by-side

Question

How to arrange 3 UIButtons side-by-side.I am using Auto-layout. My requirement is:

1.they should be equal width regardless of device

2.occupy vertically from starting to end of the view

i tried different ways, i failed to achieve that. Is it possible through interface builder

Answer 1

There are 2 ways to do this.

Way 1:

With use of equal width constraint of button

Select all 3 buttons and add

top, left , right, height and equal width

---

Way 2: With use of Stack view

Step 1: Add 3 buttons.

Step 2: Select all that buttons, Once you selected, click on the Stack button in the Auto Layout toolbar at the bottom right of the storyboard canvas. see below in image.

Alternatively you can embed in From Editor -> Embed in -> StackView

Step 3: Add Constraints to StackView. like below.

Step 4: Select StackView, Once selected go to Attributes inspector. Change the Distribution to Fill Equally:

And its Done!

Answer 2

Select 3 buttons and give this constraints

  - leading
  - trailing
  - bottom
  - Height
  - equal width 

You can check some references from equal width to 3 labels and from setting two buttons of equal width, side by side