Expand and contract tableview cell when tapped, in swift - swift

Question

I'm trying to expand a tableview cell when tapped. Then, when it is tapped again, I want it to go back to its original state.
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.
My current code:
class MasterViewController: UITableViewController {
var isCellTapped = false
var currentRow = -1
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
selectedRowIndex = indexPath
tableView.beginUpdates()
tableView.endUpdates()
}
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
if indexPath.row == selectedRowIndex.row {
if isCellTapped == false {
isCellTapped = true
return 140
} else if isCellTapped == true {
isCellTapped = false
return 70
}
}
return 70
}
Current code works well when:
You tap a row (it expands)
You tap it again (it contracts)
It fails when:
You tap a row (it expands)
You tap another row (it contracts, but the other row does not expand)
How can I solve this?

Answer 1

You need to take in account that you need to update your selected row when another is tapped, see the following code :
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
if indexPath.row == selectedRowIndex {
return 140
}
return 44
}
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
if selectedRowIndex != indexPath.row {
// paint the last cell tapped to white again
self.tableView.cellForRowAtIndexPath(NSIndexPath(forRow: self.selectedRowIndex, inSection: 0))?.backgroundColor = UIColor.whiteColor()
// save the selected index
self.selectedRowIndex = indexPath.row
// paint the selected cell to gray
self.tableView.cellForRowAtIndexPath(indexPath)?.backgroundColor = UIColor.grayColor()
// update the height for all the cells
self.tableView.beginUpdates()
self.tableView.endUpdates()
}
}
EDIT:
To handle that the cell where is selected and is tapped again return to its original state you need to check some conditions like the following:
var thereIsCellTapped = false
var selectedRowIndex = -1
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
if indexPath.row == selectedRowIndex && thereIsCellTapped {
return 140
}
return 44
}
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
self.tableView.cellForRowAtIndexPath(indexPath)?.backgroundColor = UIColor.grayColor()
// avoid paint the cell is the index is outside the bounds
if self.selectedRowIndex != -1 {
self.tableView.cellForRowAtIndexPath(NSIndexPath(forRow: self.selectedRowIndex, inSection: 0))?.backgroundColor = UIColor.whiteColor()
}
if selectedRowIndex != indexPath.row {
self.thereIsCellTapped = true
self.selectedRowIndex = indexPath.row
}
else {
// there is no cell selected anymore
self.thereIsCellTapped = false
self.selectedRowIndex = -1
}
self.tableView.beginUpdates()
self.tableView.endUpdates()
}
With the above modifications in yourdidSelectRowAtIndexPath and heightForRowAtIndexPath functions you can see when a cell is tapped its background color it will be changed to gray when it's height grow and when another cell is tapped the cell is painted to white and the tapped to gray and again and again allowing only tap one cell at time.
I though you can benefit and learn how to do a Accordion Menu in this repo I have created and I plan to update very soon to handle better results, it's handle using a UITableView just like you want.
Any doubt in the repository you can post it here.
I hope this help you.

Answer 2

A simple approach for expanding only one cell at a time:
Swift 3
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
var selectedRowIndex = -1
#IBOutlet weak var tableView: UITableView!
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if indexPath.row == selectedRowIndex {
return 90 //Expanded
}
return 40 //Not expanded
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if selectedRowIndex == indexPath.row {
selectedRowIndex = -1
} else {
selectedRowIndex = indexPath.row
}
tableView.reloadRows(at: [indexPath], with: .automatic)
}
}
This code will expand the clicked cell and close previously open cell with animation.

Answer 3

UITableViewCell:
import UIKit
protocol HierarchyTableViewCellDelegate {
func didTapOnMoreButton(cell:HierarchyTableViewCell)
}
class HierarchyTableViewCell: UITableViewCell {
#IBOutlet weak var viewBtn: UIButton!
//MARK:- CONSTANT(S)
var delegate:HierarchyTableViewCellDelegate!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
#IBAction func actionViewButtonTapped(_ sender: Any) {
delegate.didTapOnMoreButton(cell: self)
}
}
UIViewController:
import UIKit
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
#IBOutlet weak var tableViewObj: UITableView!
var HierarchyListArr = NSArray()
var selectedIndex:Int?
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return HierarchyListArr.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableViewObj.dequeueReusableCell(withIdentifier: "HierarchyTableViewCell", for: indexPath) as! HierarchyTableViewCell
cell.delegate = self
if let index = selectedIndex,indexPath.row == index{
cell.viewBtn.isSelected = true
}else{
cell.viewBtn.isSelected = false
}
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if let index = selectedIndex,indexPath.row == index{
return 190
}
return 80
}
}
extension ViewController: HierarchyTableViewCellDelegate{
func didTapOnMoreButton(cell: HierarchyTableViewCell) {
guard let index = tableViewObj.indexPath(for: cell)else{return}
if selectedIndex == index.row{
selectedIndex = -1
}else{
selectedIndex = index.row
}
tableViewObj.reloadRows(at: [index], with: .fade)
}
}