Hi Ash! I have some doubts:

I would like to put different images in every cell and depending on which one the user selects (and knowing through the code which one was selected) I would provide and work with different numbers. Where would be the ideal part to do so and how? I thought of adding a button inside every Collection View Cell, but I don't know if that would be better or how I would manage every different replicated button.

Also, I would only like to have 4 rows, but I'd like to have specific and different numbers of cells for each one of the rows. How can I achieve that?

Thank you.

Thanks for your article firstly!

I'm using Firebase, but I can't figure out how to update collectionView, because the reference is just in the cell where I have the function with delegate etc.

Basically I'm fetching photos from Firebase on viewDidLoad and then user can add photo which means I need to update collectionView.

Do you know how to manage it please?

Thanks!
Vlasti

Minor correction. If your collection view has contentInsets for example of UIEdgeInsets(top: 0, left: 24, bottom: 0, right: 24), the contentOffset.x will be -24 initially, so if you fall back to 0 when there's no stored offset that causes it to scroll over inappropriately.

Currently:
tableViewCell.collectionViewOffset = storedOffsets[indexPath.row] ?? 0

This is the fix (but requires the collectionView not be private):
tableViewCell.collectionViewOffset = storedOffsets[indexPath.row] ?? -tableViewCell.collectionView.contentInset.left

I was wondering how you would do this implementation without a TableviewController, but instead with a ViewController, with a tableview inside? I feel like it is a bit limiting to only be able to use this with UITableViewController, and you should be able to have the flexibility add a tableview to a View Controller. I tried this though, and I'm not sure how to make the solution work since your extension is for the UITableviewController. I wasn't sure how this would work, any suggestions?

Hello!

The code works flawlessly in iOS13, but in the twelfth edition it crashes with the following message: 'NSInternalInconsistencyException', reason: 'UICollectionView received layout attributes for a cell with an index path that does not exist: <NSIndexPath: 0x87783bada8e26090> {length = 2, path = 0 - 0}'

Has anyone stumbled upon this problem?

Kindest regards,

return self.itemMomentNotes[collectionView.tag].count << always nill

how to fix this

How can I use this with remote json parsing ?

Thank you

I am trying to set a height and weight, but nothing is changing. How can i fix that?

Thanks. This is awesome.

Can you please help me figure out what is the best way to set the section headers in this case?

One way I am thinking is to set the multiple sections with each section having only one row. Or there any other best ways?

When whipping around a collection view with many items and scrolling down the table view cell reuses the collection view's scroll speed.

Hi @ashfurrow,

Thanks for the tutorial, as always it's a great read 👍
I've implemented in a similar fashion in one my (Swift) projects where each UITableViewCell contains a UICollectionView and each collectionView then has UICollectionViewCell's. And my collectionView cell is again customized in a Xib.

Now when I tried to implement accessibility on this, this is going through some weird behavior
What I did so far -
(1) Since each UITableViewCell contains UICollectionView, so I set tableview cell's accessibility to false.
e.g. dummyTableViewCell.isAccessibilityElement = false
(2) Then I override UIAccessibilityContainer methods on my UICollectionView class.
e.g. override func accessibilityElementCount() -> Int { return subViews.count }
and so on

While this reads through every element of collectionView inside tableView cell, but then VO stops after 4th or 5th row and does not scroll past anymore. I did try again w/ implementing UIScrollView delegate methods, but nothing is working out so far.

I'm not sure what I'm missing here. Any pointers would certainly help. Thanks Ash!

Was wondering about doing the opposite of this and having a tableview nested inside a collection view cell. would it just be replacing the tableview delegates with the collection view and making the tableView delegates the extension of the class ?

Hi,

I want to let you know, whenever I select on collection view means call didSelect method of collection view I always get collection view tag 0(zero). example [0,1], [0,3], [0,7]....

just for understanding, whenever I. move to next now I don't get row value but I get only 0(zero), but when I move in column wise I get correct value it may 1,2 ,3.... so on.

please me it correct

Thanks and regards
Mohit Tomer
iOS developer, React native & js developer.

Hi,
I'm very new to programming and swift.
At the moment I work my way through all the tutorials out there.
Your collectionview in a tabelviewCell is really what I'm looking for.
I'd like to creat an audiobookplayer where I will display the Authors in the header and the audiobooks in the collectionview below.
The authors are displayed correctly, I also get one image of an audiobook, but I get the same image for all the authors und just one, instead of all the books from the authors. Hopefully you can help me.

Thanks a lot.

This is the Code I have for my collecionView:

extension MainController: UICollectionViewDelegate, UICollectionViewDataSource {

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return collection[section].count
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("ArtworkCell", forIndexPath: indexPath) as! AlbumCoverCell

        let rowItem = collection[indexPath.row].representativeItem
        let artwork = rowItem!.valueForProperty(MPMediaItemPropertyArtwork) as! MPMediaItemArtwork
        albumImage = artwork.imageWithSize(cell.albumCover.bounds.size)

        cell.albumCover.image = albumImage

        return cell
    }

    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        print("Collection view at row \(collectionView.tag) selected index path \(indexPath)")
    }

The error appears whenever i want to open a view which is inside container view

Hi In this scenario I want to use table indexPath.section in CollectionView cell. Is it Possible?

in my current implementation I wanted to show only one cell on the screen it seems like i am able to see one cell with another cell half way through. How can i get rid off this stuff?

How to deal with dynamic collectionview height ?

fatal error: unexpectedly found nil while unwrapping an Optional value

deleagte and datasource are nil please help in advance

func setCollectionViewDataSourceDelegate<D: UICollectionViewDataSource & UICollectionViewDelegate>(_ dataSourceDelegate: D, forRow row: Int) {
        
        postsocialcollectionview.delegate   = dataSourceDelegate
        postsocialcollectionview.dataSource = dataSourceDelegate
        postsocialcollectionview.tag        = row
        postsocialcollectionview.reloadData()
        
    }

Oh, it was so useful tutorial.

I did not understand how to return cells by it's categories (my cells have categories :) ) to it's Collection View :(

   func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("BroadcastCell", forIndexPath: indexPath) as? BroadcastCell
        let broadcasts: [Broadcast] = self.broadcastInSection(collectionView.tag)
        let broadcast = broadcasts[indexPath.row]

        cell?.configureCell(broadcast)
        return cell!
    }

Now it looks like the same cells in every Collection View I have.

broadcastInSection(index) - filter my cells by category.index

How can I fix it?

Anythoughts what could be make it smother as it reuses cells?

Thanks!

Hi thanks for sharing,
Would you tell me what the problem if we put UICollectionViewDataSource in the UITableViewCell ?

Hey Ash, thanks for the great tutorial!!!! 😄

Im currently attempting to add a horizontal uicollectionview within a tableview but the collectionview doesnt fill the tableview cell. I've set heightForRowAtIndexPath to UITableViewAutomaticDimension but that doesn't do much and the collectionview's cells are cut off if I set a hard coded value. I was wondering if there was a way to make the uicollectionview dynamically fill the tableview cell? I've also tried setting a contentSize variable which will later be equal to collectionView.contentSize.height that allows the collectionview to fill the cell but theres a lot of space (between the first section and where the collectionview starts in the second section)
I've included some sheetshots below to further explain

//section 2 of tableview cell
    var contentSize: CGFloat! = UITableViewAutomaticDimension

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        if(indexPath.section == 0){
            if(indexPath.row == 0){
           //return irrelevant cells    
           }
        }else{
            let cell = tableView.dequeueReusableCellWithIdentifier("shotsCell")
            tableView.rowHeight = UITableViewAutomaticDimension
            tableView.estimatedRowHeight = 200
            return cell!
        }
    }
//heightForRowAtIndexPath
    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        if(indexPath.section == 0 && indexPath.row == 0){
            return 146
        }else{
            return UITableViewAutomaticDimension
     //            return contentSize
          }
    }

Collectionview

    func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {
        contentSize = collectionView.bounds.height
    }  
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSize(width: collectionView.bounds.width / 2 - 2, height: 200)
    }

With contentsize set

UITableViewAutomaticDimension

Such a useful tutorial. However, I am just unclear about how to set up custom content within the collection view cell, such as a UIImage or Label - where should the outlets be created to allow access to their properties within

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {}

Hope that question makes sense... I'm probably just misunderstanding something basic!
Thank you and thanks again for the tutorial!

Hello,

Just a quick question, i'm trying to perform the "peek" and "pop" functionality and have setup my tableview and embedded collectionView per your tutorial. Any pointers on how to best assemble the code in order to "peek" and preview the collectionView cell? I've seen a ton of tutorials but they all cover tableview Or collection view only. Thanks!

Hi,

I have more than one type of cell in a table view.One of the types is a collection view rest are not. In that case, I used the code u referred but the data source methods of collection view are not getting called.

Hope you understand what I am trying to say and expect a solution from your side

thank you

Hi,

I have implemented collectionview a similar way, but are having issues when getting the data from and external database (Google Firebase). The function that counts the collectionview cells are performed before the data is stored in the episodesArray.

I guess I have to perform some delay or run the functions in the same thread, but are pretty newbie at this, so any help is much appreciated. THANKS!!!!

I have separated the code into 2 swift files:

1. UIViewController.swift

...
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell") as! EpisodesRow
cell.categoryID = "siibMVy0vuiXPVW2IZsz" //Temp static solution for testing
cell.getEpisodes()
return cell
}
...

2. CategoryRow.swift

...
//Connect to Firebase and Datamodel
let db = Firestore.firestore()
var episodesArray : [Episodes] = Episodes

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
print("Count: (episodesArray.count)")
return episodesArray.count
}

func getEpisodes() {
//print(categoryID)
db.collection("Episodes").whereField("EpisodeCatID", isEqualTo: categoryID).getDocuments { (snapshot, error) in
if error != nil {
//error handling
print(error!)
} else {
//Success
for document in (snapshot?.documents)! {
let episodeData = Episodes()
episodeData.EpisodeName = (document.data()["EpisodeName"] as? String)!
episodeData.EpisodeImage = (document.data()["EpisodeImage"] as? String)!
self.episodesArray.append(episodeData)

                print(" \(self.episodesArray.count)")
                print(" \(self.episodesArray)")
            }
        }
    }
}

...

I'm curious if there's a reason you're calling setCollectionViewDataSourceDelegate() from within tableView(_:willDisplay:forRowAt:) as opposed to tableView(_:cellForRowAt:)? Thanks! This is an excellent resource.

Hi,
When scrolling the collectioview inside the cell and then scrolling the tableview, the cell that gets reused shows the the collection view scrolled to the position that i scrolled to in the first cell.

I was assuming that the storedOffsets was for this unwanted behavior. Unfortunately it is not working. Or is the storedOffsets for another issue?

Please help.

Hello Ashfurrow,

Great Project! Do you have any writing about Add and Delete rows in the table and also Add and Delete cells in the collection. Thanks

This code relies on the tag property. Because of this, it does not account for tableviews with multiple sections. How would you modify the code to account for this? Could you create a custom UICollectionView with custom properties "section" and "row", and store the tableview section and row in those properties? Would that violate MVC? Thanks!

Is there a way ,where i scroll the collection view on first row and make all the collection view cells of other row to scroll at that position?

Hopefully not too difficult, haven't looked into it yet.

Hi!

I'm very very new to coding and especially swift. followed your tutorial and am getting this error at the ViewController extension.

I made things a little different than your code, I am using a TableViewController as the starting point. This is the complete code for the subclass.

import UIKit
public let model: [[UIColor]] = generateRandomData()
class TableViewController: UITableViewController {


    override func viewDidLoad() {
        super.viewDidLoad()

        // Uncomment the following line to preserve selection between presentations
        // self.clearsSelectionOnViewWillAppear = false

        // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
        // self.navigationItem.rightBarButtonItem = self.editButtonItem()
    }

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

    // MARK: - Table view data source

    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 0
    }


    // next two functions are to display table view cells
    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        // ajustado
        return model.count
    }


    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)

        return cell
    }

    // [kk2] set the collectionView delegate/datasource and row number one function to be called just before the cell is about to be displayed


    override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
        guard let tableViewCell = cell as? TableViewCell else { return }

        tableViewCell.setCollectionViewDataSourceDelegate(self, forRow: indexPath.row)
        tableViewCell.collectionViewOffset = storedOffsets[indexPath.row] ?? 0

    }

    override func tableView(tableView: UITableView, didEndDisplayingCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

        guard let tableViewCell = cell as? TableViewCell else { return }

        storedOffsets[indexPath.row] = tableViewCell.collectionViewOffset
    }






    /*
    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("reuseIdentifier", forIndexPath: indexPath)

        // Configure the cell...

        return cell
    }
    */

    /*
    // Override to support conditional editing of the table view.
    override func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool {
        // Return false if you do not want the specified item to be editable.
        return true
    }
    */

    /*
    // Override to support editing the table view.
    override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
        if editingStyle == .Delete {
            // Delete the row from the data source
            tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: .Fade)
        } else if editingStyle == .Insert {
            // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
        }    
    }
    */

    /*
    // Override to support rearranging the table view.
    override func tableView(tableView: UITableView, moveRowAtIndexPath fromIndexPath: NSIndexPath, toIndexPath: NSIndexPath) {

    }
    */

    /*
    // Override to support conditional rearranging of the table view.
    override func tableView(tableView: UITableView, canMoveRowAtIndexPath indexPath: NSIndexPath) -> Bool {
        // Return false if you do not want the item to be re-orderable.
        return true
    }
    */

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(collectionView: UICollectionView, numberOfRowsInSection section: Int) -> Int {

        return model[collectionView.tag].count
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath)

        cell.backgroundColor = model[collectionView.tag] [indexPath.item]

        return cell
    }

}


func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    print("Collection view at row \(collectionView.tag) selected index path \(indexPath)")
}

It shows another two errors up there, which are
Cannot invoke 'setCollectionViewDataSourceDelegate' with an argument list of type '(TableViewController, forRow: Int)'

and

Use of unresolved identifier 'storedOffsets'

both at one of the same override tableView function.

Any idea of what might be causing the problem?

Hi, i have an question: if the collection view cell numberOfItemsInSection are different, and when i scroll collection view will crash due to Index out of range.
I found the problem that when i scroll the tableview the collection view cell index path updated to the bottom one, but the collection view i scrolled is top one and it does't remember the numberOfItemsInSection, so it will crash due to Index out of range .

ps: it can scroll only when that table cell at the bottom, coz its numberOfItemsInSection is correspond won't cause Index out of range.
And each of my collection view numberOfItemsInSection is different.

Do you have any idea how to solve this problem?
Thanks

I have a similar setup with a collection view inside each table view cell. Table view cells' heights are calculated dynamically using auto layout.

Sometimes one of these embedded collection view has to behave like a table view. i.e. flowLayout.scrollDirection = .vertical. Like in iOS 10 Music app, some tiles scroll horizontally while others are flattened (?) to scroll with the table view. I'm addressing the latter by just changing the flow direction to vertical.

For these vertical direction collection views, I calculate and apply the height constraint manually. It works. However, all of the collection view cells get loaded altogether in the memory, as soon as the containing table view cell enters the screen.

One "fix" I can imagine is to see if a collection view cell's bounds overlap visible bounds and then "actually" render its model. This would be a less desired workaround but could potentially be a good enough solution in absence of an alternative.

Do you have a suggestion to make them respect their view-port/enable them to be reusable like they would if table view wasn't in the hierarchy?

Hey! 👋

Make sure to connect this collection view outlet to the cell’s collection view in the storyboard.

Can anyone elaborate on this? i am getting an error "the collectionView outlet from the TableViewConrtoller to the UICollectionView is invalid"

First of all, great tutorial. Thanks for sharing it with the community as usual =)

Wanted to notice that the approach implemented in this issue works but has a performance side effect. I am using it in the following app, you can test it there.

When you scroll vertically in the Home screen you will notice the lags due to the reloadData() in the setCollectionViewDataSourceDelegate. I have tested commenting that line out and the vertical scroll becomes smooth.

I have an iPhone 5S, perhaps you don't notice it in most recent devices. But still that reloadData() is super expensive there.

PS: I just noticed it, in case I come up with a solution will let you know.

Version 3 swift is no longer supported.

Hi, great tutorial and example project.

I have drawn an outlet to the Height Constraint on the collectionView. The height is fixed with low priority. When I filled my collectionView I would like to:

cell.collectionViewHeight.constant = collectionView.contentSize.Height

so that the TableViewCell can resize it self with UITableViewAutomaticDimension. But I don't know where to do this. I've used this before just not in a tableViewCell.

Edit:

First time I scroll down the height is 0, next time its works. So I guess the contentSize of the collectionView is set "to" late.

Cheers

Thanks for the excellent tutorial! It works very well. I am just curious why the call to setCollectionViewDataSourceDelegate is made in willDisplayCell as opposed to cellForRowAtIndexPath? I've put it in the latter and it seems to behave just fine. It seems it would be more appropriate in cellForRowAtIndexPath so that it is ready before the user scrolls to see it. It doesn't seem to be great to reload the collection view just right before it's going to be displayed. Just curious if there is a reason I'm not seeing. Thanks!

Hi there,
Thank you very much for the tutorial!
I do not have any issue with your work but trying to push it a bit more on some levels. I have trouble getting the tableView section in the collectionView. I have multiple sections and each of them do not have the same number of rows.
For example (see picture bellow);

• Section 0: One row, Two collectionView cells (supposed to be one cell)
• Section 1: One row, Two collectionView cells
• Section 2: Two rows, Two collectionView cells on the first row and One cell on the second row (using flow layout delegate)
• ... there is a lot more...

So, I would need the section index in the collectionView (numberOfItemsInSection) to set the appropriate number of cell. For some reason the "section" parameter of the function does not give me the right one. Any idea?

Hi,

I tried your solution, but cellForItemAtIndexPath doesn't run but numberOfItemsInSection does.

What do you think is the issue?

thanks

Just watch the first row. After scrolling up & down, it changes randomly. After some debugging, I found out that the data source of the collection views are not called all the times for reused collection views.

I can fix the problem by adding this line
cell.collectionView.reloadData()
at tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) delegate.

I hope there is a better way or a good explanation of the current behaviour.

BTW. Thank you for the blog. I am learning a lot.

So I understand that you created a UICollectionView using IB. I was wondering if I was creating it programmatically. Because you have this delegate/datasource function and some Constraint func inside the TableviewCell. I'm trying to figure it out so i can understand it more so I can manipulate it.

I tried your approach with xib files(not using storyboards in my project), but func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell is not called.
I registered collection cells in TableViewCell

I've recently read your great tutorial while I was looking for a solution for my problem:
Let's say in each cell of the UICollectionView, a UIImageView and a UILabel are stacked in a vertical UIStackView. Since I always use Dynamic Type, the label height and thus the collectionView cell height can't be set to a constant predefined value.
How can I lay out the UICollectionView in a UITableView cell so that both the tableView cell height and the collectionView item size can be determined automatically? I've played around with AutoLayout in InterfaceBuilder trying to make this work with no luck.
I should say, I've been using self-sizing cells on both UITableView and UICollectionView since iOS 8 when they're not nested together without any problems whatsoever.

Love the code and your tutorial, works great! I have now pulled data from a Parse backend and displayed it in the collectionView cells and I'd like to know how you would perform segues from the cells of the collectionView to a ViewController displaying the cells content. I have been able to do this with didSelectItemAtIndexPath etc. but in order to display the correct data in the destination view controller I need to add some bits into the prepareForSegue function. Specifically I need to reference the collectionView outlet that is established in TableViewCell.swift . How would I reference this outlet in ViewController.swift in order to ready the correct data through the prepareForSegue function?