Trying to Add a CollectionView to ResuableView Header like Instagram or SNapchat

Question

I want to have a CollectionView in my Header that resembles that on Instagram and Snapchat for my main CollectionView which would be the feed. When I try to add the collectionview from the library and set the header as delegate and datasource after implementing the delegate methods, I still dont see anything in the header.

    //let layout = UICollectionViewFlowLayout()

    let headerCollection = UICollectionView(frame: CGRect(x: 0, y: 0, width: 50, height: 90), collectionViewLayout: UICollectionViewFlowLayout())

    override func awakeFromNib() {
        super.awakeFromNib()

//       headerCollection.delegate = self
//        headerCollection.dataSource = self
    }


}

extension HeaderforFeed: UICollectionViewDataSource, UICollectionViewDelegate{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return CollectionViewData.Dict_StrImg.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = UICollectionViewCell(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        cell.backgroundColor = .red
        return cell
    }


}```

Answer 1

Based on your code, I would think that the issue is you are not adding it to the header (I understand it as a header section inside your UICollectionView). If it's so, try add it at

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {

}

Here, you would add your custom view with UICollectionView as UICollectionReusableView

I don't know if this could help you, but according to your question is what I understood

Answer 2

its fine i figured it out. I added the collectionview from the library unto my header in storyboard. Then i connected it as an outlet in my UICollectionReusableView class. I then made that class implement the delegate methods for a collectionview but for the one in the header.

Make the reusableview the delegate and datasource and it worked for me

//  HeaderforFeed.swift
//  finishedFeednStories
//
//  Created by Guh Suck Yu Mada
//  Copyright © 2019 Bumboklat. All rights reserved.
//

import UIKit

class HeaderforFeed: UICollectionReusableView {
    //let layout = UICollectionViewFlowLayout()


    @IBOutlet weak var storiesCollection: UICollectionView!


    override func awakeFromNib() {
        super.awakeFromNib()

       storiesCollection.delegate = self
        storiesCollection.dataSource = self
    }


}

extension HeaderforFeed: UICollectionViewDataSource, UICollectionViewDelegate{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return CollectionViewData.Dict_StrImg.count
    }

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

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "storiesCell", for: indexPath) as! StoriesCell

        cell.storiesImg.image = Array(CollectionViewData.Dict_StrImg)[indexPath.row].value
        cell.storiesLabel.text = Array(CollectionViewData.Dict_StrImg)[indexPath.row].key

        return cell
    }


}