UILabel does not animate inside UIView, autolayout

Question

I have a very simple application. It contains a red view and a green label inside it. There is also a button that runs animation. I animate the red view by changing its width constraint constant's value.

[self.view layoutIfNeeded];
[UIView animateWithDuration:0.4 animations:^{
    self.widthConstraint.constant = width;
    [self.view layoutIfNeeded];
}];

The red view animates as expected, but the green label inside changes its width instantly. I played with different animation flags, tried several tips from SO but did not bring it work.

Please find the sources here.

TIA

Answer 1

I have took a look at your project. I have not that much experience with setting constraints from editor but I would highly recommend you in case of troubles try to do it in code. Personally I would animate constraint on width of this red view and set constraints on the label's margins using visual format it will be something like: @"H:|[label]|" and add this this constraint to red view. That should solve the problem.

Answer 2

It seems like I've found the root of the problem. Constraints are not a trouble, UILabel is.

If you replace UILabel in my project with simple UIView it will animate smoothly as expected. It's a question of UILabel content animation. You can reach correct animation behaviour set label.contentMode = UIViewContentModeCenter but it looks ugly.

The best way to solve this problem - not try to change size of UILabel during animation. Try to invent some other behaviour. In my case I change UILabel's alpha to 0 and x position to greater then container view's width.

Please find more details about UILabel animating here.