navigationItem.titleView can't render at the center when there are more than one navigationItem.rightBarButtonItem?

Question

I'm doing this tutorial. I have to fix my code because of this problem. Navbar is rendering as following image. I just need my title icon to be at the center of the nav bar. Any tricks?

Here is my current code.

func setUpNavigationBarItems(){
    //https://www.youtube.com/watch?v=zS-CCd4xmRY
    let titleImageView = UIImageView(image: UIImage(named: "ic_nav_app_icon"))
    titleImageView.frame = CGRect(x: 0, y: 0, width: 34, height: 34)
    titleImageView.contentMode = .scaleAspectFit
    navigationItem.titleView = titleImageView


    let addButton = UIButton(type: .system)
    let addImage = UIImage(named: "ic_nav_add")
    addButton.setImage(addImage?.withRenderingMode(.alwaysOriginal), for: .normal)
    NSLayoutConstraint(item: addButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 30).isActive = true
    NSLayoutConstraint(item: addButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 30).isActive = true
    navigationItem.leftBarButtonItem = UIBarButtonItem(customView: addButton)


    let searchButton = UIButton(type: .system)
    let searchImage = UIImage(named: "ic_nav_phone")
    searchButton.setImage(searchImage?.withRenderingMode(.alwaysOriginal), for: .normal)
    NSLayoutConstraint(item: searchButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 30).isActive = true
    NSLayoutConstraint(item: searchButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 30).isActive = true

    let settingButton = UIButton(type: .system)
    let settingImage = UIImage(named: "ic_nav_setting")
    settingButton.setImage(settingImage?.withRenderingMode(.alwaysOriginal), for: .normal)
    NSLayoutConstraint(item: settingButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 30).isActive = true
    NSLayoutConstraint(item: settingButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 30).isActive = true

    navigationItem.rightBarButtonItems = [UIBarButtonItem(customView: searchButton), UIBarButtonItem(customView: settingButton)]

    navigationController?.navigationBar.backgroundColor = .white

}

Answer 1

It should have the correct layout if you replace:

titleImageView.frame = CGRect(x: 0, y: 0, width: 34, height: 34)

With:

NSLayoutConstraint(item: titleImageView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 34).isActive = true
NSLayoutConstraint(item: titleImageView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 34).isActive = true

As explained in the previous answer the frame of the title view is likely not 34x34 at runtime. Instead it is being partly determined by the size of the image (the intrinsic content size of the UIImageView depends on the size of the image) and the Auto Layout configuration of the UINavigationBar.

If you run the view debugger, you might see that the frame of the title view is something like 150x44, which is why it is being offset to one side to make space for everything in the UINavigationBar.

The view debugging tool is located in the bottom bar inside Xcode (on top of the debug area):

It lets you inspect frames, constraints and more of the view hierarchy and will often give you a hint as to what might be wrong when facing issues like this one.