22

how to display an image in the navigation bar of an iPhone application? (say, right after the title)

ebaccount
  • 5,051
  • 11
  • 43
  • 47

7 Answers7

36

Here's how to have the image centered in the NavBar.

UIImage *image = [UIImage imageNamed: @"NavBarImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage: image];

self.navigationItem.titleView = imageView;

[imageView release];

This code is actually contained with the Apple source for the NavBar and can be found at the iPhone Developer Center at Apple. The source shows you various ways to manipulate both the StatusBar & NavBar.

sth
  • 222,467
  • 53
  • 283
  • 367
Magnatek
  • 381
  • 3
  • 2
  • 1
    You may want to set the size of the imageView prior to setting it the titleView. The origin parameters don't matter -- it'll be centered automatically. The second two numbers are width and height. `imageView.frame = CGRectMake(0, 0, 200, 30);` – Mickey Ristroph Nov 16 '09 at 03:58
  • 1
    this doesn't stretch to the maximum extent the best answer i've found is http://stackoverflow.com/questions/979750/background-image-for-navigation-view-iphone – LolaRun May 09 '11 at 10:20
  • In addition to the solutions provided by Magnatek and Mickey, I set the `UIImageView`'s content mode to AspectFill. It looks great, thx. – rjgonzo Dec 19 '11 at 15:53
9

I haven't tested this but as UINavigationBar is a view you can add subViews to it.

UIImage* myImage = [UIImage imageNamed:@"Myimage.png"];
UIImageView* myImageView = [[UIImageView alloc] initWithImage:myImage];
myImageView.frame.origin.x = 30.0; // You will have to find suitable values for the origin
myImageView.frame.origin.y = 5.0;

[myTabbar addSubView:myImageView];
[myImageView release];

You can use things like the backItem property to calculate the position of your image view.

mixel
  • 25,177
  • 13
  • 126
  • 165
Rog
  • 17,070
  • 9
  • 50
  • 73
  • Hello, Could you let me know how can I get access to my UINavigationBar? Thanks. – ebaccount May 12 '09 at 18:01
  • Yes, it works. It shows the image at the left-top corner of the navigation bar. I got the access by UINavigationBar *navBar = [self.navigationController navigationBar]; However, I could not control the x, y position of the image. No matter what values I set at myImageView.frame.origin.x and y it still shows at the top left corner. Could you let me know how can I set the position – ebaccount May 12 '09 at 19:43
  • Can you show the code so I can see exactly what you are doing? Remember that your images frame is relative to the UITabbar's frame so you should check that first. – Rog May 13 '09 at 15:31
6

If you want the image at the right of the nav bar, you can define it as a custom button with no action when presed, like this

UIButton* fakeButton = (UIButton *) [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"yourimage.png"]];
UIBarButtonItem *fakeButtonItem = [[UIBarButtonItem alloc] initWithCustomView:fakeButton];
self.navigationItem.rightBarButtonItem = fakeButtonItem;
[fakeButtonItem release];
[fakeButton release];
Donal O'Danachair
  • 1,470
  • 2
  • 11
  • 6
  • Yep, I think this one actually answers the original question (having the image to the right of the title). That's just what I needed, too! – Darren Oster Sep 03 '10 at 03:16
3

Simply Place that code in - (void)viewWillAppear:(BOOL)animated; so it'll work fine and add one image having size 320x40 named Top Bar

UIImage *image = [UIImage imageNamed: @"TopBar.png"];
[self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
Mick MacCallum
  • 129,200
  • 40
  • 280
  • 281
Neeraj Sahu
  • 31
  • 2
2

the navigation bar has a property called title view - set this to the image you like. Since the titleView overwrites the title of the nav bar you have to include the desired title in the image file. Still set the title to what you want so it appears on the back button when you push a view Controller

zpesk
  • 4,343
  • 7
  • 39
  • 61
  • I don't think you would want to do this. Instead of making a simple 32x32 image (for example) next to text (extremely easy to draw), you're creating a much bigger image. But yes, this is definitely an option. – David McGraw May 10 '09 at 00:35
  • I have drawn an image 23x23, but do not know how to show it in the navigation bar. Could you let us know? – ebaccount May 10 '09 at 00:52
  • 2
    You don't have to replace title view, you can create a UIImageView, load your icon image, and add it as a child of the title view. Use the frame property of your UIImageView to position it where you want it. – Don McCaughey May 10 '09 at 01:12
1

I encountered the same problem.Found out the best solution

 [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"background_image.png"] forBarMetrics:UIBarMetricsDefault];

Hope this would help....

Suraj K Thomas
  • 5,773
  • 4
  • 52
  • 64
0

Just write your own navigation bar. Therefore you have to disable the Navigation Bar fist:

Disable the top bar in the interface builder by selecting your Navigation Controller in your Storyboard: Attributes Inspector -> Simulated Metrics -> Top Bar: select None

Afterwards you can add any HeaderView you like...

UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, sFrame.size.width, 100)];
UIColor *background = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"header_image.png"]];
self.headerView.backgroundColor = background;

// ...add buttons and labels

[self.view addSubview:headerView];
Chris
  • 4,403
  • 4
  • 42
  • 54