Swift - Data not displayed properly when using tableView.dequeueReusableCell - ios

Question

When certain buttons are pressed in the app, their name, start and end time that they were pressed are displayed in a UITableView.
This worked fine when using a custom UITableViewCell but after setting up tableView.dequeueReusableCell instead, the UITableView is showing the first cell as a white empty cell when it is meant to show data. If more data is added, the first input which wasn't visible is now shown but the last input is missing/hidden.
I have found similar questions and implemented what seemed the main culprit but it didn't work for me.
timelineTableView.contentInsetAdjustmentBehavior = .never
timelineScrollViewContainer.contentInsetAdjustmentBehavior = .never
timelineTableView.contentOffset = .zero
I also tried to change the section height but to no avail either.
Worth mentioning that the data is not displaying properly in the UITableView but is still saving properly in the plist.
The UITableView is loaded during the ViewDidLoad as mentioned in other questions as it seems the issue of the error for some.
Doeanyonene have another solution? thanks for the help
cellForRowAt method
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if tableView == timelineTableView {
//let cell = TimelineCell(frame: CGRect(x: 0, y: 0, width: 100, height: 40), title: "test", startTime: "test", endTime: "test", rawStart: "") // Used previously before using dequeueReusableCell
var cell: TimelineCell = tableView.dequeueReusableCell(withIdentifier: timelineCellId, for: indexPath) as! TimelineCell
if let marker = markUpPlist.arrayObjects.filter({$0.UUIDpic == endClipSelectedMarkerUUID}).first {
cell = TimelineCell(frame: CGRect(x: 0, y: 0, width: 100, height: 40), title: "test", startTime: "test", endTime: "test", rawStart: "")
cell.backgroundColor = marker.colour
cell.cellLabelTitle.text = marker.name
cell.cellUUID.text = marker.UUIDpic
if let timeline = chronData.rows.filter({$0.rowName == marker.name}).first {
if let start = timeline.clips.last?.str {
cell.cellStartTime.text = chronTimeEdited(time: Double(start))
cell.cellStartRaw.text = String(start)
}
if let end = timeline.clips.last?.end {
cell.cellEndTime.text = chronTimeEdited(time: Double(end))
}
}
}
return cell
}
TimelineCell.swift
class TimelineCell : UITableViewCell {
var cellLabelTitle: UILabel!
var cellStartTime: UILabel!
var cellEndTime: UILabel!
var cellStartRaw: UILabel!
var cellUUID: UILabel!
init(frame: CGRect, title: String , startTime: String, endTime: String, rawStart: String) {
super.init(style: UITableViewCell.CellStyle.default, reuseIdentifier: "timelineCellId")
backgroundColor = UIColor(red: 29/255.0, green: 30/255.0, blue: 33/255.0, alpha: 1.0)
cellLabelTitle = UILabel(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
cellLabelTitle.translatesAutoresizingMaskIntoConstraints = false
cellLabelTitle.textColor = UIColor.black
addSubview(cellLabelTitle)
cellLabelTitle.widthAnchor.constraint(equalToConstant: 80).isActive = true
cellLabelTitle.heightAnchor.constraint(equalToConstant: 30).isActive = true
cellLabelTitle.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0).isActive = true
cellLabelTitle.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 10).isActive = true
cellStartTime = UILabel(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
cellStartTime.translatesAutoresizingMaskIntoConstraints = false
cellStartTime.textColor = UIColor.black
addSubview(cellStartTime)
cellStartTime.widthAnchor.constraint(equalToConstant: 80).isActive = true
cellStartTime.heightAnchor.constraint(equalToConstant: 30).isActive = true
cellStartTime.centerYAnchor.constraint(equalTo: centerYAnchor, constant: 0).isActive = true
cellStartTime.leftAnchor.constraint(equalTo: cellLabelTitle.rightAnchor, constant: 10).isActive = true
cellEndTime = UILabel(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
cellEndTime.translatesAutoresizingMaskIntoConstraints = false
cellEndTime.textColor = UIColor.black
addSubview(cellEndTime)
cellEndTime.widthAnchor.constraint(equalToConstant: 80).isActive = true
cellEndTime.heightAnchor.constraint(equalToConstant: 30).isActive = true
cellEndTime.centerYAnchor.constraint(equalTo: centerYAnchor, constant: 0).isActive = true
cellEndTime.leftAnchor.constraint(equalTo: cellStartTime.rightAnchor, constant: 10).isActive = true
cellStartRaw = UILabel(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
cellUUID = UILabel(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
addSubview(cellStartRaw)
addSubview(cellUUID)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
}
}
Create tableview
timelineTableView.frame = CGRect(x: 0, y: 0, width: sideView.frame.width, height: sideView.frame.size.height)
timelineTableView.delegate = self
timelineTableView.dataSource = self
timelineTableView.register(TimelineCell.self, forCellReuseIdentifier: timelineCellId)
timelineTableView.translatesAutoresizingMaskIntoConstraints = false
timelineTableView.separatorStyle = .none
timelineTableView.backgroundColor = Style.BackgroundColor
timelineTableView.contentInsetAdjustmentBehavior = .never
timelineScrollViewContainer.contentInsetAdjustmentBehavior = .never
timelineScrollViewContainer.addSubview(timelineTableView)
timelineTableView.contentOffset = .zero
So recapitulating, using the line below shows the data properly but the cells aren't reused properly.
let cell = TimelineCell(frame: CGRect(x: 0, y: 0, width: 100, height: 40), title: "test", startTime: "test", endTime: "test", rawStart: "")
Using the code below show a blank cell first and data not displayed properly but the cells are reused properly.
var cell: TimelineCell = tableView.dequeueReusableCell(withIdentifier: timelineCellId, for: indexPath) as! TimelineCell

Answer 1

Change cellForRowAt to look like this. I'm guessing as to how your chronData structure relates to the source table, so it's mostly using your original logic.
You need to blank out fields that should be empty, as otherwise they will retain state as you scroll.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var cell: TimelineCell = tableView.dequeueReusableCell(withIdentifier: timelineCellId, for: indexPath) as! TimelineCell
let marker = markUpPListFiltered
cell.backgroundColor = marker.colour
cell.cellLabelTitle.text = marker.name
cell.cellUUID.text = marker.UUIDpic
if let timeline = chronData.rows.filter({$0.rowName == marker.name}).first {
if let start = timeline.clips.last?.str {
cell.cellStartTime.text = chronTimeEdited(time: Double(start))
cell.cellStartRaw.text = String(start)
}
else
{
cell.cellStartTime.text = ""
cell.cellStartRaw.text = ""
}
if let end = timeline.clips.last?.end {
cell.cellEndTime.text = chronTimeEdited(time: Double(end))
}
else
{
cell.cellEndTime.text = ""
}
}
return cell
}
It assumes there is an array for your filtered sorted data called markupPListFiltered. Prepare this in viewDidLoad or somewhere else. You haven't shown the other datasource methods so I'll assume you can change these as needed, e.g.
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
{
return markupPListFiltered.count
}
TimelineCell needs the c'tor to have the data removed. You should consider using a storyboard to design your cells and link up the widgets with the outlets (see any of the hundreds of tutorials on table views, I'd recommend Ray Wenderlich as a good starter source).