Hiding a UIView using AutoLayout constraints

Question

From time to time I have a subview that I would like to remove from a layout. Not only should it be hidden, but it should not be considered part of the view's 'flow', so to speak. An example:

enter image description here

I am looking for a strategy to hide the orange view programmatically. The layout of the boxes, and their content, is via autolayout. Two things to note:

the orange box is defining its vertical height based on the content, plus some top/bottom offsets for margins. So, setting the labels' text to nil will only 'shrink' the view down to it's internal margins, it won't have a height of 0.
Similarly, the vertical spacing between the three boxes mean that even if the orange box's height is 0, the gap between red and yellow will be twice as large as required.

A possible solution

My best suggestion is to add a constraint to the orange box, setting it's height to 0. For this to work, I need to use non-required priorities for all of the vertical constraints inside the orange box. At the same time, the container should update the constant for the constraint that separates the boxes. I don't like this approach so much since the orange box class is defining it's internal constraints with it's superview's behavior in mind. Perhaps I could live with it if the orange box view instead exposes a 'collapse' method that adds the 0 height constraint itself.

Is there a better approach?

Another option - remove the orange view completely and add new constraints to the superview for the vertical layout. Not sure if this is cleaner. — Ben Packard
Great question. In your example, is the Orange view laid out on the storyboard this way? Is there any way to prevent the situation in the first place? I've dealt with something similar where I made each of the views its own xib and added them to a container view in code. I also added the spacers in code as views between these xibs. If I knew a xib was not needed, I didn't add it or its spacer to the container view. — Mike Taverne
No storyboard, but in essence the same thing - the boxes are a separate UIView subclass — Ben Packard
This would very if you use stackviews. See how hiding a subview in stackview will just remove it from the entire hierarchy. — Honey

rdelmar rdelmar · Accepted Answer · 2015-02-03T17:37:57

You can do this by adding an extra constraint between the yellow and red views of a lower priority, and adjusting the priorities in code.

enter image description here

The short dashed constraint (orangeToRedCon is the outlet) has a priority of 999 (you can't change a required priority to a non-required, so that's why it's not 1000). The long dashed constraint (yellowToRedCon) has a priority of 500 and a constant of 20. In code, you can hide the orange view, and swap those priority levels, and that will cause the yellow view to move up to whatever value you've set for the constant value of yellowToRedCon.

-(void)changePriorities {
    self.yellowToRedCon.priority = 999;
    self.orangeToRedCon.priority = 500;
    [UIView animateWithDuration:.5 animations:^{
        self.orangeView.alpha = 0;
        [self.view layoutIfNeeded];
    }];
}

This method doesn't require any changes in the orange view's height.

Hiding a UIView using AutoLayout constraints

A possible solution

4 Answers