Evenly space multiple views within a container view

Question

Auto Layout is making my life difficult. In theory, it was going to be really useful when I switched, but I seem to fight it all of the time.

I\'ve made a demo proje

Answer 1

Another approach might be to have the top and bottom labels have constraints relative to the view top and bottom, respectively, and have the middle view have top and bottom constraints relative to the first and third view, respectively.

Note that you have more control over constraints than it might seem by dragging views close to one another until guiding dashed lines appear - these indicate constraints between the two objects that will be formed instead of between the object and the superview.

In this case you would then want to alter the constraints to be "Greater than or equal to" the desired value, instead of "equal to" to allow them to resize. Not sure if this will do exactly what you want.

Answer 2

Very easy way to solve this in InterfaceBuilder:

Set the centered label (label2) to "Horizontal Center in Container" and "Vertical Center in Container"

Select the centered label and the top label (label1 + label2) and add TWO constraints for Vertical Spacing. One with Greater Than or Equal the min spacing. One with Less Than or Equal the max spacing.

The same for the centered label and the bottom label (label2 + label3).

Additionally you could also add two constraints to label1 - Top Space To SuperView and two constraints to label2 - Bottom Space To SuperView.

The result will be that all 4 spacings will change their sizes equally.

Answer 3

The correct and easiest way is to use Stack Views.

1. Add your labels/views to the Stack View:

2. Select the Stack View and set Distribution to be Equal Spacing:

3. Add Spacing to nearest neighbor constraints to the Stack View and update frames:

4. Add Height constraints to all the labels (optional). Needed only for views that does not have Intrinsic Size). Labels for example does not need here height constrains and only need to set numberOfLines = 3 or 0 for example.

5. Enjoy Preview:

Answer 4

check https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html having nice description about solving your problem.

Answer 5

With labels this works fine at least:

@"H:|-15-[first(==second)]-[second(==third)]-[third(==first)]-15-|

If the first has the same width as the second, and second the third, and third the first, then they will all get the same width... You can do it both horizontally (H) and vertically (V).

Answer 6

I was able to solve this entirely in IB:

1. Make constraints to align the center Y of each of your subviews to the bottom edge of the superview.
2. Set the multiplier of each of these constraints to 1/2n, 3/2n, 5/2n, …, n-1/2n where n is the number of subviews you are distributing.

So if you have three labels, set the multipliers to each of those constraints to 0.1666667, 0.5, 0.833333.