Prevent cell content from "jumping" when applying constraint

Question

I have a subclassed UICollectionViewCell and I want it to expand when tapped.

To achieve this, I put the title into a view ("titleStack") and the body into a separate view ("bodyStack"), and then put both of them into a container UIStackView ("mainStack"). I then constrain the contentView of the cell to the leading, trailing, and top edges of mainStack.

When the cell is selected, a constraint is applied that sets the bottom of the contentView's constraint to be the bottom of bodyStack. When it's unselected, I remove that constraint and instead apply one that sets the contentView's bottom constraint equal to titleStack's bottom constraint.

For the most part this works well, but when deselecting, there's this little jump, as you can see in this video:

What I would like is for titleStack to stay pinned to the top while the cell animates the shrinking portion, but it appears to jump to the bottom, giving it a sort of glitchy look. I'm wondering how I can change this.

I've pasted the relevant code below:

private func setUp() {
    backgroundColor = .systemGray6
    clipsToBounds = true
    layer.cornerRadius = cornerRadius

    setUpMainStack()
    setUpConstraints()
    updateAppearance()
}

private func setUpMainStack() {
    
    contentView.constrain(mainStack, using: .edges, padding: 5, except: [.bottom])
    mainStack.add([titleStack, bodyStack])
    
    bodyStack.add([countryLabel, foundedLabel, codeLabel, nationalLabel])
}

private func setUpConstraints() {
    titleStack.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
    
    closedConstraint =
        titleStack.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
    closedConstraint?.priority = .defaultLow // use low priority so stack stays pinned to top of cell
    
    openConstraint =
        bodyStack.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
    openConstraint?.priority = .defaultLow
}

/// Updates the views to reflect changes in selection
private func updateAppearance() {

    
    UIView.animate(withDuration: 0.3) {
        self.closedConstraint?.isActive = !self.isSelected
        self.openConstraint?.isActive = self.isSelected
    }
}

Thanks so much!

Instead of setting the constraints active/inactive, can you try animating the constraint values like this? stackoverflow.com/a/25650669/4490923 — Asteroid
– Asteroid, Commented May 29, 2022 at 17:31
That didn't quite work in my case, but it led me down the right path so thank you! — Moses Harding
– Moses Harding, Commented May 30, 2022 at 18:46

Moses Harding · Accepted Answer · 2022-05-30 18:51:24Z

0

I was able to solve this by simply showing and hiding my "bodyStack" as well as using "layoutIfNeeded." I removed closedConstraint and openConstraint and just gave it a normal bottom constraint.

The relevant code:

func updateAppearance() {

        UIView.animate(withDuration: 0.3) {
            
            self.bodyStack.isHidden = !self.isSelected
            self.layoutIfNeeded()
        }
    }

answered May 30, 2022 at 18:51

Moses Harding

1658 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prevent cell content from "jumping" when applying constraint

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related