Using CollectionView in UIView with xib file

Question

i'm doing with this, i want to use CollectionView, but i haven't seen prototype cell, and don't know how to use CollectionView in this case, can someone help me ?

I try to use like this way but it take alot of time and hard to manage than UICollectionView

Check this : https://www.appcoda.com/ios-programming-uicollectionview-tutorial/ — Midhun MP, Dec 16 '16 at 19:53
Is your issue that you can't see a prototype cell in the xib? — agirault, Nov 22 '19 at 22:19

score 41 · Accepted Answer · answered Dec 16 '16 at 23:48

The main way to use UICollectionView is by managing the logic programmatically.

First, create a new class which inherits from UICollectionViewCell. Choose if you want to include a xib to easily design your cell:
Design your cell with Interface Builder or programmatically.
Create your main view controller including a xib (or a storyboard) with the collection view inside and link it to the associated class via Interface Builder. Alternatively you can add a collection view programmatically to your UIViewController

Make the target view controller conform to the UICollectionViewDelegate and UICollectionViewDataSource protocols by declaring them after the father class:

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

    @IBOutlet weak var collectionView: UICollectionView!

    //...
}

Register the associated nib or the class for your cell in the viewDidLoad method and associate the datasource and delegate protocols to the view controller class:

 let cellIdentifier = "cellIdentifier"

 override func viewDidLoad() {
     super.viewDidLoad()
     //if you use xibs:
      self.collectionView.register(UINib(nibName:"MyCollectionCell", bundle: nil), forCellWithReuseIdentifier: cellIdentifier)
     //or if you use class:
      self.collectionView.register(MyCollectionCell.self, forCellWithReuseIdentifier: cellIdentifier)

      self.collectionView.delegate = self
      self.collectionView.dataSource = self
 }

Implement the methods declared in the UICollectionViewDelegate and UICollectionViewDataSource protocols :

 let objects = ["Cat", "Dog", "Fish"]

 func numberOfSections(in collectionView: UICollectionView) -> Int {
       return 1
 }

 func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return self.objects.count
 }

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

       let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath) as! MyCollectionCell

       //in this example I added a label named "title" into the MyCollectionCell class
       cell.title.text = self.objects[indexPath.item]

       return cell
 }

Run your app in the simulator (or on a real device) and.. Et voilà! :)

For more info: https://developer.apple.com/reference/uikit/uicollectionview

No, the question was: why UICollectionView does not have any tool to add cells in the Interface Builder if it is added to a .xib file — rommex, Nov 08 '19 at 11:22
Agreed with @rommex: you say "Create your main view controller including a xib (or a storyboard)" but my guess is you're using a storyboard. I don't find a way to add a prototype cell in the interface builder in the xib, which I believe is the actual question. — agirault, Nov 22 '19 at 22:20
I'm unable to put X elemts in row, maybe because from xib I can't edit the property 'estimated size' of cell, how can I fix it? thanks — mene, Feb 24 '21 at 14:52

score 2 · Answer 2 · answered Dec 16 '16 at 20:04

ok first you must have the IBOutlet of your collection view and implements the methods like this

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{



    @IBOutlet var collectionView: UICollectionView!

    override func viewDidLoad() {

        super.viewDidLoad()
        count = 9;
        let nib = UINib(nibName: "yourItemView", bundle: nil)
        collectionView.registerNib(nib, forCellWithReuseIdentifier: "yourItemView")
        self.collectionView.delegate = self
        self.collectionView.dataSource = self


    }

ok in the function you add a xib file, next you must create that extend from UICollectionViewCell, and when you finish this you must override the next methods

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return count 
        // the numbers of items
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {//size of your item for screen sizes
        let wsize = UIScreen.mainScreen().bounds.size.width
        switch(wsize){
        case 414:
            return CGSize(width: 190, height: 102)
        case 375:
            return CGSize(width: 190, height: 102)
        case 320:
            return CGSize(width: 174, height: 102)
        default:
            return CGSize(width: 174, height: 102)
        }
    }



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

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("yourItemView", forIndexPath: indexPath) as! yourItemView



        return cell
    }

and this is all, good luck

Using CollectionView in UIView with xib file

2 Answers2

Linked

Related