How do I auto layout constraints when I add a new view such as a error message to the top of a main view

Question

This is my controller as it loaded

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.mainTitleText];
    [self.view addSubview:self.subTitle];
    [self.view addSubview:self.tableView];
    [self.view addSubview:self.acceptBtn];
    [self.view addSubview:self.notAcceptBtn];

   [self addConstraints];
}

I add my constraints here

- (void)addConstraints {
    id metrics = @{ @"textHMargin": @10, @"topMargin": @110, @"margin": @8, @"titleHeight": @60, @"subtitleHeight": @40, @"tableHeight": @88 };

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-textHMargin-[mainTitleText]-textHMargin-|" options:0 metrics:metrics views:self.views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-textHMargin-[subTitle]-textHMargin-|" options:0 metrics:metrics views:self.views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[tableView]|" options:0 metrics:metrics views:self.views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[acceptBtn]-margin-|" options:0 metrics:metrics views:self.views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[notAcceptBtn]-margin-|" options:0 metrics:metrics views:self.views]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-topMargin-[mainTitleText(titleHeight)]-margin-[subTitle(subtitleHeight)]-[tableView(tableHeight)]-margin-[acceptBtn]-margin-[notAcceptBtn]" options:0 metrics:metrics views:self.views]];

}

This is where I'm getting stuck. When I add my error message view it does not stack on top and push everything down.

- (void)acceptAction:(id)sender {
    [self.activeTextfield resignFirstResponder];

    if (self.airlineInfo.flightNumber && self.airlineInfo.airlineDescription) {
        //TODO: success code
    } else {
    //show error
           id metrics = @{ @"textHMargin": @10, @"topMargin": @110, @"margin": @8, @"titleHeight": @60, @"subtitleHeight": @40, @"tableHeight": @88 };
        [self.view addSubview:self.infoMessage];
          [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-textHMargin-[infoMessage]-textHMargin-|" options:0 metrics:metrics views:self.views]];

         [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-topMargin-[infoMessage(20)]-margin-[mainTitleText(titleHeight)]-margin-[subTitle(subtitleHeight)]-[tableView(tableHeight)]-margin-[acceptBtn]-margin-[notAcceptBtn]" options:0 metrics:metrics views:self.views]];
    }
}

view http://kgaddy.com/errorView.jpg .

Answer 1

What I would do is not use constraints for this extra view at all. Just stick it into the interface. But change the constant on your existing top view to a larger value, thus pushing it down and pushing down everything that is pinned to it below it.

So, right now, you are saying:

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-topMargin-[mainTitleText(titleHeight)]-margin-[subTitle(subtitleHeight)]-[tableView(tableHeight)]-margin-[acceptBtn]-margin-[notAcceptBtn]" options:0 metrics:metrics views:self.views]];

Instead of just adding those constraints directly, first keep a reference to them; then add them. That way you can sneakily remove those constraints later! Then you do the same thing again but with a push-down value at the top:

[self.view removeConstraints:self.verticalContraints]; // previously saved
self.verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(40)-topMargin-[mainTitleText(titleHeight)]-margin-[subTitle(subtitleHeight)]-[tableView(tableHeight)]-margin-[acceptBtn]-margin-[notAcceptBtn]" options:0 metrics:metrics views:self.views]];
[self.view addConstraints:self.verticalConstraints];

Notice the "40" that I snuck in there. You can fix that to a better value experimentally. You see from this how to swap out a bunch of constraints and put a different set in their place.