Search code examples
iosswiftuitabbarcontrolleruinavigationbarnslayoutconstraint

Swift remove space of Navigation Bar from UITabBarController


I'm making an iOS application, creating the UI programmatically, so far what I'm trying to do is display a map with MapKit inside one tab of UITabBarController, and I'm trying to make the map to use the full space below the notch in an iPhone X (and above) but it's below it, as if the title of a NavigationController were there.

Even if I try to remove the titleView it's still there.

TabBarViewController

import UIKit

class TabBarViewController: UITabBarController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemBackground
        UITabBar.appearance().barTintColor = .systemBackground
        tabBar.tintColor = .label
        setupVCs()
    }
    
    func setupVCs() {
        viewControllers = [
            createNavController(for: MapViewController(), title: NSLocalizedString("Search", comment: ""), image: UIImage(systemName: "magnifyingglass")!),
            createNavController(for: ViewController(), title: NSLocalizedString("Home", comment: ""), image: UIImage(systemName: "house")!),
            createNavController(for: ViewController(), title: NSLocalizedString("Profile", comment: ""), image: UIImage(systemName: "person")!)
        ]
    }
    
    fileprivate func createNavController(for rootViewController: UIViewController, title: String, image: UIImage) -> UIViewController {
        
        let navController = UINavigationController(rootViewController: rootViewController)
        navController.tabBarItem.title = title
        navController.tabBarItem.image = image
        //rootViewController.navigationItem.title = title
        rootViewController.navigationController?.isToolbarHidden = true
        navigationItem.titleView?.removeFromSuperview()
        navigationItem.title?.removeAll()

        return navController
    }
}

MapViewController

import UIKit
import MapKit

class MapViewController: UIViewController {
    var mapView: MKMapView!
    let annotation = MKPointAnnotation()
    
    override func viewWillAppear(_ animated: Bool) {
        navigationController?.setToolbarHidden(true, animated: false)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .black
        
        mapView = MKMapView()
        mapView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(mapView)
        setupConstraints()
    }
    
    fileprivate func setupConstraints() {
        let mapViewLeadingAnchor = mapView.leadingAnchor.constraint(equalTo: view.leadingAnchor)
        let mapViewTrailingAnchor = mapView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        let mapViewTopAnchor = mapView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)
        let mapViewBottomAnchor = mapView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        
        NSLayoutConstraint.activate([mapViewLeadingAnchor, mapViewTrailingAnchor, mapViewTopAnchor, mapViewBottomAnchor])
    }
}

This is how the map looks like when having the title set and without it, I just set the title to see if it was due to this.

How can I remove that extra space below the notch?

enter image description here enter image description here


Solution

  • So basically you need to do two things here in order to hide the navigation bar just in the map tab:

    • Hide the nav bar either in your viewWillAppear or viewDidLoad inside MapViewController with:
    navigationController?.setNavigationBarHidden(true, animated: false)
    
    • Change your top constraint from safeArea to the view itself with:
    let mapViewTopAnchor = mapView.topAnchor.constraint(equalTo: view.topAnchor)