Strange Behaviour of Constraints added Programatically in UITableViewCell | Swift

Question

I have a tableViewCell to which I am giving constraints programatically. I have only a single ImageView inside the cell. Now I am not giving cell's contentView a fixed height, rather I am giving the top & bottom of the imageView top contentView so that the cell height increase with increase in imageView height.

        messagingPersonProfilePicture.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        messagingPersonProfilePicture.topAnchor.constraint(equalTo: self.topAnchor, constant: 15),
        messagingPersonProfilePicture.widthAnchor.constraint(equalToConstant: 50),
        messagingPersonProfilePicture.heightAnchor.constraint(equalToConstant: 50),
        messagingPersonProfilePicture.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -15),

Now, giving these constraints, the program is breaking these constraints telling me following:

"<NSLayoutConstraint:0x6000034a4e60 V:|-(15)-[UIImageView:0x7fa7f6605640] (active, names: '|':Paigham.MessagesTableViewCell:0x7fa7f7809c00'tableCellID' )>", "<NSLayoutConstraint:0x6000034a4f00 UIImageView:0x7fa7f6605640.height == 50 (active)>", "<NSLayoutConstraint:0x6000034a4f50 UIImageView:0x7fa7f6605640.bottom == Paigham.MessagesTableViewCell:0x7fa7f7809c00'tableCellID'.bottom - 15 (active)>", "<NSLayoutConstraint:0x600003494000 'UIView-Encapsulated-Layout-Height' Paigham.MessagesTableViewCell:0x7fa7f7809c00'tableCellID'.height == 80.5 (active)>"
Will attempt to recover by breaking constraint <NSLayoutConstraint:0x6000034a4f00 UIImageView:0x7fa7f6605640.height == 50 (active)>

Which I think is a bit strange as tableView cell is getting the proper height from its subviews. But as soon as I set tableView separatorStyle to none, the constraints aren't breaking anymore. What can be the reason behind that?

My tableViewMethods:

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 5
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: tableCellID, for: indexPath) as! MessagesTableViewCell
    cell.backgroundColor = .blue
    return cell
}

func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
    return 100
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return UITableView.automaticDimension
}

My customCellCode:

  class MessagesTableViewCell: UITableViewCell {
    var messagingPersonProfilePicture: UIImageView = {
    let v = UIImageView()
    v.translatesAutoresizingMaskIntoConstraints = false
    v.contentMode = .scaleAspectFill
    v.image = #imageLiteral(resourceName: "unnamed-3")
    v.layer.cornerRadius = 25
    v.clipsToBounds = true
    v.backgroundColor = .yellow
    return v
}()

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

func setupMessageCell() {
    contentView.addSubview(messagingPersonProfilePicture)
    
    NSLayoutConstraint.activate([

        messagingPersonProfilePicture.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        messagingPersonProfilePicture.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 15),
        messagingPersonProfilePicture.widthAnchor.constraint(equalToConstant: 50),
        messagingPersonProfilePicture.heightAnchor.constraint(equalToConstant: 50),
        messagingPersonProfilePicture.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -15),

    ])
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")

I think the issue is with 0.5 as per your constraint value should be 80 (15 + 50 + 15) where as UIView-Encapsulated-Layout-Height is considered as 80.5 which is also active which is causing the issue — Sandeep Bhandari
Right, so what do you think that 0.5 is coming from? Any guess? Because I am clueless here! — Abu Bäkr
did you set tableView.rowHeight = UITableView.automaticDimension ? — Mat
Can you please post the code where u add imageView as subview to cell and also for height I assume you are returning automatic dimension — Sandeep Bhandari

πter πter · Accepted Answer · 2021-01-28T09:45:01

Edit:

After you gave more information about the issue, it seems that your heightAnchor definition conflicts with the TableView default cell height definition. The conflict occurs because when the UITableView first loads/being laid out, it sets the height of its cells to 0. This obviously conflicts with your own constraints(Setting the height to 50 + 15 top + 15 bottom margin). To solve this, you can define the top or bottom anchor with a lower priority.

let bottomConstraint = messagingPersonProfilePicture.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -15)
bottomConstraint.priority = .defaultHigh
bottomConstraint.isActive = true

Strange Behaviour of Constraints added Programatically in UITableViewCell | Swift

1 Answers