NSLayoutConstraint for unknown number of subviews in code - ios

Question

I'm getting into iOS programming and mastered more or less autolayout with fixed number of items. Say, we have a UILabel for title, UILabel for subtitle, then the visual format for the constraint is 'V:|-[title]-10-[subtitle]-|'
But what if I create subviews dynamically based on some API response. There are for example 40 subviews I need to add. It's not realistic anymore that I specify each subview with the visual format and keep track of them. What is the the proper way?
I imagine that after each subview I add, I then set the constraint based on the previous view with constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:. Is that the way to go, or there is a better way?

Answer 1

It's not realistic anymore that I specify each subview with the visual format and keep track of them
Why on earth not? You seem to think this is some sort of "either/or" situation. Nothing prevents you from using visual formatting to build up a collection of constraints. No law says that you have to put all your constraints into one visual format.
And the layout engine doesn't know or care what notation you used to form your constraints. A constraint is a constraint!
Consider this code where I build up the constraints for a scroll view and thirty labels inside it:
var con = [NSLayoutConstraint]()
con.appendContentsOf(
NSLayoutConstraint.constraintsWithVisualFormat(
"H:|[sv]|",
options:[], metrics:nil,
views:["sv":sv]))
con.appendContentsOf(
NSLayoutConstraint.constraintsWithVisualFormat(
"V:|[sv]|",
options:[], metrics:nil,
views:["sv":sv]))
var previousLab : UILabel? = nil
for i in 0 ..< 30 {
let lab = UILabel()
// lab.backgroundColor = UIColor.redColor()
lab.translatesAutoresizingMaskIntoConstraints = false
lab.text = "This is label \(i+1)"
sv.addSubview(lab)
con.appendContentsOf(
NSLayoutConstraint.constraintsWithVisualFormat(
"H:|-(10)-[lab]",
options:[], metrics:nil,
views:["lab":lab]))
if previousLab == nil { // first one, pin to top
con.appendContentsOf(
NSLayoutConstraint.constraintsWithVisualFormat(
"V:|-(10)-[lab]",
options:[], metrics:nil,
views:["lab":lab]))
} else { // all others, pin to previous
con.appendContentsOf(
NSLayoutConstraint.constraintsWithVisualFormat(
"V:[prev]-(10)-[lab]",
options:[], metrics:nil,
views:["lab":lab, "prev":previousLab!]))
}
previousLab = lab
}
con.appendContentsOf(
NSLayoutConstraint.constraintsWithVisualFormat(
"V:[lab]-(10)-|",
options:[], metrics:nil,
views:["lab":previousLab!]))
NSLayoutConstraint.activateConstraints(con)
I'm using visual formatting, but I'm doing it one constraint as a time as I add views (which is exactly what you're asking about).

Answer 2

The answer really depends on what layout you want, because there are higher-level tools for making some layouts.
Starting with iOS 9, you can use UIStackView to manage a row or column of views. By nesting stack views, you can easily make a grid of views. For an introduction to UIStackView, start by watching “Mysteries of Auto Layout, Part 1” from WWDC 2015. If you're doing all your layout in code, you can use TZStackView, a reimplementation of UIStackView that works on iOS 7 and later.
UICollectionView is another tool for laying out views in a grid, or in many other arrangements. It's more complex than UIStackView, but there's a lot of introductory material available to teach you how to use it, such as “Introducing Collection Views” from WWDC 2012.

Answer 3

I built a dynamic layout engine (Horizontal layout and Vertical layout).
It accepts an array of views.
It adds the views as subviews to a container.
Then composes a vertical and horizontal Visual layout string dynamically. (It generates a unique "Object Address" string for each view being laid out using v%p.
Simply call: [myView addControls:#[view1, view2, view3]] in viewDidLoad, and it will lay them out vertically for you.
Here's a generic layout engine for a vertical layout. Enjoy.
#implementation UIView (VerticalLayout)
- (void)addControls:(NSArray*)controls
align:(VerticalAlignment)alignment
withHeight:(CGFloat)height
verticalPadding:(CGFloat)verticalPadding
horizontalPadding:(CGFloat)horizontalPadding
topPadding:(CGFloat)topPadding
bottomPadding:(CGFloat)bottomPadding
withWidth:(CGFloat)width
{
NSMutableDictionary* bindings = [[NSMutableDictionary alloc] init];
NSDictionary *metrics = #{
#"topPadding": #(topPadding),
#"bottomPadding": #(bottomPadding),
#"verticalPadding": #(verticalPadding),
#"horizontalPadding":#(horizontalPadding) };
NSMutableString* verticalConstraint = [[NSMutableString alloc] initWithString:#"V:"];
if (alignment == VerticalAlignTop || alignment == VerticalAlignStretchToFullHeight) {
[verticalConstraint appendString:#"|"];
}
for (UIView* view in controls) {
BOOL isFirstView = [controls firstObject] == view;
BOOL isLastView = [controls lastObject] == view;
[self addSubview: view];
// Add to vertical constraint string
NSString* viewName = [NSString stringWithFormat:#"v%p",view];
[bindings setObject:view forKey:viewName];
NSString* yLeadingPaddingString = #"";
NSString* yTrailingPadding = #"";
if (isFirstView && topPadding > 0) {
yLeadingPaddingString = #"-topPadding-";
}
else if (!isFirstView && verticalPadding > 0) {
yLeadingPaddingString = #"-verticalPadding-";
}
if (isLastView && bottomPadding > 0) {
yTrailingPadding = #"-bottomPadding-";
}
[verticalConstraint appendFormat:#"%#[%#%#]%#",
yLeadingPaddingString,
viewName,
height > 0 ? [NSString stringWithFormat:#"(%f)", height] : #"",
yTrailingPadding];
NSArray* constraints = [NSLayoutConstraint constraintsWithVisualFormat:
[NSString stringWithFormat: #"H:|-horizontalPadding-[%#%#]%#|",
viewName,
(width > 0 ? [NSString stringWithFormat:#"(%lf)", width] : #""),
width > 0 ? #"-" : #"-horizontalPadding-"]
options:NSLayoutFormatDirectionLeadingToTrailing
metrics:metrics
views:bindings];
// high priority, but not required.
for (NSLayoutConstraint* constraint in constraints) {
constraint.priority = 900;
}
// Add the horizontal constraint
[self addConstraints: constraints];
}
if (alignment == VerticalAlignBottom || alignment == VerticalAlignStretchToFullHeight) {
[verticalConstraint appendString:#"|"];
}
NSArray* constraints = [NSLayoutConstraint
constraintsWithVisualFormat:verticalConstraint
options:NSLayoutFormatAlignAllLeading
metrics:metrics
views:bindings];
for (NSLayoutConstraint* constraint in constraints) {
constraint.priority = 900;
}
// Add the vertical constraints for all these views.
[self addConstraints:constraints];
}