Programmatically creating "spacing to nearest neighbor" constraint

Question

Part of the screen I'm building includes a section with n views. I'm generating these views on the fly in code--they're simple UIView subclasses.

I'm using AutoLayout constraints for this screen, and I'd like each view to automatically position itself 15px or so below the view above it.

In Xcode it's possible to create a spacing to nearest neighbor constraint, which seems to do exactly what I want.

However, I can't seem to find any examples that show how to create this in code.

Is it possible to create a "spacing to nearest neighbor" constraint programmatically?

Answer 1

You can create a constraint dictionary and a constraint string and apply them programmatically.

Adding items and keys to the dictionary is trivial so I won't deal with that. Just remember every view in the constraint system must be in the dictionary.

Creating the format string is the interesting bit. Presumably you want to add your views under as certain view, say it has the NSString key topView. The first part of the format string looks like

NSString *constraintBase = [NSString stringWithFormat:@"V:topView"];

For each view you want to add, you add to that string

NSString *constraintString = [constraintBase stringByAppendingString:[NSString stringWithFormat:@"-15-%@", viewDictionaryKey]];

Finally apply constraintString as usual, a constructed visual constraint format string.

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:constraintString options:0 metrics:nil views:viewsToConstrain]];

Answer 2

I was actually doing some personal exercises of auto-layout and animations when I stumbled over your question and decided to extend my a small demo, which you can download here.

If I have understood you correctly below piece of code can be used for inspiration. With a small effort it could be extended with removal of views too and also with dynamic height of the views.

Please note my code includes a solution with and without animation - the latter is of course more simple.

#import "Demo2ViewController.h"

@interface Demo2ViewController ()
{
    NSMutableArray *_viewList;
    NSDictionary *_metrics;
}
@end

@implementation Demo2ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    [[self view] setBackgroundColor:[UIColor colorWithRed:.95 green:.95 blue:.95 alpha:1.0]];

    _metrics = @{@"height": @30,  // height of the views being added
                 @"space":  @15}; // space between two views

    // the first view
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectNull];
    _viewList = [[NSMutableArray alloc] initWithObjects:textView, nil];
    textView.text = [NSString stringWithFormat:@"view: %lu", (unsigned long)[_viewList count]];

    // a button to add more views
    UIButton *buttonAddView = [[UIButton alloc] initWithFrame:CGRectNull];
    [buttonAddView setTitle:@"add new view" forState:UIControlStateNormal];
    [buttonAddView setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [buttonAddView addTarget:self action:@selector(buttonPushed:) forControlEvents:UIControlEventTouchDown];

    NSDictionary *subviews = NSDictionaryOfVariableBindings(textView, buttonAddView);

    for (id view in [subviews allValues]) {
        [[self view] addSubview:view];
        [view setTranslatesAutoresizingMaskIntoConstraints:NO];
    }

    // initial constraints
    [[self view] addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[textView]-|" options:0 metrics:nil views:subviews]];
    [[self view] addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[buttonAddView]-|" options:0 metrics:nil views:subviews]];
    [[self view] addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[textView(==height)]" options:0 metrics:_metrics views:subviews]];
    [[self view] addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[buttonAddView]-|" options:0 metrics:nil views:subviews]];
}

-(void)buttonPushed:(UIButton*)button
{
    UITextView *prevView = [_viewList lastObject]; // get reference to previous view

    // create a new view
    UITextView *newView = [[UITextView alloc] initWithFrame:CGRectNull];
    [[self view] addSubview:newView];
    [newView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [_viewList addObject:newView];
    newView.text = [NSString stringWithFormat:@"view: %lu", (unsigned long)[_viewList count]];

    NSDictionary *subviews = NSDictionaryOfVariableBindings(prevView, newView);

    [[self view] addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[newView]-|" options:0 metrics:nil views:subviews]];

#if 0
    // without animation
    [[self view] addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[prevView]-space-[newView(==height)]" options:0 metrics:_metrics views:subviews]];
    [[self view] layoutIfNeeded];
#else
    // with animation

    // to begin with the new view gets zero height and no space to previous view
    NSArray *tempConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[prevView][newView(==0)]" options:0 metrics:nil views:subviews];

    [[self view] addConstraints:tempConstraints];
    [[self view] layoutIfNeeded]; // to ensure zero height is the starting point for the animation

    [newView setAlpha:0.0f]; // starting point for fade-in

    [UIView animateWithDuration:0.25f animations:^{
        [[self view] removeConstraints:tempConstraints]; // remove zero height constraint
        [[self view] addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[prevView]-space-[newView(==height)]" options:0 metrics:_metrics views:subviews]]; // add final constraints
        [newView setAlpha:1.0f]; // fade-in
        [[self view] layoutIfNeeded];
    }];
#endif
}

@end