Centering group of dynamically growing labels vertically using auto layout in interface builder

Question

I am having a view, which will have always a constant height. Inside this view there are three labels, the top label can grow up-to two lines and rest are fixed to one line.

Leading and trailing edges of all labels are fixed to superview, but height of all labels is being calculated intrinsically.

I want to center all the three labels vertically for both the cases where top label is having one line and where top label is having two lines.

I want to do it using auto-layout in Xcode interface builder.

Gandalf Gandalf · Accepted Answer · 2016-02-09T12:23:03

You can achieve this only by adding another UIView in the view hierarchy. So this goes like

UIView
  -> SubView
      -> lbl1
      -> lbl2
      -> lbl3

Now coming to constraint, apply these

SubView to UIView:- CenterX, CenterY, Leading = 0, Trailing = 0, Height >= 67; Vertical Compression Resistance = 751;
lbl1 to subview:- Leading = 0, Trailing = 0, Top = 0, Bottom to Lbl2 = 2, Height >= 21; Vertical Compression Resistance = 751;
lbl2 to subview:- Leading = 0, Trailing = 0,Top to lbl1 = 2, Bottom to lbl3 = 2, Height = 21;
lbl3 to subview:- Leading = 0, Trailing = 0,Top to lbl2 = 2,Bottom = 0, Height = 21;

For Subview i have calculated height based on each label height as 21 and spacing between each as 2. So SubView.Height = 21*3+2+2 = 67. If you choose a different value then modify the constraints value accordingly.

Centering group of dynamically growing labels vertically using auto layout in interface builder

1 Answers