How to split UIView into equal parts using autolayout?

Question

I am struggling with finding a logical rule or a constraint that would allow me to split the contents of UIView to equal parts.

To be more concrete, imagine a UIView with initial width of 300pt. Then let's place three subviews and set them up so that each will effectively have a width of 100 and origin.x will be 0, 100 and 200. One subview will constitute a third of superview. If I the resize the superview, all three subviews will get wider horizontally but they will keep equal size.

Any help?

Answer 1

1. Place your view.
2. Place and position your three subviews with each taking one third of the width.
3. Select all three subviews by holding cmd and clicking on each.
4. Go Editor > Pin > Widths Equally

Make sure you set constraints for subview x and y position. In your case, you'd pin leading space of the most left subview to superview, and trailing space of your most right subview to superview ( Editor > Pin > Leading/Trailing space to superview) and vertical spacing depending on your case.

Answer 2

Equal width / height constraints will do this for you.

In visual format, the constraints would be:

|[view1][view2(==view1)][view3(==view1)]|

The left one is pinned to the left of the superview, the right one is pinned to the right, the centre one is pinned to the two outer ones and all three are made to be equal widths.

Answer 3

In iOS 9 Apple introduced the StackView. Drag a Vertical StackView inside UIViewController. Drag 3 UIView from Object library inside StackView. Select StackView then inside attribute inspector set Distribution to Fill Equally and spacing to 5 or whatever you want. Change the color of all three view you will see they are split in three parts equally.

Result: