Automatic TableViewCell sizing programmatically with a label and textfield inside a UIStackView

Question

Hi I was messing around with some code and decided I wanted to create a UITableViewCell with a UILabel and UITextField inside a horizontal UIStackView with a min height of 50 and automatic cell sizing.

I have set my tableView below with the following code:

    tableView.register(ExampleTableViewCell.self, forCellReuseIdentifier: "ExampleCellId")
    tableView.rowHeight = UITableViewAutomaticDimension
    tableView.estimatedRowHeight = UITableViewAutomaticDimension

For some reason I am unable to get it to work without getting constraint warning errors. Below is one of my attempts. There seems to be nothing online on how to do this. I know I can do this without having the label and textField in a stackView but that is the problem I would like to solve and I assume this is possible.

    class ExampleTableViewCell: UITableViewCell {

        private let nameLabel: UILabel = {
            let label = UILabel()
            label.setContentHuggingPriority(UILayoutPriority(rawValue: 251), for: .horizontal)
            label.text = "Name"
            return label
        }()

        private let nameTextField: UITextField = {
            let tf = UITextField()
            tf.placeholder = "Enter Name"
            return tf
        }()

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

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

        private func setupViews() {
            let stackView = UIStackView(arrangedSubviews: [nameLabel, nameTextField])
            stackView.translatesAutoresizingMaskIntoConstraints = false
            stackView.spacing = 10
            contentView.addSubview(stackView)

            nameLabel.heightAnchor.constraint(greaterThanOrEqualToConstant: 50).isActive = true

            stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
            stackView.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
            stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
            stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
        }
    }

This is the error that I am getting - I know it is due to the height constraint but how else can I make the row be at least 50 points in height?

Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it.

<NSLayoutConstraint:0x604000483ca0 V:|-(0)-[UIStackView:0x7f9663c4c170]   (active, names: '|':UITableViewCellContentView:0x7f9663f07500 )>,
<NSLayoutConstraint:0x6040004845b0 UIStackView:0x7f9663c4c170.bottom == UITableViewCellContentView:0x7f9663f07500.bottom   (active)>,
<NSLayoutConstraint:0x604000486900 UILabel:0x7f9663c489b0'Name'.height >= 50   (active)>,
<NSLayoutConstraint:0x60000028db10 'UISV-canvas-connection' UIStackView:0x7f9663c4c170.top == UILabel:0x7f9663c489b0'Name'.top   (active)>,
<NSLayoutConstraint:0x60000028db60 'UISV-canvas-connection' V:[UILabel:0x7f9663c489b0'Name']-(0)-|   (active, names: '|':UIStackView:0x7f9663c4c170 )>",
<NSLayoutConstraint:0x60000028dd90 'UIView-Encapsulated-Layout-Height' UITableViewCellContentView:0x7f9663f07500.height == 50   (active)>

Will attempt to recover by breaking constraint = 50 (active)>

For some reason I get no warnings when I set this:

      nameLabel.heightAnchor.constraint(greaterThanOrEqualToConstant: 100).isActive = true
      nameTextField.heightAnchor.constraint(greaterThanOrEqualToConstant: 100).isActive = true

warning is coming from nameLabel.heightAnchor.constraint(greaterThanOrEqualToConstant: 50).isActive = true as contentview height is default 50. change to lessThanEqual.. nameLabel.heightAnchor.constraint(lessThanOrEqualToConstant: 50).isActive = true — Yongjoon, Oct 27 '17 at 04:03
@Yongjoon that doesn't; enforce the row to be at least 50 points in height and although I am not using dynamic font sizing in example, what happens if you need the row to be larger then 50 points due to accessibility reasons of needing larger font? — Edward, Oct 27 '17 at 07:12
@Mr.Bista I will add the error that is occurring from this code in my question — Edward, Oct 27 '17 at 07:13
@Edward ,please check this out https://stackoverflow.com/questions/42984856/resizing-uistackview-after-changing-uilabel-number-of-lines — Yongjoon, Oct 27 '17 at 11:27
@Yongjoon thanks for your help. After doing more investigating myself today I realised that this is not a good opportunity to use UIStackView as the answer to the question you linked in elegantly explains :). — Edward, Oct 27 '17 at 20:53

Automatic TableViewCell sizing programmatically with a label and textfield inside a UIStackView

0 Answers0