How to divide UIView in to three even sized subvie

Question

I Have to divide a UIView horizontally into three even sized subviews using Xcode. I tried to use constraints. I got the following result.

In some screen sizes. In small screen phones the leftmost and rightmost sub-views are same size. But, the center sub-view is very small in small screens and very large in big screens. So Please let me know the correct way to split the UIView into three even sized sub-views horizontally. Thanks in advance.

Note: I'm using Xcode 8.1

Answer 1

Setting up constraint is technique that every used according to developer skills and usability. You will came with own one day. Here is the way i am using to handle situation like your.

1)Create 3 views with equal width on storyboard.(You have already Done that) 2)Select all 3 Views together .

• Add Leading Constraint(left)
• Add Top Constraint.
• Add Height/Bottom Constraint.(According to your needs/requirement)
• Add Equal width Constraint.(MUST)

Here is an image showing above step at once.

Now Select Last View ie. 3rd View (You must select only Last view)

• Add Trailing margin Constraint. (Right)

You are good to go now.

• Height/Bottom and Top constraint, you have to add according to your requirement.

Like i said earlier, go with your convenience.

Answer 2

First, hold "control" key and drag the view to its container view,

To set view's width equal to container view's width:

Second, change the multiplier value to 0.3333(means 1/3 width of container):

Next, set 2nd view's width equal to the 1st one:

Finally, add 3rd view and apply same set as 2nd one. And remember to add "Same Vertical Center to 1st View" constraint and "xx Leading Space" constraint for 2nd and 3rd view. You will get three same width views fill the container.

Answer 3

Take all views with same width and same height and give constraint like in image

Answer 4

Set the constraints of Equal width by selecting all the three Views and provide the constraint of horizontal spacing of 1 point. It will divide the views into 3 equal width views.

Answer 5

I would suggest to use UIStackView. If you never use it, it is like a container of things (UIViews in your case), and you can set it to use equally proportions (Distribution: Fill Equally). This means that for every element you drag into the stackview, it will set it width proporcionally.

If you drag 1 item, it will have 100% of the UIStackView width.

If you drag 2 items, each one will have 50% of the width.

If you drag 3, each one will have 33%. And so on.

You can even use a vertical or horizontal stackview. I find it very usefull. Here you have the official documentation: https://developer.apple.com/reference/uikit/uistackview