Equally distribute spacing using Auto Layout visual format string

Question

Is it possible to equally distribute left and right space for b in @"|-[a(5)]-[b(8)]-[c(5)]-|" using visual format strings?

Answer 1

No.

However, you can do it with visual format and a manual constraint creation. Change your VFL string to:

@"|-[a(5)]->=0-[b(8)]->=0-[c(5)]-|"

This says that you're not too concerned about the actual size of the spaces between a and b, and b and c.

Now, create a constraint pinning the center of b to the center of the superview using constraintWithItem:... (I'm typing this on a phone so forgive me for not spelling out the whole method).

This, coupled with your flexible spacing, will give even spaces to the left and right of b.

Answer 2

Apple's Auto Layout Guide suggests using "spacer views". Here's the solution for laying out your three views with equal spacing horizontally:

// create views dictionary
NSMutableDictionary *viewsDictionary = [NSMutableDictionary dictionary];
[viewsDictionary addEntriesFromDictionary:NSDictionaryOfVariableBindings(viewA, viewB, viewC)];

// create 4 spacer views
for (int i = 0; i < 4; i++) {
    UIView *spacerView = [[UIView alloc] init];
    spacerView.hidden = YES;
    [self addSubview:spacerView];
    [viewsDictionary setObject:spacerView
                        forKey:[NSString stringWithFormat:@"spacer%d", i + 1]];
}

// disable translatesAutoresizingMaskIntoConstraints in views for auto layout
[viewsDictionary enumerateKeysAndObjectsUsingBlock:^(id key, id obj, BOOL *stop) 
{
    [obj setTranslatesAutoresizingMaskIntoConstraints:NO];
}];

// add constraints
[superview addConstraints:
 [NSLayoutConstraint constraintsWithVisualFormat:
  @"|[spacer1(>=0)][viewA][spacer2(==spacer1)][viewB][spacer3(==spacer1)][viewC][spacer4(==spacer1)]|"
                                         options:kNilOptions
                                         metrics:nil
                                           views:viewsDictionary]];

Note that spacer1's width is set to be more than 0. Subsequent spacer views are set to have equal widths with spacer1.