How to add UITableView inside expanded UICollectionView row?

Question

There are two basic functionalities I want to attach to my collection view:

1. The cells show expand and collapse behaviour on didSelectItem method.
2. Cell which gets expanded show a new tableView relevant to the row that was selected.

Presumptions :

1. Multiple expansions don't take place.
2. Upon clicking any unexpanded cell,that particular cell should expand and rest all should collapse.
3. The click of the cells in collection view and internal UITableView inside each cell has to be handled.
4. Each row of the UICollectionView can attain different height with respect to the size of the UITableView it will load upon click it.

I tried How to expand collectionview cell on didselect to show more info? , but it does not call cellForItemAtIndexPath, and so I am unable to add the new tableView to the cell, or http://www.4byte.cn/question/465532/how-to-expand-collectionview-cell-on-didselect-to-show-more-info.html while Animate UICollectionViewCell collapsing is still unanswered.

I have a custom cell for this collectionView.

Any help in this regard is appreciated. Thanks in advance.

Answer 1

Here is a sample, hope it helps to understand, how to implement.

class WSCustomCollectionViewCell: UICollectionViewCell, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var tableView: UITableView!

    var tableViewData: Array<String>?

    // MARK: UITableviewDataSource

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell = tableView.dequeueReusableCellWithIdentifier("wsTableViewCell") as UITableViewCell!
        var value = self.tableViewData![indexPath.row] as String
        cell.textLabel?.text = value
        return cell
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if self.tableViewData != nil {
            return self.tableViewData!.count
        }
        return 0
    }

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

    // MARK: Configure Cell

    func configureWithDictionary(value: Dictionary<String, AnyObject>) {
        var title = value["name"] as? String
        if title != nil {
            self.titleLabel.text = title
        }
        var items = value["items"] as? Array<String>
        if items != nil {
            self.tableViewData = items
            self.tableView.reloadData()
        }
    }
}

--

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    @IBOutlet weak var collectionView: UICollectionView!

    var collectionViewData: Array<Dictionary<String,AnyObject>>?

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        var value: Dictionary<String, AnyObject> = ["name":"Some title", "items":["item 1", "item 2"]]
        self.collectionViewData = [value]

        self.collectionView.reloadData()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // MARK: UICollectionViewDataSource

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if self.collectionViewData != nil {
            return collectionViewData!.count
        }
        return 0
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        var cell = collectionView.dequeueReusableCellWithReuseIdentifier("wsCell", forIndexPath: indexPath) as WSCustomCollectionViewCell
        let value = self.collectionViewData![indexPath.row] as Dictionary<String, AnyObject>?

        if value != nil {
            cell.configureWithDictionary(value!)
        }
        return cell
    }
}

Do not forget set dataSource and delegate in storyboard.

Result:

EDIT

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let value = self.collectionViewData![indexPath.row] as Dictionary<String, AnyObject>?

        // WARNING: very dirty solution, only for understanding!

        if value != nil {
            var isExpand = value!["expand"] as? String
            if isExpand != nil && isExpand == "1" {
                return CGSizeMake(280, 200)
            }

        }
        return CGSizeMake(280, 44)
    }

    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        let value = self.collectionViewData![indexPath.row] as Dictionary<String, AnyObject>?
        if value != nil {

            // WARNING: very dirty solution, only for understanding!

            var isExpand = value!["expand"] as? String
            if isExpand != nil && isExpand == "0" {
                var newValue: Dictionary<String, AnyObject> = ["name":"Some title", "items":["item 1", "item 2"], "expand":"1"]
                self.collectionViewData = [newValue]
                self.collectionView.reloadData()
            }
            else {
                var newValue: Dictionary<String, AnyObject> = ["name":"Some title", "items":["item 1", "item 2"], "expand":"0"]
                self.collectionViewData = [newValue]
                self.collectionView.reloadData()
            }
        }
    }

And update configureWithDictionary() method:

    func configureWithDictionary(value: Dictionary<String, AnyObject>) {
        var title = value["name"] as? String
        if title != nil {
            self.titleLabel.text = title
        }
        var items = value["items"] as? Array<String>
        var isExpand = value["expand"] as? String
        if items != nil && isExpand != nil && isExpand == "1" {
            self.tableViewData = items
            self.tableView.reloadData()
        }
        else {
            self.tableViewData = nil
            self.tableView.reloadData()
        }
    }