Swift Playground UITable View Cell not resizing after I add a subview - ios

Question

the table view loads
the sub view loads but you can see it is over other cells
sometimes the sub view loads but other cells are on top of it
I have a UITableView, and when the user touches a row a subview gets added to the screen. When they click another row, the last subview disappears (and the row should shrink back down to its normal size). The subview displays perfectly (and goes away when another row is clicked), but it hangs out of the row and covers some of the other options. Also, when the table view reloads after screen rotations, the subview ends up behind the other rows of the table.
I want the row with the subview to resize so that it matches the frame of the subview. Also, each subview is a different size depending on the text and images included in it. Because of this I have tried using auto layouts and UITableViewAutomaticDimension, but nothing seems to be working.
I am including my UITableViewController so you can see what I have and can steer me in the right direction.
class TableViewController : UITableViewController {
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
tableView.backgroundColor = #colorLiteral(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
self.tableView.estimatedRowHeight = rowHeight
return filmsToDisplay.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var currentFilm = filmsToDisplay[indexPath.row]
let cell = UITableViewCell(style: .default, reuseIdentifier: nil)
cell.selectionStyle = .none
cell.textLabel?.text = "\(currentFilm.year) - \(currentFilm.movieTitle)"
cell.textLabel?.textColor = #colorLiteral(red: 0.254901975393295, green: 0.274509817361832, blue: 0.301960796117783, alpha: 1.0)
cell.textLabel?.font = UIFont.systemFont(ofSize: fontSize)
cell.textLabel?.sizeToFit()
cell.backgroundColor = #colorLiteral(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
cell.contentView.backgroundColor = #colorLiteral(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
let accessory = makeChart(currentFilm: filmsToDisplay[indexPath.row])
cell.contentView.addSubview(accessory)
accessory.translatesAutoresizingMaskIntoConstraints = false
accessory.trailingAnchor.constraint(equalTo:cell.contentView.trailingAnchor).isActive = true
accessory.topAnchor.constraint(equalTo: cell.contentView.topAnchor).isActive = true
accessory.bottomAnchor.constraint(equalTo: cell.contentView.bottomAnchor).isActive = true
accessory.widthAnchor.constraint(equalTo: cell.contentView.widthAnchor, multiplier: nomBarWidth).isActive = true
cell.contentView.translatesAutoresizingMaskIntoConstraints=false
cell.contentView.leadingAnchor.constraint(equalTo:cell.leadingAnchor).isActive = true
cell.contentView.trailingAnchor.constraint(equalTo:cell.trailingAnchor).isActive = true
cell.contentView.topAnchor.constraint(equalTo:cell.topAnchor).isActive = true
cell.contentView.bottomAnchor.constraint(equalTo: cell.bottomAnchor).isActive = true
return cell
}
var lastSelectedCell : UITableViewCell? = nil
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let currentFilm = filmsToDisplay[indexPath.row]
var detailView = createView(film: currentFilm)
detailView.tag = 555
let selectedCell:UITableViewCell = tableView.cellForRow(at: indexPath)!
//get rid of last detail view
if let lastCell = lastSelectedCell {
for i in 0..<lastCell.contentView.subviews.count {
let content = lastCell.contentView.subviews[i]
if content.tag == 555{
content.removeFromSuperview()
}
}
}
selectedCell.contentView.addSubview(detailView)
detailView.translatesAutoresizingMaskIntoConstraints=false
detailView.leadingAnchor.constraint(equalTo:selectedCell.contentView.leadingAnchor).isActive = true
detailView.trailingAnchor.constraint(equalTo:selectedCell.contentView.trailingAnchor).isActive = true
detailView.topAnchor.constraint(equalTo:selectedCell.contentView.topAnchor).isActive = true
detailView.bottomAnchor.constraint(equalTo:detailView.subviews[detailView.subviews.count - 2].bottomAnchor).isActive = true
lastSelectedCell = selectedCell
}
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
}
The pieces of the sub view define their height as follows (there are more pieces but they all have the same kind of constraints:
//MOVIE TITLE BAR
let movieTitleBar = UIButton()
movieTitleBar.setTitleColor(#colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0), for: UIControlState.normal)
movieTitleBar.setTitle(film.movieTitle, for: UIControlState.normal)
movieTitleBar.backgroundColor = #colorLiteral(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
movieTitleBar.alpha = 0.5
movieTitleBar.layer.borderWidth = outlineWidth
movieTitleBar.layer.borderColor = #colorLiteral(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
}
filmView.addSubview(movieTitleBar)
movieTitleBar.translatesAutoresizingMaskIntoConstraints = false
movieTitleBar.topAnchor.constraint(equalTo:filmView.topAnchor).isActive = true
movieTitleBar.heightAnchor.constraint(equalToConstant: rowHeight).isActive = true
movieTitleBar.leadingAnchor.constraint(equalTo:filmView.leadingAnchor).isActive = true
movieTitleBar.trailingAnchor.constraint(equalTo:filmView.trailingAnchor).isActive = true
//POSTER IMAGE
var poster = UIButton()
isPoster = false
if let posterImg = film.image {
if let url = NSURL(string:posterImg){
if let data = NSData(contentsOf:url as URL){
film.poster = UIImage(data:data as Data)
poster.setImage(film.poster, for: UIControlState.normal)
isPoster = true
filmView.addSubview(poster)
}
}
}
//BRIEF DESCRIPTION LABEL
let briefDescriptionBar = UILabel()
briefDescriptionBar.backgroundColor = film.colorUI
briefDescriptionBar.alpha = 0.8
briefDescriptionBar.text = "\(film.year) - \(film.briefDescription)"
briefDescriptionBar.textColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
briefDescriptionBar.numberOfLines = 0
briefDescriptionBar.textAlignment = .center
filmView.addSubview(briefDescriptionBar)
briefDescriptionBar.translatesAutoresizingMaskIntoConstraints = false
briefDescriptionBar.leadingAnchor.constraint(equalTo:movieTitleBar.leadingAnchor).isActive = true
briefDescriptionBar.topAnchor.constraint(equalTo:movieTitleBar.bottomAnchor).isActive = true
if isPoster == true {
poster.translatesAutoresizingMaskIntoConstraints = false
poster.topAnchor.constraint(equalTo:movieTitleBar.bottomAnchor).isActive = true
poster.trailingAnchor.constraint(equalTo:movieTitleBar.trailingAnchor).isActive = true
poster.widthAnchor.constraint(equalTo:filmView.widthAnchor, multiplier:nomBarWidth).isActive = true
let aspect = (nomBarWidth * 41) / 27
poster.heightAnchor.constraint(equalTo: filmView.widthAnchor, multiplier: aspect).isActive = true
briefDescriptionBar.trailingAnchor.constraint(equalTo:poster.leadingAnchor).isActive = true
briefDescriptionBar.bottomAnchor.constraint(equalTo:poster.bottomAnchor).isActive = true
}
else {
briefDescriptionBar.widthAnchor.constraint(equalTo:filmView.widthAnchor).isActive = true
briefDescriptionBar.heightAnchor.constraint(equalTo:movieTitleBar.heightAnchor, multiplier : 2).isActive = true
}

Answer 1

Your problem is that you don't give a height constraint for the subviews you add , you only hook leading ,trailing , top and bottom but the contentView expects it's height from inner subviews ( if they don't have intrinsic content size like labels / buttons ) , also no need for this part of code
cell.contentView.translatesAutoresizingMaskIntoConstraints=false
cell.contentView.leadingAnchor.constraint(equalTo:cell.leadingAnchor).isActive = true
cell.contentView.trailingAnchor.constraint(equalTo:cell.trailingAnchor).isActive = true
cell.contentView.topAnchor.constraint(equalTo:cell.topAnchor).isActive = true
cell.contentView.bottomAnchor.constraint(equalTo: cell.bottomAnchor).isActive = true
Also there should be only one view inside to the contentView that is connected to the bottom , if you add more than one , then you'll get conflicts if both views are also hooked to top of it , so you have to break last view bottom constraint before hooking a new one