Self sizing cells height change causes jumping animation

Question

I have setup a tableview with dynamic height cells aka UITableView.automaticDimension using Autolayout. This works fine. Now what I am trying to achieve is to change the height of cell & animate it. The issue is that when I change cell height & animate it, the animation is weirdly jumping. The jump only occurs if I scroll down a bit & then expand/collapse cells. I have a simple table view cell. It has a label & an empty UIView with fixed height constraint. When I want to collapse/expand the cell, I simply change the constant of that height constraint to 0 or 300.

I have tried many collapsable tableview examples off the internet. All of them have this issue. One exception is https://github.com/Ramotion/folding-cell, but that uses fixed heights for cells.

I have tried quite a few options to animate the cell height change.

1-> On didSelectRow, I change the height constraint & call tableview beginUpdate & endUpdates. Doesn't solve the jump issue.

2-> Change my model & call tableView.reloadRows. Doesn't solve the jump issue.

This is screenshot of my tableview cell setup. https://drive.google.com/open?id=12nba6cwRszxRlaSA-IhrX3X_vLZ4AWxy

A link to video of this issue: https://drive.google.com/open?id=19Xmc0PMXT0EuHTJeeGHm4M5aPoChAtf3

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.dataSource = self
        tableView.delegate = self
        tableView.estimatedRowHeight = 50
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedSectionHeaderHeight = 0
        tableView.estimatedSectionFooterHeight = 0
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! OuterTableViewCell
        let height: CGFloat = isCellExpanded[indexPath.row] ? 300 : 0

        cell.labelText.text = "Cell Number: \(indexPath.row + 1)"
        cell.buttonExpansionToggle.setImage(UIImage(named: isCellExpanded[indexPath.row] ? "arrow-down" : "arrow-right"),
                                            for: .normal)
        cell.viewContainerHeight.constant = height
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        isCellExpanded[indexPath.row] = !isCellExpanded[indexPath.row]
        tableView.reloadRows(at: [indexPath], with: .automatic)
    }

Another form of didSelectRow:

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

        guard let cell = tableView.cellForRow(at: indexPath) as? OuterTableViewCell else { return }
        isCellExpanded[indexPath.row] = !isCellExpanded[indexPath.row]
        let height: CGFloat = self.isCellExpanded[indexPath.row] ? 300 : 0
        cell.viewContainerHeight.constant = height
        cell.layoutIfNeeded()
        UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut, animations: {


            tableView.beginUpdates()
            tableView.endUpdates()

            // fix https://github.com/Ramotion/folding-cell/issues/169
            if cell.frame.maxY > tableView.frame.maxY {
                tableView.scrollToRow(at: indexPath, at: UITableView.ScrollPosition.bottom, animated: true)
            }
        }, completion: nil)
    }

I have also tried to call beginUpdates() & endUpdates() outside animation block, yet the issue persists.

I expect the animation to be smooth. Hope someone can help. If someone can setup a simple demo project on github that would be awesome.

Demo project link: https://gitlab.com/FahadMasoodP/nested-tableviews

Help in any form is appreciated. Thanks.

Answer 1

My solution is adding dynamic estimate row height. I think it is bug of UIKit. iOS 13 issue will be not occur.

First, You need add property estimateRowHeightStorage to store estimate height by indexpath

var estimateRowHeightStorage: [IndexPath:CGFloat] = [:]

Second, You need store current height of cell for use later

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    estimateRowHeightStorage[indexPath] = cell.frame.size.height
}

Final, you use estimateRowHeightStorage to set estimate row height.

func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
    if estimateRowHeightStorage[indexPath] != nil {
        return estimateRowHeightStorage[indexPath]!
    }

    return 50
}

Run and feel.

I did found new solution in your case. If you hardfix height when expand. Only need change some thing. Replace all code above with estimatedHeightForRowAt function

func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
    let height: CGFloat = isCellExpanded[indexPath.row] ? 373 : 73

    return height
}