Collectionview Card Layout

Question

Here is a screenshot of what I want to achieve:

I need this type of collection view layout for card cells (with leading and trailing edging displays).

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var colList : UICollectionView!
    
    var arrData = [1,2,3]

    override func viewDidLoad() {
        super.viewDidLoad()

        self.colList.delegate = self
        self.colList.dataSource = self

        let nib = UINib(nibName: "CardCell", bundle: nil)
        self.colList.register(nib, forCellWithReuseIdentifier: "CardCell")
        

    }


}

extension ViewController : UICollectionViewDataSource, UICollectionViewDelegate , UICollectionViewDelegateFlowLayout{
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return arrData.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CardCell", for: indexPath) as? CardCell
        cell?.setUpData(data: "\(indexPath.row)")
        return cell ?? UICollectionViewCell()
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: (collectionView.frame.width) - 40 , height: collectionView.frame.height)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        let cellWidth : CGFloat = (collectionView.frame.width) - 40
                
                let numberOfCells = floor(collectionView.frame.size.width / cellWidth)
                let edgeInsets = (collectionView.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1)
                
        return UIEdgeInsets(top: 0, left: edgeInsets, bottom: 0, right: edgeInsets)
        
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 40
    }
    
}

However, when I run the code my cell looks like this:

I can't see the leading and trailing edges for the previous and next cards.

Quick searching finds this: https://github.com/hershalle/CollectionViewWithPaging-simplerExample -- which looks like it will do what you want. Because it subclasses `UICollectionViewController`, you'll need to add it as a child view controller. If you have any trouble with it, follow up here and I can show you how to use it. — DonMag, Aug 30 '23 at 21:17

score 0 · Answer 1 · edited Aug 30 '23 at 19:59

0

Just edit your minimunInterspacing function and give some value.

And with this make sure that you have called the delegate method to your class like UICollectionViewDataSource. You also have to check that you added collectionViewOutletName.delegate = self and dataSource in viewDidLoad.

edited Aug 30 '23 at 19:59

HangarRash

7,314
5
5
32

answered Aug 30 '23 at 19:00

Milan Siddhpura

1
1

OP might have already set the delegate using the storyboard – Leo Dabus Sep 01 '23 at 00:15

score 0 · Answer 2 · answered Aug 31 '23 at 07:41

The issue is here in sizeForItem function. you are returning very extra width for cell which makes collectionView not to show the other cells. Your cell needs a little more less width then you provided.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// Assuming from above screenshot, you have 40px on each side, you need to trim from 2 sides so 40*2 = 80

return CGSize(width: (collectionView.frame.width) - 80 , height: collectionView.frame.height)
}

Collectionview Card Layout

2 Answers2