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

Answer 1

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

1. First, create a new class which inherits from UICollectionViewCell. Choose if you want to include a xib to easily design your cell:

2. Design your cell with Interface Builder or programmatically.

3. 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

4. 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!
   
       //...
   } 
   

5. 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
    }
   

6. 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
    }
   

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

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