How to add image in UINavigationBar in IPhone app

Question

In my app, i want to add image(logo) in Navigation bar. I am working on XCode 4.2 and iOS 5.

I know UINavigationBar, UIToolBar has been changed in iOS 5. So iOS 4.2 UINavigationBar code won't work in iOS 5.

I want to support display image in UINavigationBar in both 4.2 and 5 version.

I want to be display image in UINavigationBar like as in below screenshot.

Please help in this regards and if there is any sample code means its very helpful to me.

Thanks!!!

Solution 1

One way to do this is to use UINavigationItem.titleView and UINavigationItem.rightBarButtonItem. Like this :

viewController.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"yourimage.png"]];
UIBarButtonItem * item = [[UIBarButtonItem alloc] initWithCustomView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"yourimage2.jpg"]]];    
viewController.navigationItem.rightBarButtonItem = item;    

Here I am using UIImageView as custom view, but it can be UIButton with custom image.

Solution 2

Another way without using a viewController

// Create your image
UIImage *image = [UIImage imageNamed: @"logo.png"];
UIImageView *imageview = [[UIImageView alloc] initWithImage: image];

// set the image view to the title view
self.navigationItem.titleView = imageview;

Solution 3

Swift version: You can create a protocol extension for using the function in your view controllers

protocol Customizable {
    var navigationItem: UINavigationItem { get }
}

extension Customizable {
    func setNavBarLogo() {

        let logo = UIImage(named: "logo")
        let logoImageView = UIImageView(image: logo)

        self.navigationItem.titleView = logoImageView
    }
}

Comments

[Illep]

Will this work for both iOS4 and 5 ? and is it the clingle Logo you are trying to add and not the background image for UINavigationbar ?

[barley]

It does on Simulator at least. And I don't see any reason it should not. I didn't understand your second question.

[Martin Reichl]

thanks. but I noticed the item object is not released in your example.

[Martin Reichl]

the image view is also leaked here.

[barley]

I am using ARC... :) @MartinReichl

[Martin Reichl]

The author stated that the solution should work also in iOS 4, so I did not thought about ARC :)

[barley]

You can use ARC for iOS 4 and above, although weak reference is not supported in ios4.

[Maciej Swic]

Just a not, you shouldnt say @"youtimage.png". @"yourimage" will suffice, iOS will figure out the correct image to load.

[rigdonmr]

is there a way to automatically scale it to fit the navbar?