Wrong height with automatic sizing tableView

427 Views Asked by At

Scenario

I am using the automaticDimension option on UITableView. I'd like to have a single UILabel in my cell that is self-sizing to fit the text.

Setup

Autolayout config Here you can see how I setup the label. The edges are equal to the contentView margins.

Problem

The height is set to 37.0 points on the phone when the text fits one line. 44.0 should be the minimum.

Question

How do I have to setup the layout to maintain a minimum cell height of 44.0 (default height, fitting the other cells)?

Edit:

Using the built-in 'basic' TableViewCell with numberOfLines = 0 seems to be the most easy and best solution! Suggested by eddwinpaz. Thank you all.

2

There are 2 best solutions below

2
On

Change the top anchor from constraint(equalTo:) to greaterThanOrEqualTo: and the bottom one to lessThanOrEqualTo:. Then make the label centered on the Y-Axis.

Then you should set cell. heightAnchor.constraint(greaterThanOrEqualToConstant: 44)

2
On

You need to use numberOfLine = 0 in case you are just working with a Single UILabel. Else. You need to use constrains.

import UIKit

class TableViewController: UITableViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    tableView.register(UITableViewCell.self, forCellReuseIdentifier: "reuseIdentifier")
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return 5
}


override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)
    cell.textLabel?.numberOfLines = 0
    cell.textLabel?.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

    return cell
}

}

In case you need to use a custom UILabel like your case.

class TableViewController: UITableViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    tableView.register(CustomCell.self, forCellReuseIdentifier: "reuseIdentifier")
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return 5
}


override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath) as! CustomCell
    cell.myLabel.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

    return cell
}

 }

class CustomCel: UITableViewCell {

let myLabel: UILabel = {
   let label = UILabel()
    label.numberOfLines = 0
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

func setupViews(){
    addSubview(myLabel)

    myLabel.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
    myLabel.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
    myLabel.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
    myLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true

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

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