How to add Multiple collection view cells in Swift, where first cell will be constant and rest cells will depend on an array count

Question

I am trying to create a view that has collection view in it. The collection view has multiple cells. The first cell will remain constant. and the rest will show depending on the array count. I will post the code that i have written. The problem in my code is - (and where I need your help) 1.The cells are showing but it's taking the image count that I am providing under numberOfItemsInSection function. And due to this the first image in the array is not displaying. 2. I am stuck at getting the right count of cells if the array count gets added to the first cell that is constant.

OutputImage: My output Image Note: I have added a view controller and registering the cells from the code

Code:

[MultipleCellCollectionViewController -
import UIKit

class MultipleCellCollectionViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    @IBOutlet weak var multipleCellCollectionView: UICollectionView!
    
    let cellImage: \[UIImage\] = \[#imageLiteral(resourceName: "shirts"),#imageLiteral(resourceName: "hats"),#imageLiteral(resourceName: "hat03"),#imageLiteral(resourceName: "hoodie02")\]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        multipleCellCollectionView.delegate = self
        multipleCellCollectionView.dataSource = self
        multipleCellCollectionView.register(MultipleCellCollectionViewCell.self, forCellWithReuseIdentifier: "cell1")
        multipleCellCollectionView.register(TwoMultipleCollectionViewCell.self, forCellWithReuseIdentifier: "cell2")
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
//        if section == 0{
//        return 1
//        }else {
//            return cellImage.count
//        }
        return cellImage.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if indexPath.item == 0 {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell1", for: indexPath) as? MultipleCellCollectionViewCell
            cell!.labelLabel.text = "HI THERE"
            return cell!
        }else {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell2", for: indexPath) as? TwoMultipleCollectionViewCell
            let myImage = cellImage\[indexPath.row\]
            cell!.image.image = myImage
            return cell!
        }
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.bounds.width
        return CGSize(width: width/2 - 2, height: width/2 - 2)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 2
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 2
    }
}


MultipleCellCollectionViewCell-
import UIKit

class MultipleCellCollectionViewCell: UICollectionViewCell {
    
   // @IBOutlet weak var cellView: UIImageView!
    
    public var labelLabel: UILabel = {
        let labelView = UILabel()
        labelView.translatesAutoresizingMaskIntoConstraints = false
        //labelView.text = "Hello"
        labelView.textColor = .black
        labelView.font = UIFont(name: "Georgia", size: 10.0)
        labelView.textAlignment = .center
        return labelView
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView.addSubview(labelLabel)
        
        labelLabel.centerXAnchor.constraint(equalTo: contentView.centerXAnchor, constant: -10).isActive = true
        labelLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor, constant: 10).isActive = true
        labelLabel.heightAnchor.constraint(equalTo: self.heightAnchor).isActive = true
        labelLabel.widthAnchor.constraint(equalTo: self.widthAnchor).isActive = true
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}


TwoMultipleCollectionViewCell-
import UIKit

class TwoMultipleCollectionViewCell: UICollectionViewCell {
    
    public var image: UIImageView = {
           let imageV = UIImageView()
           //imageV.image = UIImage(named: "shirts")
           imageV.frame.size = CGSize(width: imageV.frame.size.width, height: imageV.frame.size.height)
           imageV.contentMode = .scaleAspectFit
           imageV.translatesAutoresizingMaskIntoConstraints = false
           imageV.clipsToBounds = true
           return imageV
       }()
    
    override init(frame: CGRect) {
           super.init(frame: frame)
           contentView.addSubview(image)
          
           image.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0).isActive = true
           image.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 0).isActive = true
           image.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 0).isActive = true
           image.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0).isActive = true
       }
       
       required init?(coder aDecoder: NSCoder) {
           super.init(coder: aDecoder)
       }
    
}][1]

Answer 1

So you have 1 section, need to return cellImage.count + 1 for the number of items in section, and then use indexPath.row - 1 to lookup your cell image in cfiaip if indexPath.item > 0: let myImage = cellImage[indexPath.row - 1]