Ios – UIView animated changes with auto layout constraints

autolayoutcocoa-touchiosuiview

Say that I have a project which looks like the following:

enter image description here

There are two UIViews – one called yellowBox and the other called redBox. The auto layout constraints dictate that the yellowBox is 60 points from the top of the superview with 350 points leading and trailing spaces (i.e. to left and right of the view). The redBox has the same leading and trailing space constraints. There is a vertical space constraint between the two boxes of 0 to indicate that the bottom of the yellowBox should always be directly on top of the redBox.

When the user taps the Expand Yellow Box button, I would like the height of the yellowBox to increase and, as a result, the redBox moves down to continue satisfying the vertical space constraint (that the yellowBox is always on top of the redBox). Here is the animation code:

- (IBAction)expandYellowBox:(id)sender {

    [UIView animateWithDuration:0.5
                     animations:^{
                         CGRect newFrame = self.yellowBox.frame;
                         newFrame.size.height += 50;
                         self.yellowBox.frame = newFrame;
                     }];

}

However, I have been unable to get this working properly. As you can see by the red icon, there is a problem with the constraints at the moment:

enter image description here

which is fair enough, as there's no way for auto layout to know the height of the boxes. However, I don't know how to resolve this issue in such a way that it will allow for the boxes to be resized and moved. For example, if I specify a height constraint on the yellowBox then that will prevent it from being resized. If I set the height constraint to be greater than or equal (to allow the yellowBox height to increase) then I get a different constraint error:

enter image description here

All constraints have been established using Xcode in the storyboard – none have been written in code.

Any help greatly appreciated.

EDIT: As it turns out, the yellowBox is growing when the button is clicked – it's just I couldn't tell because it appears behind the redBox. I only noticed after clicking it around four times and it started appearing out the bottom of the redBox. However, the same question still remains – how to get the redBox to always stick to the bottom of the yellowBox.

Best Answer

Try it as mentioned by shwet-solanki, but add the following line after changing the constraint: 

[self.view layoutIfNeeded];

the IBAction would look like:

- (IBAction)expandYellowBox:(id)sender {

[UIView animateWithDuration:0.5
                 animations:^{
                     self.yellowBoxHeightConstraint.constant += 50;
                     [self.view layoutIfNeeded];
                 }];
}

Where yellowBoxHeightConstraint is the IBOutlet for height constraint of yellowBox. Hope this helps.

Related Topic