UICollectionView Custom Cell Size in Swift

Question

I want to get the following Layout by using the UICollectionView, what's the best approach to achieve this.

I have tried this approach but not getting desired outcome

func collectionView(_ collectionView: UICollectionView, layout 
collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: 
IndexPath) -> CGSize {
let totalWidth = collectionView.bounds.size.width
let totalHeight = collectionView.bounds.size.height
let heightOfView = totalHeight / 3
let numberOfCellsPerRow = 2
let dimensions = CGFloat(Int(totalWidth) / numberOfCellsPerRow)
if (indexPath.item == 0) {
    return CGSize(width: collectionView.bounds.size.width, height: heightOfView)
} else {
    return CGSize(width: dimensions / 2, height: heightOfView)
}
}

That's simple layout. Override `collectionView(_:layout:sizeForItemAt:)` should be enough. — Larme, Feb 03 '21 at 09:23
You are missing the fact that you have space inter items, and `return CGSize(width: dimensions / 2, height: heightOfView)` should be just `dimensions` since you already divided it by 2 previously. — Larme, Feb 03 '21 at 09:36
Why work with FlowLayout when you can achieve it with fewer lines code with Compositional layout — Sandeep Bhandari, Feb 03 '21 at 09:50
@SandeepBhandari Maybe because it's iOS 13+ ? It depends on the user needs and restrictions. — Larme, Feb 03 '21 at 10:11
@larme: It wasnt clear from OPs question, so was wondering is he even aware of `Compositional layout` or if he faced any issues with it or is there a reason why he is sticking with flow layout — Sandeep Bhandari, Feb 03 '21 at 10:20
@SandeepBhandari i'am not using Compositional layout here because it only supports iOS 13 or above. — Fahad Ali, Feb 03 '21 at 10:42

score 0 · Answer 1 · answered Feb 03 '21 at 10:10

0

add UICollectionviewdelegateFlowlayout to ur class and use collectionView(_:layout:sizeForItemAt:) method ... here u can return size of items depending on index path

answered Feb 03 '21 at 10:10

Surjava Ghosh

55
8

score 0 · Answer 2 · answered Feb 03 '21 at 12:38

you can set 2 sections like this:

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

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    if section == 0 {
        return 1
    }
    return 4
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
    cell.backgroundColor = .blue
    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if indexPath.section == 0 {
        return .init(width: view.frame.width - 16, height: 120)
    }
    return .init(width: view.frame.width / 2 - 32, height: 120)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

UICollectionView Custom Cell Size in Swift

2 Answers2