0

I try to programmatically add UINavigationBar in my viewController, however I got the markup issue which makes my navigation bar title move to the top border of the safe area and I wonder how to move this title to the center of the navigation bar. I cannot find any margins, paddings or frame configurations for it. So my question is how to vertically center the content of UINavigationBar

This is the code of navigation bar creation:

  private lazy var navItem: UINavigationItem = {
        let item = UINavigationItem(title: R.string.localization.supportNavigationBarTittle())
        return item
  }()

  private lazy var navBar: UINavigationBar = {
        let bar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 60))
        bar.setTitleVerticalPositionAdjustment(CGFloat(70), for: UIBarMetrics.default)

        return bar
  }()

And in the viewDidLoad method I append my toolbar to the whole view

navBar.tintColor = .white
view.addSubview(navBar)
        
let doneItem = UIBarButtonItem(image: UIImage(named: R.image.crossIcon.name), style: .plain, target: self, action: #selector(selectorName(_:)))
doneItem.imageInsets = UIEdgeInsets.init(top: 16, left: 8, bottom: 20, right: 8);
navItem.leftBarButtonItem = doneItem
navBar.setItems([navItem], animated: false)

Unfortunately, I got this zero top margin title and I cannot even find the way of how to fix it.

enter image description here

P.S.

I am pretty new in ios development, so I can make a lot of stupid mistakes.

Kostya M
  • 205
  • 1
  • 9
  • 1
    Instead of manually adding a navbar, just make a `UINavigationController` with your controller as root and present that one instead (and set the title - which can be auto-set by the `title` property of your controller btw - and close button of course). – Alladinian Sep 13 '21 at 09:18

1 Answers1

1

I think I managed to replicate your view. If you want to refer to the code, you can find it here. Ok, I think, even though you are setting the navbar to your custom height, the content will remain within the light green color area, which is the space for the content (which is 44pt tall).

enter image description here

Adding to this, you are setting the x & y position of the navbar to 0 (i.e. you are aligning the navbar to the right and top). In iOS (or Android) you have a SafeArea, which in your case is the space with a red border in the following image.

enter image description here

So to make sure your navbar is away from the safe area, set the frame of the Nav bar in the viewDidLayoutSubviews() method. See the following code

    private lazy var navBar: UINavigationBar = {
        let bar = UINavigationBar()
        return bar
    }()
    .
    .
    .
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        navBar.frame = CGRect(x: 0, y: view.safeAreaInsets.top, width: view.frame.size.width, height: 60) // Setting the frame 
    }

The reason why you would add it to the viewDidLayoutSubviews method is that when the viewDidLoad method is called the views/layout haven't been placed. This will result in the Navbar being moved below the safearea..

enter image description here

Important

Despite all of this, I would advise you to use a UINavigationController which by default has a title attribute that can be changes fairly easily.

Helpful links

If you want to read on how to increase the size of the UINavbar, read this thread

Visal Rajapakse
  • 1,718
  • 1
  • 9
  • 15