How to center an image in navigationBar across all UIViewControllers? Swift / Obj-C

Question

Problem visually:

I have tried putting the image in the center of its own frame with no luck. I have also tried to center it with playing the x of the CGRect with no luck either. I presume I can just put an empty icon with the same background as the navigation bar; however, I don't want to do it that way. I might have 2-3 icons on the right; then what?

    let image = UIImage(named: "some_logo")!
    let imageSize = CGSizeMake(60, 42)
    let marginX: CGFloat = (self.navigationController!.navigationBar.frame.size.width / 2) - (imageSize.width / 2)
    let imageView = UIImageView(frame: CGRect(x: marginX, y: 0, width: imageSize.width, height: imageSize.height))
    imageView.image = image
    imageView.contentMode = .ScaleAspectFit

    self.navigationItem.titleView = imageView

I prefer swift but obj-c solutions are welcomed as well.

Any pointers appreciated.

This app has nothing to do with KIA, it is just some logo I got off the google search, searching "some logo".

Answer 1

I created an extension for solving this problem using the hint of @idrougge.

In order to center the title view image no matter what buttons you have, a content view is set as title view, then the image view is added as child of the content view. Finally, using constraints the image view is aligned inside its parent (content view).

import UIKit

extension UIViewController {

    func addLogoToNavigationBarItem() {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.heightAnchor.constraint(equalToConstant: <your_height>).isActive = true
        imageView.contentMode = .scaleAspectFit
        imageView.image = <your_image>
        //imageView.backgroundColor = .lightGray

        // In order to center the title view image no matter what buttons there are, do not set the
        // image view as title view, because it doesn't work. If there is only one button, the image
        // will not be aligned. Instead, a content view is set as title view, then the image view is
        // added as child of the content view. Finally, using constraints the image view is aligned
        // inside its parent.
        let contentView = UIView()
        self.navigationItem.titleView = contentView
        self.navigationItem.titleView?.addSubview(imageView)
        imageView.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
        imageView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
    }
}

I hope this helps someone,

Xavi

Answer 2

The easiest way of doing this is in Interface Builder.

Simply drag a 'NavigationItem' from the object library and place it into your ViewController, then place a UIView where the title goes (ensure you set the background to 'clear') Then place a UIImageView into that view and set the image in the Attributes Inspector to your required image. Scale your UIImage accordingly and set your your constraints accordingly.

Answer 3

I have faced the same issue. Then i tried one code shown below.

 override func viewDidAppear(animated: Bool) {

    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 150, height: 40))
    imageView.contentMode = .ScaleAspectFit

    let image = UIImage(named: "googlePlus")
    imageView.image = image

    navigationItem.titleView = imageView
  }

This Code working fine when i tested with Left & Right Bar Button.

But in my previous code there is no Right Bar Button.

So the image is moving towards right.

For solving this i created a Right Bar Button & change the Tint color to clear color.

So everything seems to be working fine. This is one Temporary Solution for your problem.

Answer 4

As question heading stated "Swift / Obj-C" so I am sharing code of Obj-C :

UIImageView *titleImage = (UIImageView *)self.navigationItem.titleView;
titleImage = [[UIImageView alloc]initWithFrame:CGRectMake((self.navigationController.navigationBar.frame.size.width/2) - (100/2), 0, 100,self.navigationController.navigationBar.frame.size.height)];

//setting the image for UIImageView
titleImage.image = [UIImage imageNamed:@"someLogo"];
titleImage.contentMode = UIViewContentModeCenter;
self.navigationItem.titleView = titleImage;

Answer 5

What about setting the center of your image equals to the navigationBar.center instead of setting a margin?

//assuming we already have our navigationController
let myNicelLogoWidth = 100
let myNiceLogoHeight = 50
//start positioning your logo at 0.0, 0.0
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: myNicelLogoWidth, height: myNiceLogoHeight))
imageView.contentMode = .scaleAspectFit
imageView.center = navigationBar.center //the put your image at the center

let image = UIImage(named: "myNiceLogoImage")
imageView.image = image


navigationItem.titleView = imageView