Expanding tableview sections on clicking each section - ios

Question

I have a tableview which has 2 sections and some cells(which can be dynamic)below each section showing associated data.
This is the code I have written to show the data...
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if section == 0 {
return recentUsers?.count
} else {
return groupNameArray?.count
}
}
func numberOfSections(in tableView: UITableView) -> Int {
return 2
}
func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
if section == 0 {
return " CHAT LIST"
} else {
return " GROUPS"
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! RecentMessageCell
cell.tag = indexPath.row
if indexPath.section == 0 {
if let user = recentChatUsers?[indexPath.row] {
cell.idLabel?.text = user.id
}
} else {
if groupNameArray.isEmpty == false {
let grpArr = groupNameArray[indexPath.row]
cell.userNameLabel?.text = grpArr.grpname
}
}
return cell
}
Now what I want to achieve is if I click on the first section, it should expand and show the cells it contains and the same should happen with the second cell also. Clicking on each of those sections again should hide the cells that were expanded.
I did search the internet for solutions. But though there were resources available, I couldn't find much help for my problem...

Answer 1

Add an array to keep track of section expend/collapse
let sectionStats = [Bool](repeating: true, count: 2)
Add a, IBAction to track section tap, update value of sectionStats for the corresponding section and reload section
and update your numberOfRowsInSection as show below
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
guard sectionStats[section] else {
return 0
}
if section == 0 {
return 1
} else {
return list.count
}
}
Tappable Header:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return headerView(section: section, title: section == 0 ? "CHAT LIST" : "GROUPS")
}
private func headerView(section: Int, title: String) -> UIView {
let button = UIButton(frame: CGRect.zero)
button.tag = section
button.setTitle(title, for: .normal)
button.setTitleColor(UIColor.red, for: .normal)
button.addTarget(self, action: #selector(sectionHeaderTapped), for: .touchUpInside)
return button
}
#objc private func sectionHeaderTapped(sender: UIButton) {
let section = sender.tag
sectionStats[section] = !sectionStats[section]
tableView.beginUpdates()
tableView.reloadSections([section], with: .automatic)
tableView.endUpdates()
}
Good tutorial on How to build a Table View with Collapsible Sections:
https://medium.com/ios-os-x-development/ios-how-to-build-a-table-view-with-collapsible-sections-96badf3387d0

Answer 2

This kind of feature requires a bit more code and I cannot write the whole code here but I can explain you the concepts that will be used to achieve this and will attach a few good tutorials which I used to ultimately create a feature like this
First you need to create a custom HeaderView for your sections
Next you need a UITapGestureRecognizer on your section and need to write your login inside the function provided in action part of UITapGestureRecognizer's constructor
You need to create a separate Protocol inside your HeaderView file and your ViewController that contains your TableView will adopt to that protocol and will handle whether to expand or collapse your rows
Also, you will need to create a separate Struct instance for each section which will contain a boolean variable that will indicate whether that section is expanded or collapsed
That is the basic concept that will be needed while creating Expandable List in iOS.
Below I have attached links to some of the tutorials :
Tutorial 1
Tutorial 2
Tutorial 3
Tutorial 4