Animating UIStackView arrangedSubview content size change

Question

Is it possible to animate an arranged subview when its intrinsic content size changes?

For example, imagine I have an arranged subview, which holds a single UILabel pinned to edges. That label has a small amount of text. New text comes in, which is larger than the previous text. The intrinsic content size of label is now larger.

I would like to be able to animate it like so:

 stackView.layoutIfNeeded()
 self.label.text = self.expanded ? textTwo : textOne
 UIView.animateWithDuration(0.3) { () -> Void in
     self.stackView.layoutIfNeeded()
 }

The stackview currently "jumps" from the old content size to the new one, ignoring the animation block.

An alternative of course is to manually find out the height of the arranged subview, and animate that constraint. I'd like to avoid that if possible.

have you tried adjusting the layout of the superview? – jervine10 Feb 12 '16 at 15:24 — jervine10, Feb 12 '16 at 15:24

score 13 · Answer 1 · answered Feb 12 '16 at 15:50

13

Found something that works:

label.text = expanded ? textOne : textTwo
UIView.animateWithDuration(0.4) { () -> Void in
    self.stackView.setNeedsLayout()
    self.stackView.layoutIfNeeded()
}

Does not work:

label.text = expanded ? textOne : textTwo
UIView.animateWithDuration(0.4) { () -> Void in
    self.stackView.layoutIfNeeded()
}

Strange that changing of the intrinsic content size doesn't make the stackView want to need layout though...

answered Feb 12 '16 at 15:50

Christopher Kevin Howell

1,445
12
20

I couldn't get anything to animate this way. Changing the intrinsicContentSize did nothing, but replacing it with layout constraints worked, although not ideal. – James P Jun 08 '16 at 16:58
Confirm. It works in Xcode 14.2! – RunesReader Mar 18 '23 at 07:55

score 0 · Answer 2 · answered Feb 01 '23 at 18:51

Let's think that you have a custom UI element and changing it's intrinsicContentSize

    ...
    var stackView: UIStackView!
    var yourUIElement: UIElement! // (any kind of ui element)
    
    UIView.animate(withDuration: 3, delay: 0) { [weak self] in
       guard let self = self else {return}
            self.yourUIElement.configure() // your configuration
            // in your case this will be label.text = expanded ? textOne : textTwo
            self.stackView.layoutIfNeeded()
            self.stackView.setNeedsLayout()
            self.yourUIElement.invalidateIntrinsicContentSize()
            // in your case this will be self.label.invalidateIntrinsicContentSize()
        }

This worked for me, hope it helps to you

Animating UIStackView arrangedSubview content size change

2 Answers2

Linked