How to add a UICollectionView to a container programmatically? - ios

Question

I'm new to IOS development.
The followings are what I want to implement
- Have a two container in the main view
- In the first container, add a UICollectionView
- In the second container, add a UITableView
This is the code that I've done so far.
Main View:
class MainViewController:UIViewController {
let itemView:UIView = {
let itemContainerView = UIView()
itemContainerView.backgroundColor = UIColor.lightGray
let collectionView = CollectionViewController()
itemContainerView.addSubview(collectionView.view)
itemContainerView.translatesAutoresizingMaskIntoConstraints = false
return itemContainerView
}()
let tableView:UIView = {
let tableContainerView = UIView()
tableContainerView.backgroundColor = UIColor.gray
tableContainerView.translatesAutoresizingMaskIntoConstraints = false
return tableContainerView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.white
view.addSubview(itemView)
view.addSubview(tableView)
setupItemView()
setupTableView()
}
func setupItemView(){
itemView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
itemView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
itemView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 2/3).isActive = true
itemView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
}
func setupTableView() {
tableView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
tableView.leftAnchor.constraint(equalTo: itemView.rightAnchor).isActive = true
tableView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1/3).isActive = true
tableView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
}
}
CollectionViewController:
class CollectionViewController:UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
let cellId = "CellId"
var colView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
let layout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 10, right: 10)
layout.itemSize = CGSize(width: 111, height: 111)
colView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
colView.delegate = self
colView.dataSource = self
colView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellId)
colView.backgroundColor = UIColor.white
colView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(colView)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
cell.backgroundColor = UIColor.brown
return cell
}
}
I could see my main screen has two container but couldn't see 10 collection cells.
Could anyone advise me to the right direction? Thanks in advance.
UPDATED
When I set MainViewController as the initial view, it's properly working.
However, in my project, MainViewController is not the initial view.
The flow is;
1. User login
2. Dashboard with a button will appear
3. Clicking button will navigate the user to MainViewController.
Here's my Dashboard class
class DashboardController: UIViewController{
let orderBtn:UIButton = {
let button = UIButton(type: .system)
button.backgroundColor = UIColor.init(red: 173/255, green: 184/255, blue: 255/255, alpha: 1)
button.layer.cornerRadius = 5
button.setTitle("Select Item" , for: .normal)
button.setTitleColor(UIColor.white, for: .normal)
button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 16)
button.translatesAutoresizingMaskIntoConstraints = false
button.addTarget(self, action: #selector(handleOrderNavigation), for: .touchUpInside)
return button
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.white
view.addSubview(orderBtn)
setupOrderBtn()
}
func handleOrderNavigation() {
let mainViewController= MainViewController()
let mainViewNavController= UINavigationController(rootViewController: mainViewController)
self.present(mainViewNavController, animated: false, completion: nil)
}
}

Answer 1

Your code is proper working. here is the output I got from your collectionView code work.
Suggestion
Check view hierarchy of your UI and see is there is any collectionView present in your UI.
Ensure your methods are properly calling. Check it by adding break point.
Edit
You declaration of MainViewController is wrong in button action.
Instead of present MainViewController use push to MainViewController
Be ensure your button action method is properly calling on button click.

Answer 2

Try to call reloadData at some point after the view is loaded.