Content of UITableViewCell gets clipped upon expanding the cell - ios

Question

I want to implement expandable cell with UILabel that would grow when user taps it. I set the constraint properly and modify the numberOfLines upon expanding so the size would be calculated correctly.
However, the cell grows in size properly but its content gets clipped off. When I start scrolling the content magically shows up. I have followed few tutorials and I have no idea where my mistake could lie. Please see the code below and GIF
Edit: Of course, I am returning the UITableView.automaticDimension as the height of the row
// Label configuration inside cell
private lazy var label: UILabel = {
let l = UILabel()
l.font = .systemFont(ofSize: 14, weight: .regular)
l.numberOfLines = 3
l.lineBreakMode = .byTruncatingTail
return l
}()
// Modifying this value should correctly resize the label
var isExpanded: Bool = false {
didSet {
label.numberOfLines = isExpanded ? 0 : 3
setNeedsLayout()
}
}
// Setting up constraints. I'm using SnapKit for making the constraints
func setupView() {
contentView.addSubview(label)
label.snp.makeConstraints { make in
make.center.equalToSuperview()
make.left.equalToSuperview().offset(15)
make.top.equalToSuperview().offset(4).priority(.high)
}
}
And this is the code inside view controller that manages the tableView
func didChangeInfoExpanded(at path: IndexPath) {
DispatchQueue.main.async {
guard let cell = self.tableView.cellForRow(at: path) as? InfoTableCell else {
return
}
cell.isExpanded.toggle()
cell.layoutIfNeeded()
UIView.transition(with: self.tableView, duration: 0.3, options: .transitionCrossDissolve, animations: {
self.tableView.beginUpdates()
self.tableView.endUpdates()
}, completion: nil)
/*
I have also tried reloading the row but it's made a glitchy animation and the content was still clipped
self.tableView.reloadRows(at: [path], with: .automatic)
*/
}
}

Answer 1

A common issue is that when we set the number of lines from Zero to 3, the text of the label does not smoothly animate to 3 lines... it "snaps" to 3 lines, and then the bottom of the label frame, and the cell height, animates. Not a great visual effect.
Here's the best result I've gotten for this type of expand / collapse cell...
To the cell's contentView we add:
hiddenLabel ... a UILabel that will be hidden
container ... a UIView to hold the visible label
Then we add to the container view:
visibleLabel ... a UILabel
Both labels get the same text.
We constrain the hiddenLabel to all 4 sides of the content view (using layout margins guide). When we change hiddenLabel's number of lines, that will determine the height of the cell.
We also constrain container to all 4 sides of the content view. When the content view changes height, that will change the height of the container.
Inside the container, we constrain visibleLabel only to Top / Leading / Trailing... so when it has number of lines set to Zero, it will extend outside the bounds of the container (but we won't see that, because container has .clipsToBounds = true).
This gives us a smooth expand/collapse animation, with the text in the label being "revealed" / "covered".
So, the cell class looks like this:
class ExpandCell: UITableViewCell {
static let cellID: String = "expandCell"
let container = UIView()
let visibleLabel = UILabel()
let hiddenLabel = UILabel()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
[hiddenLabel, visibleLabel, container].forEach {
$0.translatesAutoresizingMaskIntoConstraints = false
}
contentView.addSubview(hiddenLabel)
contentView.addSubview(container)
container.addSubview(visibleLabel)
let g = contentView.layoutMarginsGuide
NSLayoutConstraint.activate([
// constrain hiddenLabel Top / Leading / Trailing to contentView
hiddenLabel.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
hiddenLabel.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
hiddenLabel.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
// use less than or equal for bottom constraint to avoid auto-layout warnings
hiddenLabel.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
// constrain container Top / Leading / Trailing / Bottom to contentView
container.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
container.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
container.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
container.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
// constrain theLabel Top / Leading / Trailing to container
visibleLabel.topAnchor.constraint(equalTo: container.topAnchor, constant: 0.0),
visibleLabel.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 0.0),
visibleLabel.trailingAnchor.constraint(equalTo: container.trailingAnchor, constant: 0.0),
// NO bottom constraint for theLabel
])
// prevent theLabel from being visible outside the container
container.clipsToBounds = true
// label properties
[hiddenLabel, visibleLabel].forEach {
$0.font = .systemFont(ofSize: 14, weight: .regular)
$0.numberOfLines = 3
$0.setContentCompressionResistancePriority(.required, for: .vertical)
$0.setContentHuggingPriority(.required, for: .vertical)
$0.contentMode = .top
}
// hide the hidden label
hiddenLabel.isHidden = true
// during development, so we can easily see frames
//visibleLabel.backgroundColor = .cyan
}
func setText(_ str: String, expanded: Bool) -> Void {
hiddenLabel.text = str
visibleLabel.text = str
hiddenLabel.numberOfLines = expanded ? 0 : 3
visibleLabel.numberOfLines = hiddenLabel.numberOfLines
}
func toggleExpanded() -> Bool {
visibleLabel.numberOfLines = 0
hiddenLabel.numberOfLines = hiddenLabel.numberOfLines == 0 ? 3 : 0
return hiddenLabel.numberOfLines == 0
}
}
In cellForRowAt we set it up (for example):
if indexPath.row == 1 {
let c = tableView.dequeueReusableCell(withIdentifier: ExpandCell.cellID, for: indexPath) as! ExpandCell
// set both hidden and visible label text
c.setText(detailString)
c.selectionStyle = .none
return c
}
Then, in didSelectRowAt we can toggle the expanded / collapsed state with animation:
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if let c = tableView.cellForRow(at: indexPath) as? ExpandCell {
tableView.performBatchUpdates({
c.visibleLabel.numberOfLines = 0
c.toggleExpanded()
}, completion: { _ in
// we need to update the number of lines for the visible label
// so we get the ellipses when we're showing the collapsed state
c.visibleLabel.numberOfLines = c.hiddenLabel.numberOfLines
})
}
}
Result:

Answer 2

For now I'll just modify the contentOffset a bit to simulate scrolling, but I'm curious why that issue happens.
self.tableView.beginUpdates()
self.tableView.endUpdates()
self.tableView.contentOffset.y += 0.2
0.1 did not work, 0.2 was the smallest value that caused the content to appear. Hooray UIKit