Center a variable number of UILabels vertically in a Cell/View - ios

Question

Is there a way to center a variable number of labels vertically within a superview (in my case a UITableViewCell)?
In this particular view in my app, I'd like to display data from my database. The data comes in a set that can range from 0 to 3 elements in size, so the view will have from 0 to 3 corresponding labels. If there is one label, it should appear on the vertical center line of the cell. If there are two labels, they should each appear equal distances above and below the vertical center line of the cell. If there are three labels, one should appear on the vertical center line and the other two should appear equal distances above and below the center line.
Hopefully this poor attempt at a visual helps. In the second example in this visual the two tick marks representing the labels appear as though they're the same distance apart as the top and bottom labels in the third example, but I'd prefer that in the real thing, they be slightly closer together than that, but such are the limits of plain text when trying to model complex UI elements.
**********************************************************************************
- -
-
- These two should be slightly closer to center than shown here.
-
-
- -
-
**********************************************************************************
I've tried fiddling with constraints as much as I could but can't seem to find a way to handle this in that way.
As I am from a web programming background, I'd describe this as an unordered list of variable height centered vertically in its parent container, but I'm not sure how to recreate that.

Answer 1

Assuming that containerView is a UIView within your cell serving a container for labels, the code below will do what you want.
NSLayoutConstraint* containerCenterXConstraint =
[NSLayoutConstraint constraintWithItem:containerView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:containerView.superview
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0];
NSLayoutConstraint* containerCenterYConstraint =
[NSLayoutConstraint constraintWithItem:containerView
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:containerView.superview
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0];
[containerView.superview addConstraints:#[containerCenterXConstraint, containerCenterYConstraint]];
[containerView setTranslatesAutoresizingMaskIntoConstraints:NO];
UILabel* previousLabel = nil;
for (int i = 0; i < numberOfElements; i++) {
UILabel* label = [[UILabel alloc] init];
[label setTranslatesAutoresizingMaskIntoConstraints:NO];
label.text = <init label with data>;
[label sizeToFit];
[containerView addSubview:label];
NSArray* constraints;
NSDictionary* viewsDict;
NSDictionary* metricsDict = #{#"labelHeight": #(CGRectGetHeight(label.frame))};
if (i == 0 && numberOfElements == 1) {
viewsDict = NSDictionaryOfVariableBindings(label);
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[label(labelHeight)]|"
options:0
metrics:metricsDict
views:viewsDict];
} else if (i == 0 && numberOfElements > 1) {
viewsDict = NSDictionaryOfVariableBindings(label);
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[label(labelHeight)]"
options:0
metrics:metricsDict
views:viewsDict];
} else if (i == (numberOfElements - 1) && numberOfElements > 1) {
viewsDict = NSDictionaryOfVariableBindings(label);
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:[label(labelHeight)]|"
options:0
metrics:metricsDict
views:viewsDict];
}
if (i > 0 && numberOfElements > 1) {
viewsDict = NSDictionaryOfVariableBindings(previousLabel, label);
constraints = [[NSLayoutConstraint constraintsWithVisualFormat:#"V:[previousLabel][label(labelHeight)]"
options:0
metrics:metricsDict
views:viewsDict] arrayByAddingObjectsFromArray:constraints];
}
[containerView addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"|[label]|"
options:0
metrics:nil
views:viewsDict];
[containerView addConstraints:constraints];
previousLabel = label;
}