jangelsb / ExpandableTableViewCellsExample

A demo app comparing different ways to make expandable UITableViewCells

Expandable Cells Overview

Every time I want to make a expandable / collapsible UITableViewCell, I google and re-realize that there is a few ways to do it. Lots of people say that the UIStackView is best way, but that’s not necessarily true. The truth is there’s a couple different ways and each are valid in their on use cases.

This is an example app showing the different methods and how they work. Direct link to the github / blog post: https://github.com/jangelsb/ExpandableTableViewCellsExample

---

Let’s start with the easiest way:

UIStackView

TBW

override func updateUI(shouldExpand: Bool) {
    UIView.animate(withDuration: animationDuration) {
        self.chevronImageView?.transform = shouldExpand ? CGAffineTransform(rotationAngle: self.chevronRotationAngle) : .identity
        self.expandedView.alpha = shouldExpand ? 1.0 : 0.0
    }
    
    self.expandedView.isHidden = !shouldExpand
}

or, which works better most times:

override func updateUI(shouldExpand: Bool) {
    self.descriptionLabel.numberOfLines = shouldExpand ? 0 : 3
    self.descriptionLabel.layoutIfNeeded()
    
    seeMoreLabel.text = shouldExpand ? "See less" : "See more"
}

References:

• https://medium.com/flawless-app-stories/build-a-self-sizing-uitableviewcell-with-uistackview-7daa2bd85630
• https://github.com/akashvercetti/Expandable-UITableViewCell-UIStackView

Unfortunately, as seen here [TODO: insert gif], this doesn’t work in a lot of cases. This leads us to the next method.

---

Two AutoLayout Constraints

TBW

The basic idea is this:

You make a collapsed constraint and a expanded constraint and then switch between them when you want to collapse / expand. And then to keep the UI from trying to maintain both constraints instantly (jumping), you make both of those constraints priority 999.

If you have a UIStackView inside of your expanded view, you will have to change some of their vertical resistance’s to 1000 because AutoLayout likes to compress the contents of stack views.

Just call begin and end updates after changing constraints and voila!

Steps:

1. Two constraints with priority 999
   • If the expanded view has / is a UIStackView make sure to make the items that you don’t want to squish have a vertical resistance of 1000
2. Call begin and end updates
3. ???
4. Profit

override func updateUI(shouldExpand: Bool) {
    UIView.animate(withDuration: animationDuration) {
        self.chevronImageView?.transform = shouldExpand ? CGAffineTransform(rotationAngle: self.chevronRotationAngle) : .identity
        self.expandedView.alpha = shouldExpand ? 1.0 : 0.0
    }
    
    self.expandedConstraint.isActive = shouldExpand
    self.collapsedConstraint.isActive = !shouldExpand
}

---

height:forRowAt

TBD, if applicable

---