- December 30, 2024
- Mins Read
UITableViewController with accordion effect (expand / collapse cells)
Simple and lightweight solution for making accordion effect in table view controller. Show detailed content on demand.
AccordionTableViewCell
and override setExpanded:animated:
.
import AEAccordion
final class ReadmeTableViewCell: AccordionTableViewCell {
static let reuseIdentifier = “ReadmeTableViewCell”
@IBOutlet weak var headerView: HeaderView!
@IBOutlet weak var detailView: DetailView!
// MARK: Override
override func setExpanded(_ expanded: Bool, animated: Bool) {
super.setExpanded(expanded, animated: animated)
if animated {
UIView.transition(with: detailView, duration: 0.3, animations: {
self.detailView.isHidden = !expanded
}, completion: nil)
} else {
detailView.isHidden = !expanded
}
}
}
AccordionTableViewController
and configure cell height based on expandedIndexPaths
.
import AEAccordion
final class ReadmeTableViewController: AccordionTableViewController {
override func viewDidLoad() {
super.viewDidLoad()
expandFirstCell()
}
func expandFirstCell() {
let firstCellIndexPath = IndexPath(row: 0, section: 0)
expandedIndexPaths.append(firstCellIndexPath)
}
// MARK: UITableViewDelegate
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return expandedIndexPaths.contains(indexPath) ? 200.0 : 50.0
}
}
For more details check out Sources and Example.
.Package(url: “https://github.com/tadija/AEAccordion.git”, majorVersion: 2)
github “tadija/AEAccordion”
pod ‘AEAccordion’