Expand tableviewcell when selected and compact when deselected Swift 3 - ios

Question

So I have a mainTableView of type ExpyTableView (https://github.com/okhanokbay/ExpyTableView). All fine , i managed to implement it and make it work but as it can be seen in the gif below i need to make +1 extra action for DidSelect and DidDeselect.
The thing is i want when selected to highlight with the green color and immediately expand the other rows , and when clicked on it right after to deselect and make the row back to normal . So normally this need to happen only after 2 taps on the screen... instead i make 4 as seen in the gif.
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
//MARK : Print
print("Selected Section \(indexPath.section), Row : \(indexPath.row)")
///////////////
if let cell = tableView.cellForRow(at: indexPath) {
if (indexPath.section == 1) || (indexPath.section == 2) || (indexPath.section == 3) {
cell.layer.borderWidth = 2.0
cell.layer.borderColor = Theme.defaultColor().cgColor
cell.layer.shadowOffset = CGSize.init(width: 0.5, height: 0.5)
}
}
}
func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) {
tableView.deselectRow(at: indexPath, animated: false)
cell.layer.borderWidth = 0.1
cell.layer.borderColor = UIColor.lightGray.cgColor
}
}
Where did I go wrong?

Answer 1

Basically you listen to table changes for didDeselectRow which means following:
The code is executed once the table view cell is deselected. So you can forget about that code unless you really need it. However what you did is that you selects the row twice. Once for expansion, secondly to collapse.
What you need to do is to remember the index of selected cell and then deselect it while id didSelectRowAt
So declare a property fileprivate var currentlySelectedCellIndexPath: IndexPath? and then in didSelectRowAt use following.
var currentlySelectedCellIndexPath: IndexPath?
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if let currentlySelectedCellIndexPath = currentlySelectedCellIndexPath {
// unselect the selected one
makeCellUnSelected(in: tableView, on: currentlySelectedCellIndexPath)
guard currentlySelectedCellIndexPath != indexPath else {
tableView.deselectRow(at: currentlySelectedCellIndexPath , animated: true)
self.currentlySelectedCellIndexPath = nil
return
}
}
// Highlight the proper cell
makeCellSelected(in: tableView, on: indexPath)
currentlySelectedCellIndexPath = indexPath
}
func makeCellSelected(in tableView: UITableView, on indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) {
if (indexPath.section == 1) || (indexPath.section == 2) || (indexPath.section == 3) {
cell.layer.borderWidth = 2.0
cell.layer.borderColor = Theme.defaultColor().cgColor
cell.layer.shadowOffset = CGSize.init(width: 0.5, height: 0.5)
}
}
}
func makeCellUnSelected(in tableView: UITableView, on indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) {
cell.layer.borderWidth = 0.1
cell.layer.borderColor = UIColor.lightGray.cgColor
}
}
To explain what it does:
The functions makeCellselected & makeCellUnselected just apply the style changes to highlight / unhighlight the cell as you did previously.
in the function func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) just check for currently visible and selected cell. If it is the same cell, then collapse it in guard and return, since you require only to expand / collapse. If it is not the same cell, then just discard the selection by calling makeCellUnselected and select the new one. This should solve your problem so far. If you have any other questions, just let me know.

Answer 2

What I would do is to have a property in your model isExpanded that will store if the cell needs to be expanded. That way you can use it in heightForRowAtIndexPath where you will get the item and read the isExpanded property.