How to add a UIPageController and UICollectionViewController to a UIViewController programmatically - swift

Question

I already have a UIViewController made programmatically, and would like at the bottom to have a collection view with 4 cells, but I want to be able to swipe through different pages of the collection view to see different cells. I'm not sure where to begin with this wether to enable paging on the collection view and how that would work with setting up the cells, or to create a page controller and adding the collection view to that? There are a couple of ways that I have seen online already, but that don't really fit my needs.
I would like something as such:
Let me know if I can provide you with more information. I just created a basic page controller but am not sure how to achieve what I'm looking for.
Edit: I created a collection view and added the constraints to get the layout I want; however I'm not sure how to make it swipe like a page.
Here's the code for the collection view:
let friendsCollectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.translatesAutoresizingMaskIntoConstraints = false
cv.register(FriendsCell.self, forCellWithReuseIdentifier: "cell")
cv.backgroundColor = UIColor.blue
cv.layer.cornerRadius = 10
return cv
}()
view.addSubview(friendsCollectionView)
friendsCollectionView.anchor(top: separatorView.bottomAnchor, left: nil, bottom: nil, right: nil, paddingTop: 50, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 250, height: 250)
friendsCollectionView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 75, height: 75)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
if section == 0 {
return UIEdgeInsets(top: 85, left: 10, bottom: 0, right: 0)
}
if section == 1 {
return UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0)
}
if section == 2 {
return UIEdgeInsets(top: 85, left: 5, bottom: 0, right: 0)
}
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if section == 0 { return 1 }
if section == 1 { return 2 }
if section == 2 { return 1 }
return 0
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 3
}

Answer 1

All you need would be a UICollectionViewController or as I am assuming you have, a UIViewController that conforms to the collectionView protocols. Your UIViewController with one UICollectionView is a good starting point. However the cell you insert needs to be different. First of all, the collectionView within the ViewController needs to have collectionView?.isPagingEnabled = true and its layouts scrollDirection set to .horizontal. Having done that you need to create your cells.
The cells you implement should be a subclass of UICollectionViewController and UICollectionViewDelegateFlowLayout. This collectionView's layout needs to have scrollDirection set to .vertical although I believe you are not scrolling in this view anyways. The number of cells in this collectionView will be 4. You then dequeue your cell of which you want to have 4 (the one with the head in white on blue).
The UICollectionViewController needs to then be dequeued as the cell for your first collectionView. Basically:
Your main ViewController has a collectionView that scrolls horizontally. This collectionView has a UICollectionViewController as cells and scrolls vertically.
It may sound very complicated but I have done it and it works smoothly. Let me know if you have any questions.