Jessica thompson
Jessica thompson

Reputation: 407

How to make an expandable tableview to show the rest of the details iOS?

I want to make use of an Expandable table view to show the rest of the table cell details when the user taps on the cell. Currently my requirement looks like thisThis is the wireframe where i wish to use the expandable list

The above cell which is shown is in expanded state where as the below cell is in unexpanded state.

Currently i am planning to make use of the Bool to check whether the cell is expanded or not.

Please help me with the case in Swift3.

Currently i am planing to use the code: This is the custom cell class:

import UIKit

protocol OptionButtonsDelegate{
    func closeFriendsTapped(at index:IndexPath)
}

class ExpandingTableViewCellContent {
    var title: String?
    var subtitle: String?
    var expanded: Bool

    init(title: String, subtitle: String) {
        self.title = title
        self.subtitle = subtitle
        self.expanded = false
    }
}

class ExpandingTableViewCell: UITableViewCell {

    @IBOutlet var titleLabel: UILabel!
    @IBOutlet var subtitleLabel: UILabel!
    var delegate:OptionButtonsDelegate!
    var indexPath:IndexPath!

    @IBOutlet weak var buttonClick: UIButton!
    override func awakeFromNib() {
        super.awakeFromNib()
    }

    @IBAction func buttonAction(_ sender: UIButton) {


        self.delegate?.closeFriendsTapped(at: indexPath)
    }
    func set(content: ExpandingTableViewCellContent) {
        self.titleLabel.text = content.title
        self.subtitleLabel.text = content.expanded ? content.subtitle : ""
        if content.expanded {
            self.buttonClick.isHidden = false
            self.backgroundColor = UIColor.orange
        }
        else
        {
            self.buttonClick.isHidden = true
            self.backgroundColor = UIColor.red
        }

    }
}

The view controller class code is:

    import UIKit

class ViewController: UIViewController,OptionButtonsDelegate {

    @IBOutlet var tableView: UITableView!
    var datasource = [ExpandingTableViewCellContent]()

    @IBOutlet weak var buttonClick: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.dataSource = self
        tableView.delegate = self
        tableView.tableFooterView = UIView() // Removes empty cell separators
        tableView.estimatedRowHeight = 60
        tableView.rowHeight = UITableViewAutomaticDimension

        datasource = [ExpandingTableViewCellContent(title: "Vestibulum id ligula porta felis euismod semper.",
                                                    subtitle: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna."),
                      ExpandingTableViewCellContent(title: "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis .",
                                                    subtitle: "Etiam porta sem malesuada magna mollis euismod. Nullam quis risus urna mollis ornare vel eu leo."),
                      ExpandingTableViewCellContent(title: "Aenean lacinia bibendum nulla sed consectetur.",
                                                    subtitle: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus.")]
    }
}

extension ViewController : UITableViewDataSource, UITableViewDelegate {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return datasource.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView .dequeueReusableCell(withIdentifier: String(describing: ExpandingTableViewCell.self), for: indexPath) as! ExpandingTableViewCell
        cell.set(content: datasource[indexPath.row])
        cell.delegate = self 
        cell.indexPath = indexPath
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let content = datasource[indexPath.row]
        content.expanded = !content.expanded
        tableView.reloadRows(at: [indexPath], with: .automatic)
    }
    func closeFriendsTapped(at index: IndexPath) {
        print("button tapped at index:\(index.row)")
    }

}

Help me with the same:

Upvotes: 1

Views: 214

Answers (1)

Reinier Melian
Reinier Melian

Reputation: 20804

Using your base implementation I add two statics constants for expanded and collapsed height in ExpandingTableViewCell

static let collapsedHeigth : CGFloat = 80
static let expandedHeigth : CGFloat = 210

Also added the heightForRowAtIndexPath method in your ViewController implementation

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
       let currentExpandingContext = datasource[indexPath.row]
        if(currentExpandingContext.expanded)
        {
            return ExpandingTableViewCell.expandedHeigth
        }else
        {
            return ExpandingTableViewCell.collapsedHeigth//fixed heigth
        }
    }

All code in the repository

Hope this helps

Upvotes: 1

Related Questions