UICollectionView Goes Wrong When Scroll Down - ios

Question

I'm facing strange issue. My UICollectionView display half side colums if I scrolling to down.
At first they show perfectly like this
But when I scrolling down, the UICollectionView behave strange and look like this :
Below is my code to populate data to layout (dummy) :
let layoutProduct: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layoutProduct.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
layoutProduct.scrollDirection = .vertical
collectionViewProduk = UICollectionView(frame: self.view.frame, collectionViewLayout: layoutProduct)
collectionViewProduk.dataSource = self
collectionViewProduk.delegate = self
collectionViewProduk.register(ProdukPopulerCell.self, forCellWithReuseIdentifier: "ProductCell")
collectionViewProduk.backgroundColor = UIColor(red: 231/255.0, green: 231/255.0, blue: 231/255.0, alpha: 1.0)
self.view.addSubview(collectionViewProduk)
How many data to show :
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if collectionView == self.collectionViewByFilter {
return 4
} else if collectionView == self.collectionViewProduk {
return 8
}
return section
}
How I populate dummy data to cell :
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView == self.collectionViewProduk {
if let cellA = collectionViewProduk.dequeueReusableCell(withReuseIdentifier: "ProductCell", for: indexPath) as? ProdukPopulerCell {
cellB.backgroundColor = UIColor.white
if indexPath.row < 8 {
cellB.nameLabel.text = "Product"
cellB.theImageView.image = UIImage(named: "biometric")
cellB.priceLabel.text = "Rp 30.000"
}
return cellB
}
}
return UICollectionViewCell()
}
How I layouting the cell and make them look 2 cell in 1 rows :
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if collectionView == self.collectionViewProduk {
let collectionViewSize = collectionViewProduk.frame.size.width - 10
return CGSize(width: collectionViewSize / 2, height: collectionViewSize / 2)
}
return CGSize()
}
Can you guys spot the mistake that I make?

Answer 1

Create a customCollectionViewFlowLayout and apply it to your collectionview
import UIKit
class customCollectionViewFlowLayout: UICollectionViewFlowLayout {
override init() {
super.init()
setupLayout()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupLayout()
}
func setupLayout() {
minimumInteritemSpacing = 1
minimumLineSpacing = 1
scrollDirection = .vertical
}
override var itemSize: CGSize {
set {
}
get {
let numberOfColumns: CGFloat = 2
let itemWidth = (self.collectionView!.frame.width - (numberOfColumns - 1)) / numberOfColumns
return CGSize(width:itemWidth, height:itemWidth)
}
}
}
then apply it to your collectionview
yourCollectionView.collectionViewLayout = customCollectionViewFlowLayout()