CODEWITHSUNDEEP
iosswiftuicollectionviewuicollectionviewcell
Irving Gonzalez
Irving Gonzalez

Reputation: 25

How to have custom cell in UICollectionView

I have a UICollectionView that I want to make 3 custom cells appear.

I have read the documentation but I haven't been able to fix this issue.

Is there something I am missing?

      func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 1
}

I have tried changing the return 1 to 3 to make 3 custom cells appear but it only makes the 1st custom cell appear 3 times.

I have created a video and linked the video below explaining my situation.

https://www.loom.com/share/9b5802d6cc7b4f9a93c55b4cf7d435bb

Edit I have used @Asad Farooq method and it seems to have worked for me. I added my CollectionView's shown below and I can now make custom cells!

    if(indexPath.item==0)
    {
        let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "DailyCollectionViewCell", for: indexPath) as! DailyCollectionViewCell
        return cell
    }
    if(indexPath.item==1)
    {
        let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "WeeklyCollectionViewCell", for: indexPath) as! WeeklyCollectionViewCell
        return cell
        
    }
    else {
    
        let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "MonthlyCollectionViewCell", for: indexPath) as! MonthlyCollectionViewCell
        return cell
    }
}

Upvotes: 1

Views: 7859

Answers (2)

Asad Farooq
Asad Farooq

Reputation: 215

We have to register the three different custom cell to the collectionView before using it then inside this function add this code

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

    if(indexPath.item==0)
    {
       let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "cell1", for: indexPath) as! cell1
return cell1
    }
if(indexPath.item==1)
    {
       let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "cell2", for: indexPath) as! cell2
return cell2
    
}
else
{
let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "cell3", for: indexPath) as! cell3
return cell3
    }

Upvotes: 3

paky
paky

Reputation: 685

As we can see from the documentation of Apple,

You typically don’t create instances of this class yourself. Instead, you register your specific cell subclass (or a nib file containing a configured instance of your class) using a cell registration. When you want a new instance of your cell class, call the dequeueConfiguredReusableCell(using:for:item:) method of the collection view object to retrieve one.

We have to register the cell to the collectionView before using it, for example:

class CustomCollectionViewCell: UICollectionViewCell {
    // my custom collection view cell
}

Then we gonna register it to the collection view:

class MyViewController: UIViewController {
    ...
    override func viewDidLoad(){
        super.viewDidLoad()
        ...
        self.myCollectionView.dataSource = self
        // register the cells, so the collectionView will "know" which cell you are referring to.
        self.myCollectionView.register(UINib(nibName: "CustomCollectionViewCell", bundle: nil), forCellReuseIdentifier: "customReuseIdentifier")
        // register all type of cell you wanted to show.
    }

}

extension MyViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // return number of cell you wanted to show, based on your data model
        return 3
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = routineCollectionView.dequeueReusableCell(withReuseIdentifier: "customReuseIdentifier", for: indexPath) as! CustomCollectionViewCell
        // cast the cell as CustomCollectionViewCell to access any property you set inside the custom cell.
        // dequeue cell by the reuseIdentifier, "explain" to the collectionView which cell you are talking about.
        return cell
    }
}

The above code snippet is just a brief example, but I hope that explain the idea.

If you got multiple type of custom cell, you'll have to create classes for them (sub-class of UICollectionViewCell), register them to your collectionView, and dequeue them in collectionView(cellForRowAt:).

There are plenty of tutorial on the internet, here share one of my favourite: https://www.raywenderlich.com/9334-uicollectionview-tutorial-getting-started

Edit:

If you are using storyboard only to add your custom collectionViewCell, you don't need to register the cell again, the cell already existed in the collectionView (Sorry the above code is just my preference). Just set the class & identifier of the cell, and dequeue the cell using the identifier in collectionView(cellForRowAt:).

Upvotes: 5

Related Questions