IOS 8 height constraint animation not working as expected

Question

I've tried to animate the height constraint of the black label on top of the view and I've set a constraint on the white label below that sets the distance from the label above. Then I've tried to animate the height change the black label with the following code (I've tried to ove also the code that changes self.height within the UIView.animateWithDuration block:

@IBOutlet weak var height: NSLayoutConstraint!

@IBAction func resize(sender: AnyObject) {

    if self.collapsed {
        self.height.constant = 100
    } else {
        self.height.constant = 0
    }

    UIView.animateWithDuration(2) {
        [unowned self] in
        self.view.layoutIfNeeded()
    }

    collapsed = !collapsed
}

The action resize is invoked by pressing a button.. There is something that is animated, but not what I expected: the label immediately changes its size to 0 or 100. When it becomes 0, the second label slowly moves up to its new position. When black label height is set to 100 then it appears from the top of the screen above the second label, than both of them move down to their final position. The black label has also a constraint above it from the top of the view, so I don't understand why the black label flows down from the top.

screenshot

Any idea?

There is no constraints violations error message in the logs during the animations? Any constraints with lower priorities that could be ignored? The second case would not give any errors because of the lower priority allowing the constraints to break. — Felipe Cypriano, Jul 17 '15 at 22:25
can you explain all the constraints that are applied on blacklabel and second label?? — Sumit Oberoi, Jul 17 '15 at 23:22
I'm trying to rebuild the constraints... Can you tell me which constraints you would put and with which priorities in order to have the bottom label always at distance X from the bottom of black label and the black label that is at Y distance from the top of the screen. Then the black label must appear and disappear (by changing the height from 100 to 0 and vice versa) with an animation.. I'd like to implement a sort of "Loading..." label that disappears as soon as a background task is finished. — Gianni Costanzi, Jul 18 '15 at 10:31
BTW, I don't understand why the movement of the bottom label is being animated while the change in height of the black label is immediate. — Gianni Costanzi, Jul 18 '15 at 10:34
that is not a standard behaviour from a `UIView`, it can be a particular bug of the `UILabel` maybe; for instance the `UITextField` has no such behaviour and it animates as you'd expect. — holex, Jul 20 '15 at 11:08
I've just tried Xcode 7 beta 4 and launched the same project on a IOS9 emulator and everything worked as expected. — Gianni Costanzi, Jul 25 '15 at 07:43

score 1 · Answer 1 · edited May 23 '17 at 12:14

I've recreated your example and did some research on it.

I've managed to fix the "expand" animation with blackLabel.clipsToBounds = true, but the "shrink" animation is still jumpy. It seems like a problem with UILabel as described here and here.

The simplest workaround that I can think of is just to wrap your blackLabel with UIView of the same size and animate it's height instead. Don't forget to set wrapperView.clipsToBounds = true. This should work.

IOS 8 height constraint animation not working as expected

1 Answers1