Hide and show UIView with bottom View filling the space when hidden using autolayout

Question

I have two views on top of one another like so. When I press button, I want to hide the grey view and have the pink view move up into its space. When I press button again, I want the grey view to re-appear and move the pink view back into its original position.

I can accomplish this by doing something like

- (IBAction)toggle:(id)sender {
    if (self.top.hidden) {
        self.top.hidden = NO;
        self.top.layer.frame = CGRectMake(0, 0, 320, 50);
        self.bottom.layer.frame = CGRectMake(0, 50, 320, 50);
    } else {
        self.top.layer.frame = CGRectMake(0, 0, 0, 0);
        self.bottom.layer.frame = CGRectMake(0, 0, 320, 50);
        self.top.hidden = TRUE;
    }
}

However, the general wisdom, from what I understand, regarding autolayout is to not set the frame sizes programmatically in the code. So my question is, how can achieve the same result using autolayout?

It's basically the iPhone version of this question: OS X Cocoa Auto Layout hidden elements

Answer 1

Found the answer courtesy of this question: Animating an image view to slide upwards

In short:

- (IBAction)toggle:(id)sender {
    if (self.top.hidden) {
        self.top.hidden = NO;
        [UIView animateWithDuration:0
                         animations:^{
                             self.verticalSpace.constant += 50.0;
                             [self.view layoutIfNeeded];
                         }];
    } else {
        [UIView animateWithDuration:0
                         animations:^{
                             self.verticalSpace.constant -= 50.0;
                             [self.view layoutIfNeeded];
                         }];
        self.top.hidden = TRUE;
    }
}

where self.verticalSpace is the constraint set between the bottom view to the top view.