Since inserting UITableViewAutomaticDimension returned cells are tiny

Question

I am working on a comment section for my app and want my cells to resize themselves automatically. If I replace UITableViewAutomaticDimension with an arbitrary value like 120, it looks more or less like I want it to.

However, if I leave it at UITableViewAutomaticDimension the cells returned are literally tiny. I will add a picture at the end showing what both ways look like (left: UITableViewAutomaticDimension, right: rowHeight = 120). How can I fix this? I haven't found anyone with a similar problem since I do set the constraints, which were in many cases the cause of auto-resize problems (the subviews do have translatesAutoresizingMaskIntoConstraints set to false).

I am going to provide all the code which may be of interest. It's basically nothing else but a standard table view with cells which are supposed to auto-resize themselves and use constraints.

I would really appreciate your help!

CommentCell

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

    setupViews()
}

func setupViews() {
    //all of these subviews have .translatesAutoresizingMaskIntoConstraints = false
    contentView.addSubview(profilePictureView)
    contentView.addSubview(usernameLabel)
    contentView.addSubview(commentLabel)

    let marginGuide = contentView.layoutMarginsGuide

    let viewWidth = UIScreen.main.bounds.width

    NSLayoutConstraint.activate([
        profilePictureView.heightAnchor.constraint(equalToConstant: 42),
        profilePictureView.widthAnchor.constraint(equalToConstant: 42),
        profilePictureView.leftAnchor.constraint(equalTo: marginGuide.leftAnchor),
        profilePictureView.topAnchor.constraint(equalTo: marginGuide.topAnchor, constant: -2),

        usernameLabel.leftAnchor.constraint(equalTo: profilePictureView.rightAnchor, constant: 16),
        usernameLabel.widthAnchor.constraint(equalToConstant: viewWidth - 66),
        usernameLabel.centerYAnchor.constraint(equalTo: profilePictureView.centerYAnchor, constant: -8),

        commentLabel.leftAnchor.constraint(equalTo: profilePictureView.rightAnchor, constant: 16),
        commentLabel.widthAnchor.constraint(equalTo: usernameLabel.widthAnchor),
        commentLabel.topAnchor.constraint(equalTo: usernameLabel.bottomAnchor, constant: 4)
    ])
}

UITableViewAutomaticDimension | 120:

I am pretty sure this has to do with the constraints. Is there a reason you don't do these in the storyboard? — Casper Zandbergen, Jul 28 '17 at 14:16

mag_zbc · Accepted Answer · 2017-07-28T14:27:36.090

The issue is constraints - you add constraints to subviews of your cell, but not to contentView. You omitted height constraints for usernameLabel and commentLabel - thats correct, they will resize according to their contents. But contentView will not resize, because it doesn't know its desired size. Without any constraints, from which contentView might deduce its size, it defaults to 44.0, as described here.

So what you need to do is add top constraint to usernameLabel and bottom constraint to commentLabel

usernameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0)
commentLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0)

edit
You seem to already have top anchor, so just the bottom one should suffice.

I see, it makes sense. However, one doesn't need to set a `topAnchor` for the username label, for a topAnchor is set already with `centerYAnchor`. — Moritz, Jul 28 '17 at 14:28

Since inserting UITableViewAutomaticDimension returned cells are tiny

CommentCell

1 Answers1