Expandable UITableView Cell using Autolayout results in UIViewAlertForUnsatisfiableConstraints

Question

I am trying to make expandable cells using combination of UITableViewAutomaticDimension row height and Autolayout of the cells. To make things simple, I started with the following simple code, that I expected to work:

import UIKit

class ViewController: UITableViewController {

    let cells = [Cell(), Cell(), Cell()]

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.rowHeight = UITableViewAutomaticDimension
        tableView.estimatedRowHeight = 50

        for cell in cells {
            cell.tableView = tableView
        }
    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

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

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        return cells[indexPath.row]
    }
}

class Cell: UITableViewCell {

    var cons: NSLayoutConstraint?
    var tableView: UITableView?

    init() {
        super.init(style: .default, reuseIdentifier: nil)

        let button = UIButton()
        contentView.addSubview(button)
        button.addTarget(self, action: #selector(Cell.tapped(_:)), for: .touchUpInside)
        button.setTitle("Press me", for: .normal)
        button.setTitleColor(.red, for: .normal)

        button.translatesAutoresizingMaskIntoConstraints = false

        // constraining the button to the view, so that buttons height would define cell height
        let constraints = [
            button.topAnchor.constraint(equalTo: contentView.topAnchor),
            button.rightAnchor.constraint(equalTo: contentView.rightAnchor),
            button.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            button.leftAnchor.constraint(equalTo: contentView.leftAnchor),
        ]

        NSLayoutConstraint.activate(constraints)
        cons = button.heightAnchor.constraint(equalToConstant: 100)
        cons?.isActive = true
    }

    func tapped(_ sender: UIButton) {
        // change the height of the button, thus of the contentView too (since the button is constrained to the contentView)
        if cons?.constant == 100 {
            cons?.constant = 200
        } else {
            cons?.constant = 100
        }
        // tell the tableView to redraw itself to apply the change
        tableView?.beginUpdates()
        tableView?.setNeedsDisplay()
        tableView?.endUpdates()
    }

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

Now this seems to be working, however, I still do get UIViewAlertForUnsatisfiableConstraints warning with the following message:

(
"<NSLayoutConstraint:0x17408c7b0 V:|-(0)-[UIButton:0x109e10290'Press me']   (active, names: '|':UITableViewCellContentView:0x109e0fd90 )>",
"<NSLayoutConstraint:0x17408c8a0 UIButton:0x109e10290'Press me'.bottom == UITableViewCellContentView:0x109e0fd90.bottom   (active)>",
"<NSLayoutConstraint:0x17408c990 UIButton:0x109e10290'Press me'.height == 200   (active)>",
"<NSLayoutConstraint:0x17408db10 'UIView-Encapsulated-Layout-Height' UITableViewCellContentView:0x109e0fd90.height == 100   (active)>"
)

 Will attempt to recover by breaking constraint 
 <NSLayoutConstraint:0x17408c990 UIButton:0x109e10290'Press me'.height == 200   (active)>

It seems that the estimated (or current) row height collides with the autolayout constraint provided by me. Still, refreshing the tableView using following code will display it as expected:

tableView?.beginUpdates()
tableView?.setNeedsDisplay()
tableView?.endUpdates()

How do I remove the warning?

I am aware that simple changing the priority of the height constraint to 999 will remove the warning, but it seems to me as a hack to remove it, not as a solution. If I am mistaken, please explain. Thanks.

Change prority to lower of height constraints – Prashant Tukadiya Jun 20 '17 at 11:11 — Prashant Tukadiya, Jun 20 '17 at 11:11

score 6 · Accepted Answer · answered Jun 20 '17 at 13:22

Setting the height constraint priority to 999 may feel like a hack, but according to Apple's docs:

NOTE Don’t feel obligated to use all 1000 priority values. In fact, priorities should general cluster around the system-defined low (250), medium (500), high (750), and required (1000) priorities. You may need to make constraints that are one or two points higher or lower than these values, to help prevent ties. If you’re going much beyond that, you probably want to reexamine your layout’s logic.

Probably a little less than intuitive:

"I want the button height to control the cell height, so lower its priority????"

But, that does appear to be the "correct" way to do it.

Ref: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW19

score -2 · Answer 2 · answered Jun 20 '17 at 12:44

-2

Remove the height constraint i.e 200 as it is conflicting with top and bottom constraint.

Hope it helps..

answered Jun 20 '17 at 12:44

Kartik Karemani

42
1

The height constraint defines the expansion/collapse height of the cell. It has to be there. – Milan Nosáľ Jun 20 '17 at 12:50

Expandable UITableView Cell using Autolayout results in UIViewAlertForUnsatisfiableConstraints

2 Answers2

Linked