AutoLayout for a Dynamic number of Views - ios

Question

I have a UIView at the bottom of a UIViewController that can have a different number of views added.
NSUInteger letterCount = [word length];
NSLog(#"The word letter count is: %ld",(unsigned long)letterCount);
for (int i = 0; i < letterCount; i++) {
NSLog(#"new view being created");
UIView *letterTileView = [UIView autolayoutView];
letterTileView.tag = 600 + i;
[self.bottomBarView addSubview:letterTileView];
}
The word could be any word and therefore have a different number of letters. If the word is APPLE it would create 5 subviews in the bottom bar view.
I would like to use Auto Layout to layout these views. Each view should be 48x48 (height x width). I would like these subviews to be centered in the bottom bar view and have padding in between them.
I have used the following method to setup AL before but unsure how to approach the dynamic situation and laying these out correctly.
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views

Answer 1

Here's an example from my book, where I generate a bunch of UILabels programmatically and add constraints to them as I go along. It's not the same as your situation (my labels are arranged vertically) but it shows how easy it is to add constraints as you are creating interface dynamically:
UILabel* previousLab = nil;
for (int i=0; i<30; i++) {
UILabel* lab = [UILabel new];
// lab.backgroundColor = [UIColor redColor];
lab.translatesAutoresizingMaskIntoConstraints = NO;
lab.text = [NSString stringWithFormat:#"This is label %d", i+1];
[v addSubview:lab];
[v addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-(10)-[lab]"
options:0 metrics:nil
views:#{#"lab":lab}]];
if (!previousLab) { // first one, pin to top
[v addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-(10)-[lab]"
options:0 metrics:nil
views:#{#"lab":lab}]];
} else { // all others, pin to previous
[v addConstraints:
[NSLayoutConstraint
constraintsWithVisualFormat:#"V:[prev]-(10)-[lab]"
options:0 metrics:nil
views:#{#"lab":lab, #"prev":previousLab}]];
}
previousLab = lab;
}

Answer 2

What I've done in the past is create the visual format string dynamically based on the number of views you'll have. Some sample code:
NSArray *views = #[view1, view2, view3]; // this would be a dynamic array with views
NSMutableString *vflString = [NSMutableString string];
NSMutableDictionary *viewsDictionary = [NSMutableDictionary dictionary];
for (int i = 0; i < [views count]; i++) {
NSString *viewIdentifier = [NSString stringWithFormat:#"view%d", i];
[vflString appendString:[NSString stringWithFormat:#"-[%#]-", viewIdentifier];
viewsDictionary[viewIdentifier] = views[i];
}
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vflString options:0 metrics:nil views:viewsDictionary];
[self.view addConstraints:constraints];
You can change metrics and positioning and stuff like that too, of course.