Swift - tableViewCell issue when scrolling - ios

Question

I'm creating a chat app using swift. On my storyboard, I have one View Controller that is responsible for showing the messages. I have 3 swift files :
ChatingViewController : Class associated with the View Controller on the storyboard
CustomChatingTableViewController
CellChatingTableViewCell
Each message is displayed in a cell. I create the tableView programmatically.
- ChatingViewController
import UIKit
class ChatingViewController: UIViewController {
var messageController = [[String:String]]()
var tableViewController = CustomChatingTableViewController()
override func viewDidLoad() {
let sizeTableView = CGSize(width: view.frame.size.width - 2 * margin, height: view.frame.size.height - sizeTextField.height - 2 * margin - self.navigationController!.navigationBar.frame.size.height)
let originTableView = CGPoint(x: margin, y: 2 * margin + self.navigationController!.navigationBar.frame.size.height)
tableViewController.tableView.frame = CGRect(origin: originTableView, size: sizeTableView)
tableViewController.tableView.registerClass(CellChatingTableViewCell.self, forCellReuseIdentifier: "Cell")
tableViewController.data = messageController
tableViewController.tableView.separatorStyle = .None
view.addSubview(tableViewController.tableView)
}
- CustomChatingTableViewController
import UIKit
class CustomChatingTableViewController: UITableViewController {
var data:[[String:String]]!
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return data.count
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell = tableView.dequeueReusableCellWithIdentifier("Cell") as CellChatingTableViewCell
cell.setCell(data[indexPath.row]["name"] as String!, date: data[indexPath.row]["date"] as String!, message: data[indexPath.row]["message"] as String!)
return cell
}
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 150
}
}
** -CellChatingTableViewCell**
import UIKit
class CellChatingTableViewCell: UITableViewCell {
var date = UILabel()
var message = UILabel()
func setCell(name:String,date:String,message:String){
let imageContainerMessage = UIImage(named: "orange.png")!.stretchableImageWithLeftCapWidth(24, topCapHeight: 15)
self.date.font = UIFont(name: "Arial", size: 10)
self.date.text = date
self.date.numberOfLines = 0
self.date.lineBreakMode = NSLineBreakMode.ByWordWrapping
let sizeDateLabelMax = CGSizeMake(self.frame.size.width, 9999)
let expectedSizeDate = self.date.sizeThatFits(sizeDateLabelMax)
self.date.frame = CGRect(origin: CGPoint.zeroPoint, size: expectedSizeDate)
self.message.font = UIFont(name: "Arial", size: 15)
self.message.text = message
self.message.numberOfLines = 0
self.message.lineBreakMode = NSLineBreakMode.ByWordWrapping
let sizeMessageLabelMax = CGSizeMake(self.frame.size.width, 9999)
let expectedSizeMessage = self.message.sizeThatFits(sizeMessageLabelMax)
self.message.frame = CGRect(origin: CGPoint(x: 15, y: 10), size: expectedSizeMessage)
var imageContainer = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: expectedSizeDate.height + 5), size:
CGSizeMake(expectedSizeMessage.width + 25, expectedSizeMessage.height + 25)))
imageContainer.image = imageContainerMessage
self.addSubview(self.date)
self.addSubview(imageContainer)
imageContainer.addSubview(self.message)
}
}
When I load the ViewController, everything does work fine but when I scroll the tableView, it turns horrible:
Before scrolling :
After scrolling :
Any suggestion?
Thanks in advance

Answer 1

In your cellForRowAtIndexPath, you are reusing cells. But then in your custom UITableViewCell, you are adding (self.addSubView) self.date and self.message multiple times (yikes), and adding new instances of imageContainer.
You should either clear the cells before re-adding them, or invalidate them with new data but do not do self.addSubView again.