Horizontal stacking in scrollview using autolayout - ios

Question

What's the best way to make sure that child views in a UIScrollView are stacked horizontally, one after the other, using autolayout? The number of child views will vary, so I can't use IB, but have to do it programatically. I understand how layout constraints work, but what's the best way to solve it? Loop all child views and update the constraints for each view everytime the number of child views are updated? If so, is there an easy solution to refer to the previous sibling in a layout constraint, or do I have have to keep a reference to the previous sibling?

Answer 1

I wrote the following method for an app. Might not be the prettiest but it gets the job done. It takes the views as an array which solves the problem of having a reference to the previous view. It also uses transparent spacer views to space them evenly but you can easily take those out.
+(void)spaceViews:(NSArray*)views evenlyInContainer:(UIView*)container {
UIView* lastSpacer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];
lastSpacer.translatesAutoresizingMaskIntoConstraints = NO;
[lastSpacer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:[lastSpacer(10)]" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:NSDictionaryOfVariableBindings(lastSpacer)]];
[container addSubview:lastSpacer];
[container addConstraint:[NSLayoutConstraint constraintWithItem:container attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:lastSpacer attribute:NSLayoutAttributeLeading multiplier:1.f constant:0]];
for (int i = 0; i < [views count]; i++) {
[container addSubview:views[i]];
[container addConstraint:[NSLayoutConstraint constraintWithItem:lastSpacer attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:views[i] attribute:NSLayoutAttributeLeading multiplier:1.f constant:0]];
UIView* spacerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];
[spacerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:[spacerView(10)]" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:NSDictionaryOfVariableBindings(spacerView)]];
spacerView.translatesAutoresizingMaskIntoConstraints = NO;
[spacerView setBackgroundColor:[UIColor blueColor]];
[container addSubview:spacerView];
[container addConstraint:[NSLayoutConstraint constraintWithItem:spacerView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:views[i] attribute:NSLayoutAttributeTrailing multiplier:1.f constant:0]];
[container addConstraint:[NSLayoutConstraint constraintWithItem:spacerView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:container attribute:NSLayoutAttributeCenterY multiplier:1.f constant:0]];
[container addConstraint:[NSLayoutConstraint constraintWithItem:views[i] attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:container attribute:NSLayoutAttributeCenterY multiplier:1.f constant:0]];
if (lastSpacer) {
[container addConstraint:[NSLayoutConstraint constraintWithItem:spacerView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:lastSpacer attribute:NSLayoutAttributeWidth multiplier:1.f constant:0]];
}
lastSpacer = spacerView;
}
[container addConstraint:[NSLayoutConstraint constraintWithItem:lastSpacer attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:container attribute:NSLayoutAttributeTrailing multiplier:1.f constant:0]];
}