Skoota Skoota - 5 months ago 15
iOS Question

UIView animated changes with auto layout constraints

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

enter image description here

There are two

UIView
s - 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
.

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.