UITableViewCell height problems

Using Swift
1

Hello:

As you will guess from what you are about to read I am extremely new at swift and IOS coding. I have am trying to display content on a UITableview using a UITableViewController and a custom coded UITableViewCell. In this cell I have two items, an imageview and a label. Both get populated with their corresponding data programmatically. The problem that I am having is laying out the image and the label inside the customcell class the way that I want. More specifically, I'm having problems figuring out what is driving the height of the custom cell's row when the project runs. Ideally I'd like the imageview to set this height constraint (along with the width), regardless of the size of the original image asset. But when I set the imageview's height constraints I get an error in the debugger telling me that it is "Unable to simultaneously satisfy constraints" and it mentions the constraimts that I have set for the imageview's bottom & height in the error code accordingly. This is as close as I have been able to run the project to make it look like I want but I keep getting that error.

I read somewhere that in order to have autolayout work properly in code I have to set the imageview's leading, top and bottom constraints somehow. But if I do not set a height constraing for the imageview then the table view uses the original height for the image and throws off the look of the table. These are the snippets of code that I have that I think are relevant:

code inside my TableviewController "viewDidLoad()" function
self.tableView.rowHeight = UITableView.automaticDimension
self.tableView.estimatedRowHeight = 200

code inside the custom "UITableViewCell" class declaration

var messageLabel: UILabel = {
    var label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.backgroundColor = .blue  // REMOVE ME JUST FOR TESTING
    label.textColor = .black
    label.font = UIFont(name: "Verdana", size: 20)
    return label
}()

var mainImageView: UIImageView = {
    var imageView = UIImageView()
    imageView.contentMode = .center // image will never be stretched veritically or horizontally
    imageView.clipsToBounds = true
    imageView.translatesAutoresizingMaskIntoConstraints = false //enable auto layout
    imageView.layer.cornerRadius = imageView.frame.size.width / 2
    imageView.backgroundColor = .red  // REMOVE ME JUST FOR TESTING
    return imageView
}()

code inside the "override init(style:UITableViewCell.CellStyle, reuseIdentifier: String?)" function

super.init(style: style, reuseIdentifier: reuseIdentifier)
   
    //add the views that we have created to this cell
    self.contentView.addSubview(mainImageView)
    self.contentView.addSubview(messageLabel)

    //add constraints for each of the views
    mainImageView.topAnchor.constraint(equalTo: self.contentView.topAnchor).isActive = true
    mainImageView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor).isActive = true
    mainImageView.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor).isActive = true //dynamic row height also requires bottom constraints
    mainImageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    
    messageLabel.topAnchor.constraint(equalTo: self.contentView.topAnchor).isActive = true
    messageLabel.leadingAnchor.constraint(equalTo: mainImageView.trailingAnchor, constant: 5).isActive = true
    messageLabel.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor).isActive = true

One of the things that I tried was to test the results by commenting out the "mainImageView" bottom constrain and just scpecify a height constaint for the imageview. But the result was that the images overlapped ontop of each other and the text labels' heights did not match the images.

I don't know what I am missing. What am I doing wrong or not doing?

Thanks.

2

The source of your problems is down to trying to do everything in code, rather than using either a storyboard or a xib file for visual components.

3

Hi Joanna, thanks for the feedback. I was thinking the same thing as well at one point. Since I am using a custom cell to layout the picture and the text field I am not able to see a visual definition of the cell on the Storyboard. Is there something that I've missed where I should be able to see an instance of this custom textfield and manipulate it using the storyboard?

4

Hi,
Welcome to swift world!!!

That probably has nothing to do with view code vs. storyboard/xib =]

Did you configure your tableView to automatically calculate each cell height based on its cell constraints?
Add the following lines at your viewController viewDidLoad method and tell if it solves the issues

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 120
5

Couple things.

Doing constraints in code is a pain.

Yes, you can create a tableviewcell in the storyboard. You can also make them in individual nibs if you want.

For the tableView to calculate the cell height there needs to be a single vertical path of constraints. So in your case you probably want the constraints to go from top to image view to label to bottom.

There are lots of tableView tutorials online. Look at raywenderlich.com for some.

1 Like
6

I guess this is opinion. I don't happen to agree. I find it to be far less painful than the alternative.

7

Just want to second that this is called out as pure opinion even though it was stated as fact.

2 Likes