How to put an image in the center of navigationBar of a UIViewController?
First we have to create a view which have size as same as navigation bar then add an image view and set set its frame as it looks center in the navigation bar.It works for all ios version and it automatically takes frame size as per device (retina or normal) and works like magic.
UIView *headerView = [[UIView alloc] init];
headerView.frame = CGRectMake(0, 0, 320, 44);
UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Header.png"]];
imgView.frame = CGRectMake(75, 0, 150, 44);
imgView.contentMode = UIViewContentModeScaleAspectFit;
[headerView addSubview:imgView];
navigationCtrl.navigationBar.topItem.titleView = headerView;
[headerView release];
[imgView release];
Swift:
var logoImage:UIImage = UIImage(named: "logo_text")!
self.navigationItem.titleView = UIImageView(image: logoImage)
The UINavigationController
manages the navigation bar by looking at the navigationItem
property of the top-most view controller on the navigation stack. So to change the view to a logo, you need to set this up in the view controller that uses the logo (i.e. the root view controller or another one that gets pushed on the stack).
Do something like this in viewDidLoad
of your view controller:
UIImage* logoImage = [UIImage imageNamed:@"logo.png"];
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:logoImage];
In your case, you are setting the wrong navigation item:
// Oops...
self.navigationController.navigationItem.titleView = logoView;
// Should be this:
self.navigationItem.titleView = logoView;
extension UINavigationController {
func addLogoImage(image: UIImage, navItem: UINavigationItem) {
let imageView = UIImageView(image: image)
imageView.contentMode = .scaleAspectFit
imageView.translatesAutoresizingMaskIntoConstraints = false
let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 44))
view.addSubview(imageView)
navItem.titleView = view
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
imageView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
imageView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
view.heightAnchor.constraint(equalTo: navigationBar.heightAnchor).isActive = true
view.centerXAnchor.constraint(equalTo: navigationBar.centerXAnchor).isActive = true
view.centerYAnchor.constraint(equalTo: navigationBar.centerYAnchor).isActive = true
}
}
Here's what I'm using.
Of course, you might need a bit more constraints, so as to not clash with the right and left bar button items.