UICollectionView defaulting to one column, how do I get two? - ios

Question

I've been learning about UICollectionViews recently and I am currently trying to implement one. I need to display two columns but no matter what I do it defaults to one column. There are plenty of similar questions here that suggest adjusting the width of the UICollectionView cell using the collectionView function sizeForItemAt, but I can't seem to get it to work.
this is my viewcontroller code:
class PreferencesViewController: UIViewController {
lazy var collectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = UICollectionView.ScrollDirection.vertical
let cv = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
cv.translatesAutoresizingMaskIntoConstraints = false
cv.register(CategorySelectorCell.self, forCellWithReuseIdentifier: "categorySelector")
cv.backgroundColor = .clear
return cv
}()
override func viewDidLoad(){
super.viewDidLoad()
view.backgroundColor = .white
view.addSubview(collectionView)
collectionView.backgroundColor = .blue
collectionView.contentInsetAdjustmentBehavior = .always
collectionView.delegate = self
collectionView.dataSource = self
collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
collectionView.topAnchor.constraint(equalTo: view.topAnchor, constant: 40).isActive = true
collectionView.heightAnchor.constraint(equalToConstant: view.frame.height/1.5).isActive = true
self.view = view
}
}
my delegate extension:
extension PreferencesViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
1
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "categorySelector", for: indexPath) as! CategorySelectorCell
cell.cat = categories[indexPath.section]
cell.backgroundColor = .red
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width/2.5, height: collectionView.frame.width/2)
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
10
}
}
Any pointers appreciated!

Answer 1

Also add these UICollectionViewDelegateFlowLayout methods
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
}
Update
Also set inset to zero
lazy var collectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.sectionInset = .zero
layout.scrollDirection = UICollectionView.ScrollDirection.vertical
let cv = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
cv.translatesAutoresizingMaskIntoConstraints = false
cv.register(CategorySelectorCell.self, forCellWithReuseIdentifier: "categorySelector")
cv.backgroundColor = .clear
return cv
}()

Answer 2

let's think your collection view UICollectionViewFlowLayout has 16 edge insets starts and end. And minimumInteritemSpacingForSectionAt,minimumLineSpacingForSectionAt to 16
Then you can calculate your cell width like this
(view.frame.width-flowlayoutInsets-sectionSpacing)/2
This is the codes
your collection view
let coll: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16)
let coll = UICollectionView(frame: .zero, collectionViewLayout: layout)
coll.backgroundColor = .systemPink
//other stuff
return coll
}()
Section and Line spacing
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 16
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 16
}
Collectionview cell size
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: (view.frame.width-16-16-16)/2, height: 100)
//1st 16 - left gap - flowlayout left inset
//2nd 16 - middle gap - section spacing
// 3rd 16 = right gap - flowlayout right inset
}