Adding a collection view inside a table view cell swift 3

Question

I am trying to display table view and once you select a row it shall expand to show a collection view grid of the products within that category. I've managed to get the table view cell expanding and displaying an image, by modifying the height constraint of the image (not the xib method, i tried, no success), following the tutorial below however I cannot seem to get it working if i insert a collection view.

http://codepany.com/blog/swift-3-expandable-table-view-cells/

This is what I am trying to achieve:

My code:

Custom Table view Cell Class

class ExpandableCell: UITableViewCell {

@IBOutlet weak var view: UIView!
@IBOutlet weak var label: UILabel!
@IBOutlet weak var img: UIImageView!
@IBOutlet weak var imgHeightConstraint: NSLayoutConstraint!
@IBOutlet weak var viewHeight: NSLayoutConstraint!

var isExpanded:Bool = false
{
    didSet
    {
        if !isExpanded {
            self.imgHeightConstraint.constant = 0.0

        } else {
            self.imgHeightConstraint.constant = 128.0
        }
    }
}

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code


}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state

}

}

View controller

class NewMenuVC: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!
//    @IBOutlet weak var tableViewCell: UITableViewCell!
//    @IBOutlet weak var collectionView: UICollectionView!
//    @IBOutlet weak var collectionViewCell: UICollectionViewCell!

    let imgs = ["0", "1", "2", "0", "1", "2", "0", "1", "2", "0", "1", "2", "0", "1", "2", "0", "1", "2", "0", "1", "2"]
    let categories = ["Hamburgers", "Saver Menu", "Sides", "Desserts", "Drinks", "Offers", "Specials", "Wraps", "Chicken", "Meals"]

    var expandedRows = Set<Int>()

    //@IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {

        super.viewDidLoad()

        self.tableView.delegate = self

        self.tableView.dataSource = self

        self.tableView.rowHeight = UITableViewAutomaticDimension

    }


    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return 10
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell:ExpandableCell = tableView.dequeueReusableCell(withIdentifier: "ExpandableCell") as! ExpandableCell

        cell.img.image = UIImage(named: imgs[indexPath.row])

        cell.isExpanded = self.expandedRows.contains(indexPath.row)

        cell.label.text = categories[indexPath.row]

        return cell

    }


    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {

        return 144.0

    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

        print(indexPath.row)

        guard let cell = tableView.cellForRow(at: indexPath) as? ExpandableCell

            else { return }



        switch cell.isExpanded

        {

        case true:

            self.expandedRows.remove(indexPath.row)

        case false:

            self.expandedRows.insert(indexPath.row)

        }

        cell.isExpanded = !cell.isExpanded


        self.tableView.beginUpdates()

        self.tableView.endUpdates()

    }

Answer 1

Existing Approach: I would suggest try using a section header(UITableViewHeaderFooterView). Once you tap on the section header you can set the number of rows to 1. Here you have to make sure the rowHeight = height of number of items in collection.

This would include too much of work.

Simplify the Approach. Use the collection view directly , with section header and layout configured for veritical Scroll.