Swift: tableview cell content is added again and again with each reload? - ios

Question

Ok, I am fairly this Objective C question had the same problem = Cell Label text overlapping in cells but I haven't found any answers in Swift. Im also very new to tableviews/cells and would just like to know the proper way to do this as clearly Im doing it wrong-
I have custom cells in my tableview that I created in storyboard. I need to add the content of my cells (labels, etc) programmatically. I have done this here -
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("eventCell", forIndexPath: indexPath) as! EventTableCellTableViewCell
// cell.eventTitle.text = names[indexPath.row]
// cell.eventDescription.text = descriptions[indexPath.row]
cell.contentView.clipsToBounds = false
//cell UIX
let eventTitleLabel = UILabel()
let dateLabel = UILabel()
let authorLabel = UILabel()
let locationLabel = UILabel()
let categoryView = UIImageView()
//border
let botBorder: CALayer = CALayer()
botBorder.frame = CGRectMake(0.0, cell.frame.height-1, cell.frame.width, 1.0)
botBorder.backgroundColor = colorWithHexString("#C5C7C9").CGColor
//initalize cell items
eventTitleLabel.text = names[indexPath.row]
eventTitleLabel.frame = CGRectMake(0, 0, cell.frame.width * 0.5, cell.frame.height * 0.3)
eventTitleLabel.tag = indexPath.row
eventTitleLabel.textAlignment = .Left
eventTitleLabel.font = UIFont(name: "Montserrat-Bold", size: screenSize.height * (24/568))
eventTitleLabel.textColor = UIColor.blackColor()
eventTitleLabel.center = CGPointMake(cell.contentView.frame.width * 0.35, cell.contentView.frame.height * 0.35)
dateLabel.textColor = colorWithHexString("#C5C7C9")
let dateString = "\(dates[indexPath.row]) \(times[indexPath.row])"
dateLabel.text = dateString
dateLabel.frame = CGRectMake(0, 0, cell.frame.width * 0.5, cell.frame.height * 0.3)
dateLabel.tag = indexPath.row
dateLabel.textAlignment = .Left
dateLabel.font = UIFont(name: "Montserrat-Regular", size: screenSize.height * (10/568))
dateLabel.center = CGPointMake(cell.contentView.frame.width * 0.35, cell.contentView.frame.height * 0.6)
//for setting bottom label
//Code sets label (yourLabel)'s text to "Tap and hold(BOLD) button to start recording."
let boldAttribute = [
//You can add as many attributes as you want here.
NSFontAttributeName: UIFont(name: "Montserrat-Bold", size: 11.0)!]
let regularAttribute = [
NSFontAttributeName: UIFont(name: "Montserrat-Regular", size: 11.0)!]
let beginningAttributedString = NSAttributedString(string: authors[indexPath.row], attributes: boldAttribute )
//let boldAttributedString = NSAttributedString(string: locationNames[indexPath.row], attributes: boldAttribute)
let boldAttributedString = NSAttributedString(string: "Monterey, CA USA", attributes: regularAttribute)
let fullString = NSMutableAttributedString()
fullString.appendAttributedString(beginningAttributedString)
fullString.appendAttributedString(NSAttributedString(string: " ", attributes: regularAttribute)) //space
fullString.appendAttributedString(boldAttributedString)
//------
authorLabel.attributedText = fullString
authorLabel.textColor = colorWithHexString("#C5C7C9")
authorLabel.frame = CGRectMake(0, 0, cell.frame.width, cell.frame.height * 0.3)
authorLabel.tag = indexPath.row
authorLabel.textAlignment = .Left
authorLabel.center = CGPointMake(cell.contentView.frame.width * 0.5, cell.contentView.frame.height * 0.8)
categoryView.frame = CGRectMake(0, 0, screenSize.width * (50/screenSize.width), screenSize.width * (50/screenSize.width))
categoryView.layer.cornerRadius = categoryView.frame.width * 0.5
categoryView.center = CGPointMake(cell.contentView.frame.width * 0.7, cell.contentView.frame.height * 0.35)
categoryView.backgroundColor = colorWithHexString("#3dccff")
cell.contentView.addSubview(categoryView)
cell.contentView.addSubview(eventTitleLabel)
cell.contentView.addSubview(dateLabel)
cell.contentView.addSubview(locationLabel)
cell.contentView.addSubview(authorLabel)
cell.contentView.layer.addSublayer(botBorder)
print("called cell")
return cell
}
And this works the first time. However I learned from the print to console that this is called every time you scroll, and also after I add new items that take up new cells in my tableview. When that happens I get this overlapping -
How do I fix this? I looked also at TableViewCell is piled up and appear again and again and tried putting cell.contentView.removeFromSuperView() at the beginning of this function so it would clear out the old content but that resulted in absolutely nothing showing up.
What is the right way to add content programmatically?

Answer 1

The tableview cells are recycled, therefore each time a cell is presented its going to have whatever you put in it last, you will need to appropriately handle a cell that comes back filled with the labels you have put in. Probably should have some kind of init method of the cell that is called only once per new cell, and is ignored when the cell is recycled, then just edit the labels and what ever else as normal. This kind of functionality should be built into the cells custom class itself instead of inside the cellForRowAtIndexPath