How to add a UICollectionView to a container programmatically?

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)
}
}

I doubt the collectionView has the correct frame in `viewDidLoad`. Use autolayout, or set the frame later. You also don't set the frame when you add the CollectionViewController to the `itemView`. — James P, Jan 23 '17 at 09:52
@JamesP How can i use autolayout to make the view fit into the superview(container)? — J.GS.Han, Jan 24 '17 at 23:22

score 0 · Answer 1 · answered Jan 23 '17 at 09:43

0

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

answered Jan 23 '17 at 09:43

yageek

4,115
3
30
48

dahiya_boy · Accepted Answer · 2017-01-25T05:11:18.690

0

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.

edited Jan 25 '17 at 05:11

answered Jan 23 '17 at 11:23

dahiya_boy

9,298
1
30
51

If I set the MainView as the initial view, as you said, it's working properly. But when I navigate from another view to the MainView, I cannot see the cells. – J.GS.Han Jan 24 '17 at 09:15
@J.GS.Han Are you passing data from other VC to main VC?? Can you tell flow of your work. What actually you want in your UI/ – dahiya_boy Jan 24 '17 at 09:19
I'm not passing any data at the moment. Flow is: Once user log in, the user will see the main dashboard. If the user clicks a button, user will be navigated to the MainView. – J.GS.Han Jan 24 '17 at 09:24
I've updated the question with the previous view class – J.GS.Han Jan 24 '17 at 22:54
@J.GS.Han 1st of all its `MainVC` not `MainView`, I am always get confused when you write so specify things correctly, because there is lots of difference in between them. – dahiya_boy Jan 25 '17 at 04:52
And keep in mind that if you resent any `VC` then you can not navigate to any other VC from that. So for navigate your VC first you have to come back then only you can navigate to any other VC. – dahiya_boy Jan 25 '17 at 05:18
i checked your first point as well :) Also thanks for letting me know the difference between present and push but not sure why it's still not presenting the cells :(... – J.GS.Han Jan 25 '17 at 05:26
@J.GS.Han [instantiate & present VC](http://stackoverflow.com/questions/24035984/instantiate-and-present-a-viewcontroller-in-swift) Check it out. – dahiya_boy Jan 25 '17 at 05:32

How to add a UICollectionView to a container programmatically?

2 Answers2