Arrange 3 UIButtons (of equal width) side by side

Question

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

1. they should be the same width regardless of device

2.ccupy vertically from start to finish view

I tried different ways, I couldn’t. Is this possible with the interface constructor

Answer 1

There are two ways to do this.

Method 1: When using the button width limit

Select all 3 buttons and add equal width

---

Method 2: Using the Stack View

Step 1: Add 3 Buttons.

Step 2. Select all of these buttons. Once you have selected, click the Stack button in the auto layout panel at the bottom right of the storyboard canvas. see below in the image.

Alternatively, you can embed in From Editor → Paste in → StackView

Step 3: Add Constraints to StackView . as shown below.

Step 4: Select StackView, then select “ Attribute Inspector .” Change the Spread to Fill Evenly :

And his done!

Answer 2

Select 3 buttons and set these limits.

- leading - trailing - bottom - Height - equal width 

You can check some links from equal width by 3 tags and set two buttons to equal width, side by side

Answer 3

Set the restrictions as follows:

• Select all buttons and set an equal width limit, this limit will support the width of all buttons.
• Select all buttons and set the bottom field, this will hold the entire button at the bottom of the screen in all form factors.
• Set the left margin and the right margin of the first and last buttons, respectively, with the inscription.
• Select the button in the middle and set the limit to the left and right margins.

Answer 4

This is possible through the interface builder. This is what you do

• Create a UIViewController from your storyboard by clicking the Object Library button.

• Now select and drag the three buttons and add them to your view controller. Do not forget to add buttons here. Drag and select "View of your view controller." Be sure to place the buttons at the bottom of your view controller.

• After your three buttons are added, it should look something like this:

• Now comes the interesting part. Now you need to add restrictions to your buttons so that they always remain at the bottom and the same width. For simplicity, let me call the three buttons the left, center, and right buttons. To save a button on a button, select the center button and press CONTROL on the keyboard and drag the button onto the view. Choose a restriction

Vertical distance to bottom layout guide

and save the constant = 0. Now for the other two buttons you will do it. Just press CONTROL and drag to the center button. Choose a restriction

lower

and save the constant for this restriction as 0. This ensures that all buttons remain at the bottom.

Add a height limit as much as you want for all three buttons.

In the end, these are the limitations you must have.

Center Button Limit

Left Button Restriction

Right button restriction

5. Now all you have to do is Control + drag the width limit of the center button to the ViewController.swift file and change the width constant to

   widthConstraint.constant = UIScreen.mainScreen (). bounds.width / 3

What is it.