Center multiple UILabels on a line

Question

I want to horizontally center multiple UILabels - as a group - on a line in Interface Builder. One the straight view controller i could not figure out how to do this. I read comments about place the UILabels in a View and then centering the view in the view controller. When I tried this, overtime I said to update frames in the interface builder, the View would be resized down to nothing. (i.e. its height and width would be set to 0 by IB). I need to know how to get this to work in interface builder.

An example of a line containing multiple labels I want horizontally centered is below. The braces simply indicate the start and end of each label and are not art of the text. The <- 6 -> is meant to indicate the trailing space from label 1 to label 2 is 6

Label 1 Label 2 [Rating: 0.0]<- 6 ->[Distance: 125.34 Kilometers]

Any suggestions would be greatly appreciated.

Here is an EXACT example of what I have done and it does not work:

1. Create a new view controller in IB
2. Place a page label at the top of the page centered horizontally and aligned to the top of the layout guide.
3. Add a view with the following constraints on the page:

4. Now add two labels to the view with the following constraints:

   

5. Once this is done I get the following error and updating the frames will cause it to be give a height and width of 0

   

Here is what the page looks like in IB:

I need the height and width of the view to size automatically so that I have put a multiline label in the view and have all the contents of the view treated as a group and centered on the page.

Any suggestions would be greatly appreciated.

Answer 1

Here is a snapshot of a working set of all the constraints on an abbreviated layout that produces an always-centered view that automatically resizes with the child views (i.e., as the content of any label changes, the view grows or shrinks around it).

Important to your solution, the view has neither a height nor width constraint; its size is constrained entirely by its descendant constraints.

The key is that every component has a direct or indirect constraint from which its size and position are specified or can be inferred. For example, in order for the view to infer its width, the child labels must have a leading space constraint on the first label, a trailing space constraint on the last label, and a horizontal space constraint between interior labels. Those constraints plus the contents of the labels allow the width of the view to be inferred ... and force the view to dynamically conform to that width.

The same applies for the view's height. For example, you can specify the top and bottom space of just one label, or all of them. If just one, the remaining labels can be vertically aligned with it (see "Align Center Y to: Label1" in the screenshot).