UICollectionView not displayed to view - ios

Question

I have been stuck on this problem for nearly a week now. I have even reverted my code and wrote the same code as some tutorials but I cannot seem to get my UICollectionView to be displayed to the view for the life of me. I have a lot of other code going on in my view controllers so I am going to display the code that pertains to the UICollectionView. This is what I have so far:
view controller:
class UARTModuleViewController: UIViewController, CBPeripheralManagerDelegate, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
override func viewDidLoad() {
super.viewDidLoad()
setupMenuBar()
}
let menuBar: MenuBar = {
let mb = MenuBar()
return mb
}()
private func setupMenuBar() {
view.addSubview(menuBar)
let horizontalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":menuBar])
let verticalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0(100)]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":menuBar])
view.addConstraints(horizontalConstraint)
view.addConstraints(verticalConstraint)
}
}
MenuBar.swift:
class MenuBar : UIView, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
lazy var collectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.backgroundColor = UIColor.red
cv.dataSource = self
cv.delegate = self
return cv
}()
override init(frame: CGRect) {
super.init(frame: frame)
self.addSubview(collectionView)
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "MenuCell")
//took out constraints here just to make the warning mentioned below easier to follow.
}
I do have my protocols implemented but I didn't add them just to save the amount of code I'm posting. I do get this warning after the UARTModuleViewController loads :
[LayoutConstraints] Unable to simultaneously satisfy constraints.
I've tried reasoning through it and can't seem to come to a solution. I do have a cell class as well but thought it was not necessary to include since I can't get the UICollectionView to be displayed. The only other thing that I may add is that I have a UIImageView in the middle of the view that I added in story board and put constraints on like so:
Does anyone have any suggestions as to what I may be doing wrong? Thanks in advance for any help or advice that can be given.

Answer 1

According to comments:
First of all, every time you use constraint in code, you must set translatesAutoresizingMaskIntoConstraints = false to the view you want to add constraint.
You're not telling the collection view to fill entire MenuBar space.
Constraints applied to MenuBar in setupMenuBar are not enaugh to determine the size and position of the view.
These are changes you should apply to tell the MenuBar to fill width, be 60 pt height and to position on bottom of the screen:
private func setupMenuBar() {
view.addSubview(menuBar)
menuBar.translatesAutoresizingMaskIntoConstraints = false // this will make your constraint working
menuBar.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true // every constraint must be enabled.
menuBar.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
menuBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
menuBar.heightAnchor.constraint(equalToConstant: 60).isActive = true
}
To tell the collection view to fill entire MenuBar view do this in MenuBar init(frame:) method:
override init(frame: CGRect) {
super.init(frame: frame)
self.addSubview(collectionView)
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "MenuCell")
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.topAnchor.constraint(equalTo: topAnchor).isActive = true
collectionView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
collectionView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
collectionView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
//took out constraints here just to make the warning mentioned below easier to follow.
}
As you can see in my code, I usually use "anchor" methods to apply constraint because are easier than visual format.