Updating the Height of a Self-Sizing Table View Cell with a Text View

Question

I have a table view similar to the Compose screen in Mail, where one of the cells is used for text input. I'd like the cell to resize automatically by constraining the contentView of the cell to its UITextView subview using Auto Layout. The table view's rowHeight and estimatedRowHeight are set to UITableViewAutomaticDimension. Additionally, the text view's scrollEnabled property is set to false so that it reports its intrinsicContentSize.

However, the cell does not update its height as lines of text are entered by the user, even though the text view itself does update its intrinsic content size. As far as I know, the only way to request this manually is for the table view to call beginUpdates() and endUpdates(). The height of the cell is then correctly updated, but this also causes re-layout of the entire table view. Here's (someone else's) sample code demonstrating the problem.

How can I reflect changes in the cell's text view without laying out the entire table view?

Answer 1

Throttled Solution

The trouble with reloadRowsAtIndexPaths is that the UITextField will resignFirstResponder since the cell, in essence, is reloaded: i.e. destroyed.

Conversely, beginUpdates() & endUpdates() do maintain the existing cells, yet jitters when invoked on a cell containing a scrollEnabled UITextView if triggered with every single textViewDidChange.

Limit the updates frequency

This solution is based on the popular textViewDidChange approach, only reduces or stops flickering entirely by postponing the update.

Subclass UITableViewCell:

class TableViewTextViewCell : UITableViewCell, UITextViewDelegate {
    var refreshCell:(() -> Void)? = nil
    var textViewDirtyCount = 0

    // MARK: - UITextViewDelegate
    func textViewDidChange(_ textView: UITextView) {
        textViewDirtyCount += 1
        perform(#selector(TableViewTextViewCell.queuedTextVewDidChange),
                with: nil,
                afterDelay: 0.3) // Wait until typing stopped
    }

    func textViewDidBeginEditing(_ textView: UITextView) {
        textViewDirtyCount = 0 // initialize queuedTextVewDidChange
    }

    func textViewDidEndEditing(_ textView: UITextView) {
        textViewDirtyCount = -1 // prevent any further queuedTextVewDidChange
    }

    func queuedTextVewDidChange() {
        if textViewDirtyCount > 0 {
            textViewDirtyCount -= 1
            if 0 == textViewDirtyCount, let refreshCell = refreshCell {
                refreshCell()
            }
        }
    }
}

Dequeue & update closure:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier(
        "cell", forIndexPath: indexPath) as! TableViewTextViewCell

    cell.refreshCell = {
        () -> Void in
        tableView.beginUpdates()
        tableView.endUpdates()
    }
    return cell
}

---

Notice the 0.3 seconds delay after the last character has been entered ; if less than 0.3 seconds has elapsed since the last change, no update takes place. This significantly reduces flickering.

↻ replay animation

---

► Find this solution on GitHub and additional details on Swift Recipes.

Answer 2

The beginUpdates method works if you disable UIView animations before calling it.

//inside of cellForRowAtIndexPath
cell.performCellUpdates = { [unowned self] in
    UIView.setAnimationsEnabled(false)   //the secret sauce, prevents the jitter
    self.tv.beginUpdates()
    self.tv.endUpdates()
    UIView.setAnimationsEnabled(true)    //don't forget to turn animations back on
}
   
...

//inside of cell subclass
func textViewDidChange(_ textView: UITextView) {
    textView.sizeToFit()
    performCellUpdates()
}

Answer 3

You cannot change the height of an existing UITableViewCell. You want to tell the UITableView that cell is invalid, and reload it.

At the time the cell is reloaded (cellForRowAtIndexPath) you can then pass the new, updated cell. And you trigger a single cell refresh with tableView.reloadRowsAtIndexPaths([indexPath], withRowAnimation: .Fade)

reloadRowsAtIndexPaths is not as drastic are reloadData(). It is a punctual index refresh, does not need to be surrounded by tableView.beginUpdates and tableView.endUpdates, and you get to supply an animation method of your choice, such as .Fade.

See reloadRowsAtIndexPaths(_:withRowAnimation:) in the documentation.

---

Also visit this Stack Overflow answer which describes changing a cell height in details.