Two UICollectionViews in One UIViewController - ios

Question

I have two UICollectionViews in one view controller, however my first collection view is conforming to my second collection view's delegate and data source.
The problem is that the category collection view is conforming to the size of the service collection view and it's trying to return five cells.
How do I make my delegate and data source recognize and conform to the two different collection views? Thanks!
My App Screen Image
// HomeController
private let categoryCollectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: 120, height: 120),
collectionViewLayout: UICollectionViewFlowLayout())
private let serviceCollectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: 120, height: 120),
collectionViewLayout: UICollectionViewLayout())
fileprivate func configureUI() {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
popularCategoryCardView.addSubview(categoryCollectionView)
categoryCollectionView.backgroundColor = .white
categoryCollectionView.collectionViewLayout = layout
categoryCollectionView.isScrollEnabled = true
categoryCollectionView.delegate = self
categoryCollectionView.dataSource = self
categoryCollectionView.register(CategoryCell.self, forCellWithReuseIdentifier: CellIdentifiers.CategoryCell)
categoryCollectionView.anchor(left: popularCategoryCardView.leftAnchor, bottom: popularCategoryCardView.bottomAnchor,
right: popularCategoryCardView.rightAnchor, paddingLeft: 8, paddingBottom: 8, paddingRight: 8, height: 120)
popularServiceCardView.addSubview(serviceCollectionView)
serviceCollectionView.backgroundColor = .white
serviceCollectionView.collectionViewLayout = layout
serviceCollectionView.isScrollEnabled = true
serviceCollectionView.delegate = self
serviceCollectionView.dataSource = self
serviceCollectionView.register(ServiceCell.self, forCellWithReuseIdentifier: CellIdentifiers.ServiceCell)
serviceCollectionView.anchor(left: popularServiceCardView.leftAnchor, bottom: popularServiceCardView.bottomAnchor,
right: popularServiceCardView.rightAnchor, paddingLeft: 8, paddingBottom: 8, paddingRight: 8, height: 150)
}
// MARK: - UICollectionViewDataSource
extension HomeController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if collectionView == self.categoryCollectionView {
return jobCategory.count
} else {
return 5
}
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView == self.categoryCollectionView {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CellIdentifiers.CategoryCell, for: indexPath) as! CategoryCell
cell.jobCategory = jobCategory[indexPath.item]
return cell
} else {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CellIdentifiers.ServiceCell, for: indexPath) as! ServiceCell
return cell
}
}
}
// MARK: - UICollectionViewDelegateFlowLayout
extension HomeController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if collectionView == self.categoryCollectionView {
return CGSize(width: 160, height: 120)
} else {
return CGSize(width: 100, height: 140)
}
}
}

Answer 1

Don't use the same layout object for multiple collection views:
let categoryLayout = UICollectionViewFlowLayout()
categoryLayout.scrollDirection = .horizontal
categoryCollectionView.collectionViewLayout = categoryLayout
let serviceLayout = UICollectionViewFlowLayout()
serviceLayout.scrollDirection = .horizontal
serviceCollectionView.collectionViewLayout = serviceLayout