container view constraint issues programmatically - swift

Question

I am trying to include a container UIView right above my tabBar however it doesnt seem to be displayed on my view because what i believe to be constraint issues. I would like my container view to look so in the view.
However my container is not showing in the view at all.
Here is my code:
self.mapContainer.layer.cornerRadius = 8
self.mapContainer.backgroundColor = UIColor.cyan
self.mapContainer.translatesAutoresizingMaskIntoConstraints = false
self.mapContainer.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(self.mapContainer)
//constraints of the map view
let heightTabBar = self.tabBarController?.tabBar.frame.size.height
self.mapContainer.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant : (heightTabBar)! + 220).isActive = true
self.mapContainer.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
//self.topContainer.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
self.mapContainer.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.3).isActive = true
//self.mapContainer.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
self.mapContainer.leadingAnchor.constraint(equalTo: view.trailingAnchor, constant: 20).isActive = true
self.mapContainer.trailingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40).isActive = true
where am I going wrong here to where my container is not displaying
?

Answer 1

Problem:
You push your view with a positive value at your bottom anchor outside of the view. That's the reason why you don't see it.
Solution:
Instead of adding with (equalTo: view.bottomAnchor, constant : (heightTabBar)! + 220) you should subtract with self.mapContainer.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant : -(heightTabBar! + 220)).isActive = true at your bottomAnchor. You should also make your leading anchor of the container depend on the leading anchor of the view, the same for the trailing anchor. Also you need to set a negative value for your constant to your trailing anchor to add padding on the right side. Keep in mind: If you want to push from top and left then add and if you want to push from right and bottom then subtract
This should help you (Hints are in the code comments):
import UIKit
class ViewController: UIViewController {
var mapContainer:UIView!
override func loadView() {
super.loadView()
view.backgroundColor = .white
self.mapContainer = UIView()
self.mapContainer.layer.cornerRadius = 8
self.mapContainer.backgroundColor = UIColor.cyan
self.mapContainer.translatesAutoresizingMaskIntoConstraints = false
self.mapContainer.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(self.mapContainer)
//constraints of the map view
let heightTabBar = self.tabBarController?.tabBar.frame.size.height
// You need to subtract to push from the bottom of the view
self.mapContainer.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant : -(heightTabBar! + 220)).isActive = true
self.mapContainer.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
self.mapContainer.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.3).isActive = true
// Your leading anchor of map container should depend on the leading anchor of the view
self.mapContainer.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
// Your trailingAnchor anchor of map container should depend on the trailingAnchor anchor of the view
// Here you need to subtract to push from the right
self.mapContainer.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
}
}
Result should look similar to this:
Result on iPhone5S simulator: