CODEWITHSUNDEEP
iosswiftuicollectionviewuicollectionviewcell
Dani
Dani

Reputation: 11

CollectionView not displaying 3 columns as expected

I have 3 different UICollectionViews in the same UIViewController. They are working fine. My problem is with the styling, 2 of them need to have the same styling - meaning 3 columns and some spacing.

This is what i need to achieve: screenshot

And this is what I got so far: desired result

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if collectionView == gameCollectionView {
        let width = gameCollectionView.frame.size.width
        return CGSize(width: ((width / 2) - 7), height: 150)
    }
    else {
        let width = paymentCollectionView.bounds.width / 3 // < THIS IS What should give 3 columns 
        return CGSize(width: width, height: 70)
    }
}

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
}

Can someone tell me how to achieve this and preferably explain how it works because I cannot figure it out

UPDATE: As requested - Storyboard for the CollectionView Storyboard

Upvotes: 0

Views: 1899

Answers (4)

Dharmesh Rajpara
Dharmesh Rajpara

Reputation: 81

CGSize(width: ((width - `section's left & right spce` - minimumInteritemSpacing) / `numberofCellYouWant`), height: 150)

you can get minimumInteritemSpacing from collectionView.collectionViewLayout property

Upvotes: 4

mgrillo
mgrillo

Reputation: 31

If you're planning to deploy for iOS 13 or above I'd recommend using Compositional Layout to achieve this grid.

Resources

Apple has a great WWDC on this and an SDK that you can download to view their sample code. Here are the links:

Advances in Collection View Layout WWDC 2019

Associated SDK

Recommendation

I'd also recommend wrapping all three collection views inside this single collection view. This can easily be achieved using Compositional Layout.

Sample Code

The sample below is from the link above. You can layout 3 columns by simply defining it in your group. Alternatively you could layout your items as a fraction of their group container.

    func createLayout() -> UICollectionViewLayout {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                         heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                          heightDimension: .absolute(44))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 3)
    let spacing = CGFloat(10)
    group.interItemSpacing = .fixed(spacing)

    let section = NSCollectionLayoutSection(group: group)
    section.interGroupSpacing = spacing
    section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)

    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}

}

Upvotes: 3

deepak
deepak

Reputation: 78

You need to change this delegate work 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if collectionView == gameCollectionView {
        let width = gameCollectionView.frame.size.width
        return CGSize(width: ((width / 2) - 7), height: 150)
    }
    else {
        let width = (paymentCollectionView.frame.width / 3) - 5 // if you want to more space so increase
        return CGSize(width: width, height: 70)
    }
}

Upvotes: 1

Tanjima Kothiya
Tanjima Kothiya

Reputation: 5693

You can try this 

let screenWidth = self.CollecionView.frame.width
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: (screenWidth/3)-5, height: (screenWidth/3)-5)
self.CollecionView.collectionViewLayout = layout

Upvotes: 0

Related Questions