Animate scaling UIView with nested UIViews

Question

I'm trying to animate a UIView filling the entire screen. I have a UILabel inside this UIView, which has some NSLayoutConstraints. When animating the width and height constraints of the UIView, the UILabel constraints don't update. I set the constraint for the width of the label to the width anchor of the UIView, and call layoutIfNeeded() in the UIView.animate block. This does nothing with regards to the constraints of the label.

I then decided to animate the constraints of the label aswell, so now I animate the width of the label to the same width as the UIView and the top of the label to 25. This works, except for the fact that the label dissapears when the animation starts and about 75% in just flies in from the right side? I have no idea why this is happening. Any help would be appreciated.

The animation code:

guard let cell = collectionView.cellForItem(at: indexPath) as? NeuralNetLayerCollectionCell else {
            return
        }

        let expandingCellView = SlideOverView(frame: cell.bounds)
        expandingCellView.center = collectionView.convert(cell.center, to: self)
        expandingCellView.textLabel.text = cell.textLabel.text
        self.addSubview(expandingCellView)

        expandingCellView.widthConstraint.constant = self.frame.width
        expandingCellView.heightConstraint.constant = self.frame.height
        expandingCellView.labelWidthConstraint.constant = self.frame.width
        expandingCellView.labelTopConstraint.constant = 25

        UIView.animate(withDuration: 5, animations: {
            expandingCellView.center = self.center
            expandingCellView.layoutIfNeeded()
        })

And the constraints:

var widthConstraint: NSLayoutConstraint!
    var heightConstraint: NSLayoutConstraint!
    var labelWidthConstraint: NSLayoutConstraint!
    var labelTopConstraint: NSLayoutConstraint!

self.translatesAutoresizingMaskIntoConstraints = false

        widthConstraint = NSLayoutConstraint(item: self, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: self.bounds.width)
        heightConstraint = NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: self.bounds.height)

        self.backgroundColor = .white
        self.layer.cornerRadius = 25

        textLabel.textAlignment = .center
        textLabel.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(textLabel)
        labelTopConstraint = textLabel.topAnchor.constraint(equalTo: self.topAnchor, constant: 25)
        let labelLeftConstraint = textLabel.leftAnchor.constraint(equalTo: self.leftAnchor)
        labelWidthConstraint = textLabel.widthAnchor.constraint(equalToConstant: self.bounds.width)
        let heightConstraintLabel = textLabel.heightAnchor.constraint(equalToConstant: 50)
        NSLayoutConstraint.activate([labelTopConstraint, labelLeftConstraint, labelWidthConstraint, heightConstraintLabel, widthConstraint, heightConstraint])

Video of what is currently happening: https://streamable.com/rk3ah Basically I want the number 2 to move up as the view grows, instead of disapearing and then flying in from the right side. This is what it looks like when i remove all other code, and just have a plain uiview that animates like the other one. The label still acts weird. I want the label to just be visible during the entire animation. https://streamable.com/jaqu6

Can you add the video sample ? expected and what you currently get ?? — Vicky_Vignesh
Its the label which is in the expanding uiview, i want this label to animate as explained above. — Thijs van der Heijden

Alexey Lysenko Alexey Lysenko · Accepted Answer · 2020-03-11T14:18:08

collectionView's cell sizes usually controlled by collectionView:layout:sizeForItemAtIndexPath: (docs)

So if this so in your situation (can't be sure without more context), you need

Create invalidationContext for the cell, that need to be resized (doc)
Pass this invalidationContext to flow Layout (doc)
This cause collectionView:layout:sizeForItemAtIndexPath: call, and there you need to return new size of your cell

Animate scaling UIView with nested UIViews

1 Answers