Why does the UITableView goes below the TabBar?

Question

This is how it currently looks:

Image here

This is my current code:

override func viewDidLoad() {
    super.viewDidLoad()

    self.view.backgroundColor = UIColor(red: 4/255, green: 4/255, blue: 4/255, alpha: 1.0)
    self.navigationController?.navigationBar.barStyle = .black
    self.navigationController?.navigationBar.tintColor = UIColor.white
    self.navigationItem.title = "Test"
    self.navigationController?.navigationBar.prefersLargeTitles = true

    // Get main screen bounds
    let screenSize: CGRect = UIScreen.main.bounds
    let screenWidth = screenSize.width
    let screenHeight = screenSize.height


    myView.frame = CGRect(x: 0, y: 0, width: screenWidth, height: 150)
    myView.backgroundColor = .red
    self.view.addSubview(myView)



    myTableView.frame = CGRect(x: 0, y: myView.frame.size.height, width: screenWidth, height: screenHeight-myView.frame.size.height-(navigationController?.navigationBar.frame.size.height)!-(tabBarController?.tabBar.frame.size.height)!)
    print("SCREEN: \(screenHeight)")
    print("TABLEVIEW: \(myTableView.frame.size.height)")
    myTableView.dataSource = self
    myTableView.delegate = self
    myTableView.backgroundColor = .blue
    myTableView.layer.borderWidth = 3

    myTableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")

    self.view.addSubview(myTableView)
}

It looks liked I have coded it correctly. Also in the Storyboard's Attribute Inspector, I have unchecked the Extend Edges: Under Bottom Bar . Any ideas?

Answer 1

Guessing here, but you're probably having an autoresizing mask translated to a constraint. Breaking your layout as a result. Try:

myView.autoresizingMask = []
myTableView.autoresizingMask = []

// or alternatively

myView.translatesAutoresizingMaskIntoConstraints = false
myTableView.translatesAutoresizingMaskIntoConstraints = false

But it does not matter whether things are set up correctly or not because you are calculating the actual layout by hand. Try to utilize Auto Layout instead:

    myView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(myView)

    myView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
    myView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
    myView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
    myView.heightAnchor.constraint(equalToConstant: 150).isActive = true

    myTableView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(myTableView)

    myTableView.topAnchor.constraint(equalTo: myView.bottomAnchor).isActive = true // making myTableView to lie just below myView
    myTableView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
    myTableView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
    myTableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true