How to create various size collectionView cells without space problem

Question

size collection view cells like below and it should be capable of adapt the same design throughout the cells in any count of JSON response.

I did this from button shape but it only contains 4 static items.

But I need to adapt same style of collection view cell for following UI.

extension CategoryVC: UICollectionViewDelegate, UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return self.categories.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CatCell", for: indexPath) as! CatCell
    DispatchQueue.main.async {
          cell.configureCell()  

        cell.imageView.layer.cornerRadius = 5
        cell.grImageView.layer.cornerRadius = 5
        cell.imageView.image = self.ItemImageArray[indexPath.row]

        let category = self.categories[indexPath.row]
        cell.itemImageName.text = category.name ?? ""
    }
    return cell
}

extension CategoryVC: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        return CGSize(width: 173.0, height: 173.0)
    }
}

I tried several experiments by using sizeForItemAt delegate method but not getting the desired results.

I went through so many StackOverflow posts and web results still not got the suited code snippets for my question.

Please help me. Thanks in Advance

Answer 1

Thanks for support guys, actually I managed to do this from the reference of this tutorial This link now my collectionView is looking like this