Custom cells for expandable UiTableView - ios

Question

I have a data set that has an inner array and I have to show that Inner array in Expand collapse fashion.
For that I have designed 2 nib files. One for the sections, and other for the cell in sections.
I have attached UitableView and the delegated methods. I am successful to show the Header view, I am registering the header view like this.
let nib = UINib.init(nibName: "headerItemSavedListCell", bundle: nil)
self.lvSavedList.register(nib, forCellReuseIdentifier: "headerItemSavedListCell")
and for cell I am doing in the following method
if(indexPath.row == 0){
let header = Bundle.main.loadNibNamed("headerItemSavedListCell", owner: self, options: nil)?.first as! headerItemSavedListCell
return header
}else{
let cell = Bundle.main.loadNibNamed("ItemSavedListCell", owner: self, options: nil)?.first as! ItemSavedListCell
return cell
}
But its not working.
**So my questions is: **
How to load the inner cell view ?
How to expand collapse cell view that lies inside the Sections?
Please help if you have any tutorial regarding expandable Uitableview

Answer 1

the class i am using here are connected to xibs
make xib of view and bind below class
so first you have to make headerview like below
protocol HeaderDelegate:class{
func didSelectHeader(Header:HeaderFooter,at index:Int)
}
class HeaderFooter: UITableViewHeaderFooterView {
#IBOutlet weak var lblTitle: UILabel!
weak var delegate:HeaderDelegate?
var Expand = false
override func awakeFromNib() {
let tap = UITapGestureRecognizer.init(target: self, action: #selector(didSelect(_:)))
self.addGestureRecognizer(tap)
self.isUserInteractionEnabled = true
}
#objc func didSelect(_ tap:UITapGestureRecognizer)
{
delegate?.didSelectHeader(Header: self, at: self.tag)
}
override func prepareForReuse() {
Expand = false
}
}
above i added tap gesture to detect touch on headerViews
next make cell like below
class ExpandableCell: UITableViewCell {
var isExpanded = false
override func awakeFromNib() {
super.awakeFromNib()
isExpanded = false
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
in your view controller
tblView.register(UINib.init(nibName: "HeaderFooter", bundle: nil), forHeaderFooterViewReuseIdentifier: "HeaderFooter")
in tablview dataSorce and Delegate Method
func numberOfSections(in tableView: UITableView) -> Int {
return numberofsections
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return numberofrows
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "ExpandableCell") as? ExpandableCell else {
return UITableViewCell()
}
//configure cell here
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
guard let header = tableView.headerView(forSection: indexPath.section) as? HeaderFooter
else {return 0}
if header.Expand
{
return UITableViewAutomaticDimension
}
else
{
return 0
}
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, estimatedHeightForHeaderInSection section: Int) -> CGFloat {
return 50
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
guard let headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "HeaderFooter") as? HeaderFooter else {return nil}
//configure header View here
headerView.tag = section
return headerView
}
//MARK:-headerDelegate
func didSelectHeader(Header: HeaderFooter, at index: Int) {
Header.Expand = !Header.Expand
//comment below part if you dont want to collapse other rows when other section opened
for i in 0..<tblView.numberOfSections
{
if i != index
{
guard let header = tblView.headerView(forSection: i) as? HeaderFooter else {return}
header.Expand = false
for j in 0..<tblView.numberOfRows(inSection: i)
{
tblView.reloadRows(at: [IndexPath.init(row: j, section: i)], with: .automatic)
}
}
else
{
for j in 0..<tblView.numberOfRows(inSection: i)
{
tblView.reloadRows(at: [IndexPath.init(row: j, section: i)], with: .automatic)
}
}
}
}