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

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

Answer 2

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 3

Here the view's which are generated programatically are added to a parent view. When a view is created its constraints should be added to it.

But the constraints must mapped with the previous view, and so we need to identify the previous view (last view in the parent view)

NSArray *subViewList = [_vwParentView subviews];
UIView *lastView;
if (subViewList.count > 0) {
    lastView = [subViewList lastObject];
}

The above code will help to find the last created view. When Views are created programatically and added as sub views, the views will added as stack for parrentView and hence the view created at last will be the last object in the subViewList array

Note: Assuming that a separate view is assigned as parent view with no subviews initially.

UIView *contentView = [[UIView alloc]init];

NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:contentView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:1.0 constant:initialWidth];
[contentView addConstraint:widthConstraint];

NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:contentView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:initialHeight];
[contentView addConstraint:heightConstraint];

contentView.translatesAutoresizingMaskIntoConstraints = NO;

[_vwParentView addSubview:contentView];

NSLayoutConstraint *gapMaintainTopConstraint;
if (lastView == nil) {
    gapMaintainTopConstraint = [NSLayoutConstraint constraintWithItem:contentView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_vwParentView attribute:NSLayoutAttributeTop multiplier:1.0 constant:15];
}
else
{
    gapMaintainTopConstraint = [NSLayoutConstraint constraintWithItem:contentView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:lastView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:15];
}
[_vwParentView addConstraint:gapMaintainTopConstraint];

In case to change the size of the added view in future, it should be achieved by changing its widthConstraint or heightConstraint, only then the constraint which is associated to it (to maintain specific gap) will work. Size should not be changed using frames thereafter. Meaning - constraint based views should be handled using constraints only.

It is possible to create a "spacing to nearest neighbour" constraint only after the created view is added as a sub view,.

The translatesAutoresizingMaskIntoConstraints property of the created view should be disabled, so that there won't be any conflict of constraints when there is any change in size (of the created view) in future.