(Swift) Expand and Collapse tableview cell when tapped - ios

Question

Good Morning
I created a custom TableViewCell, which internally has a CollectionViewCell and a directional arrow. I was able to make the cell expand and collapse however I would like it when I expand one cell and I click on another one the previous collapse. Example: If cell is expanded and cell is tapped, I want cell to contract and cell to expand at the same time. So that only one cell can be in its expanded state in any given moment changing the targeting arrow.
Example:
If cellA is expanded and cellB is tapped, I want cellA to contract and cellB to expand at the same time. So that only one cell can be in its expanded state in any given moment changing the targetting arrow.
My code:
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
switch(selectedIndexPath)
{
case nil:
let cell = myTableView.cellForRow(at: indexPath) as! TableViewCell
cell.arrowImagem.image = UIImage(named:"content_arrow2")
selectedIndexPath = indexPath
default:
if selectedIndexPath! == indexPath
{
let cell = myTableView.cellForRow(at: indexPath) as! TableViewCell
cell.arrowImagem.image = UIImage(named:"content_arrow")
//cell.reloadInputViews()
selectedIndexPath = nil
}
}
self.myTableView.beginUpdates()
self.myTableView.reloadData()
//myTableView.reloadRows(at: [indexPath], with: .automatic)
self.myTableView.endUpdates()
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let index = indexPath
if selectedIndexPath != nil{
if(index == selectedIndexPath)
{
return 147
}
else{
return 67
}
}
else
{
return 67
}
}

Answer 1

You can do that but you need to do some coding. First of all detect when a row is selected (keep the Index Path of the selected row in a variable). When a row is selected you will add the index path of the new selected row and that of the previously selected (that you have in the variable) in an array that you pass to the tableView reloadRows from inside didSelectRowAt, this function will force redrawing of the two rows and the heightForRowAt function will be called to get the height of both rows, in heightForRowAt you will check the currently selected row (do you remember the variable I mentioned earlier?) and return the expanded height for that, while for the others you return the collapsed height. You should get the result you want. Hope that will help.

Answer 2

You can implement most of the functionality in the didSet handler:
var selectedIndexPath: IndexPath? {
didSet {
guard indexPath != oldValue else {
return
}
if let oldValue = oldValue {
let cell = myTableView.cellForRow(at: indexPath) as? TableViewCell
cell?.arrowImagem.image = UIImage(named:"content_arrow")
}
if let indexPath = indexPath {
let cell = myTableView.cellForRow(at: indexPath) as? TableViewCell
cell?.arrowImagem.image = UIImage(named:"content_arrow2")
}
let rowsToUpdate = [indexPath, oldValue].compactMap { $0 }
self.myTableView.beginUpdates()
// I don't think you actually need to reload rows here but keeping your code here...
self.myTableView.reloadRows(at: rowsToUpdate, with: .automatic)
self.myTableView.endUpdates()
}
}
and then in your didSelect:
if indexPath == selectedIndexPath {
selectedIndexPath = nil
} else {
selectedIndexPath = indexPath
}
(written without testing)