Simple and lightweight UITableViewController with accordion effect (expand / collapse cells)
Clone or download
tadija Merge branch 'develop'
# Conflicts:
#	README.md
Latest commit 5d153fa Sep 18, 2018

README.md

Swift 4.2 Platforms iOS CocoaPods Carthage Swift Package Manager License MIT

AEAccordion

UITableViewController with accordion effect (expand / collapse cells)

Simple and lightweight solution for making accordion effect in table view controller. Show detailed content on demand.

AEAccordion

Index

Features

  • Create accordion effect in table view controller with less effort
  • Animate expansion / collapsing of cells as you want (optional)
  • Automatic scroll on cell expansion to make entire cell visible (optional)

Usage

  • Subclass 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
        }
    }
    
}
  • Subclass 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.

Installation

License

This code is released under the MIT license. See LICENSE for details.