UITableViewCell selection challenge - ios

Question

I created a simple demo app for this problem, which is not vital but I am looking for an elegant solution. I have a grouped tableview with multiple sections, each allowing a single item selection. Here is the code:
class TableViewController: UITableViewController {
let sections = ["A", "B", "C", "D", "E", "F"]
let items = [
["one", "two", "three", "four"],
["one", "two", "three", "four"],
["one", "two", "three", "four"],
["one", "two", "three", "four"],
["one", "two", "three", "four"],
["one", "two", "three", "four"]
]
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return sections.count
}
override func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return sections[section]
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return items[section].count
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) // option 1
// let cell = UITableViewCell(style: .Default, reuseIdentifier: "Cell") // option 2
cell.textLabel?.text = items[indexPath.section][indexPath.row]
return cell
}
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
tableView.deselectRowAtIndexPath(indexPath, animated: true)
let cell = tableView.cellForRowAtIndexPath(indexPath)
let section = indexPath.section
for rowNumber in 0..<tableView.numberOfRowsInSection(section) {
let tempPath = NSIndexPath(forRow: rowNumber, inSection: section)
let tempCell = tableView.cellForRowAtIndexPath(tempPath)
tempCell?.accessoryType = .None
}
cell?.accessoryType = .Checkmark
}
}
The table is long which implies scrolling to see all items. Now, if I take option 1 (dequeueReusableCellWithIdentifier) and select a row in section 1, automatically a row in e.g. section 5 gets selected (which can be seen by scrolling). Obviously this is not intended. If I take option 2 then this does not happen, but the row gets deselected as soon as it disappears from the view after scrolling. Also not intended.
My solution so far has been to add a variable selectedCellIndices which is an array holding the selected indexPath.row for each section. That works, but is rather ugly.
Any suggestions for a neat solution?

Answer 1

The Issue:
The moment a row scrolls of the screen and a new row becomes visible swift, the cell of the row that scrolled off the screen is reused for the row that just became visible. Currently you are only setting checkmark on the cell. One thing to remember is that ROWs are the data and CELLs are the views for that data.
If you update the checkMark on the cell then that is only updating the view. And when the row scrolls off the screen that cell is recycled or reused.
The Solution:
Apply a MVC technique. When you update your cell by placing or removing the checkmark you are only updating the view. Next you also need to update the Model. By Model I mean the Data Model.
Try creating a Data class or a data model:
import Foundation
class ChecklistItem {
var text = ""
var checked = false
func toggleChecked() {
checked = !checked
}
}
Within your controller create an array that will hold data of the above declared class models data type like so:
var items: [ChecklistItem]
And within the didSelectRowAtIndex function you do the following:
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
if let cell = tableView.cellForRowAtIndexPath(indexPath) {
// get the object from the array that was tapped by using the index path of the row
let item = items[indexPath.row]
// Toggle the checkMark, this method was declared within the data model as it was responsible for manipulating or updating the data.
item.toggleChecked()
if item.checked {
cell.accessoryType = .Checkmark
} else {
cell.accessoryType = .None
}
}
tableView.deselectRowAtIndexPath(indexPath, animated: true)
}
The above is your data model. Now when you updated your cell, also update your data model by stating the checked variable for that object true or false. True means theres a check mark for that row/cell and false means no check mark. This way you can persist your check marks. Also you need to save these objects into the above declared items array.
Let me know if you need more info. Or if somethings confusing. I hope this helps.

Answer 2

Option 1:
Enable allowsMultipleSelection on your tableView.
in tableView:didSelectRowAtIndexPath:, check if you already have a selected cell in that section (a bit of filtering on tableView.indexPathsForSelectedRows) . If that's the case, deselect it.
This will use the standard iOS selection style (the coloured background), but you can change that in your custom table cell's setSelected: (to add/remove the accessory), and configuring the table cell's selectionStyle to None. Remember to call super in your setSelected, you still need to set the internal selected flag.
Option 2: do what you were suggesting with keeping the selection in a separate array, using it to configure the accessory when the a table view cell is dequeued.

Answer 3

Obviously, you should add cell.accessoryType = .None to cellForRowAtIndexPath, because cells are reused without changing their last appearance.