Search code examples
iosswiftuitableviewnslayoutconstraint

UITableViewCell's content view height is not adjusting for the dynamic font (NSLayoutConstraints)


I am having difficulties adjusting table view cells to automatically resize for dynamic type fonts. Note that I am using layout constraints in code, not in storyboard.

Here is my table view setup code:

tableView = UITableView(frame: .zero, style: .grouped)
tableView.register(ChatAnalyticsCell.self, forCellReuseIdentifier: ChatAnalyticsCell.reuseIdentifier)
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = UITableView.automaticDimension

Here are my 2 labels and image view setup in ChatAnalyticsCell class

private var iconImageView: UIImageView = {
    let imageView = UIImageView(frame: CGRect(origin: .zero,
                                              size: CGSize(width: 20, height: 20)))
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.tintColor = UIColor(red: 0.25, green: 0.3, blue: 0.72, alpha: 1)
    return imageView
}()

private var segmentLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.numberOfLines = 0
    label.textColor = UIColor.gray
    label.font = UIFont.preferredFont(forTextStyle: .footnote)
    label.adjustsFontForContentSizeCategory = true

    return label
}()

private var segmentDataLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.numberOfLines = 0
    label.textColor = UIColor(red: 0.13, green: 0.15, blue: 0.19, alpha: 0.9)
    label.font = UIFont.preferredFont(forTextStyle: .body)
    label.adjustsFontForContentSizeCategory = true
    return label
}()

Here is the function where I add subviews and setup constraints, to resize properly for the dynamic-type font.

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

    setupSubviews()
}


private func setupSubviews() {
    addSubview(iconImageView)
    iconImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 15.0).isActive = true
    iconImageView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
    iconImageView.widthAnchor.constraint(equalToConstant: 20.0).isActive = true
    iconImageView.heightAnchor.constraint(equalToConstant: 20.0).isActive = true

    // Analytics segment label
    addSubview(segmentLabel)
    segmentLabel.leadingAnchor.constraint(equalTo: iconImageView.trailingAnchor, constant: 20).isActive = true
    segmentLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 20).isActive = true
    segmentLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20).isActive = true

    // Segment data label
    addSubview(segmentDataLabel)
    segmentDataLabel.leadingAnchor.constraint(equalTo: segmentLabel.leadingAnchor).isActive = true
    segmentDataLabel.trailingAnchor.constraint(equalTo: segmentLabel.trailingAnchor).isActive = true
    segmentDataLabel.topAnchor.constraint(equalTo: segmentLabel.bottomAnchor, constant: 5).isActive = true
    segmentDataLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 20).isActive = true

    contentView.heightAnchor.constraint(greaterThanOrEqualToConstant: 80).isActive = true
}

Note that when I run the code, there are no constraints breaking, but the layout is not properly updated. Please see the screenshot:

enter image description here


Solution

  • Add all the views to the contentView!

    contentView.addSubview(yourView)
    

    One more thing - you might want to change(why?) this constraint,

    segmentDataLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 20).isActive = true
    

    to,

    segmentDataLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -20).isActive = true
    

    The rest of the constraints look ok to calculate the height of the contentView.