CODEWITHSUNDEEP
iosxcodeuiview
Praveen Kumar
Praveen Kumar

Reputation: 567

How to divide UIView in to three even sized subviews horizontally in XCODE?

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

enter image description here

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

Upvotes: 4

Views: 4288

Answers (5)

J Manuel
J Manuel

Reputation: 3070

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

Upvotes: 2

Devang Tandel
Devang Tandel

Reputation: 3008

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.

enter image description here

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

  • Add Trailing margin Constraint. (Right)

enter image description here

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.

Upvotes: 6

Yun CHEN
Yun CHEN

Reputation: 6648

First, hold "control" key and drag the view to its container view, enter image description here

To set view's width equal to container view's width: enter image description here

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

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

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.

Upvotes: 5

Jitendra Modi
Jitendra Modi

Reputation: 2394

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

enter image description here

Upvotes: 3

Gurdev Singh
Gurdev Singh

Reputation: 2165

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.

Upvotes: 1

Related Questions