iOS Add image in the title

[Binju]

Usually v use self.title=@"mytitle" to add a title for a tableview.

I need to add an image rather than the text.Is it possible ?how?

 

[boyplunder]

Try this.

@implementation UINavigationBar (Background)
- (void)drawRect:(CGRect)rect {
	UIImage *image = [UIImage imageNamed:@"NavBar.png"];
	[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

This is my first attempt at this and haven't tried to add it to anything more than the standard NavBar. I have this in the AppDelegate.m in my test file. If you use it in any other way, please return the favour and share any alternatives for other views.

 

[robbieduncan]

Personally I'd just substitute in a view for the documented titleView property of the UINavigationItem. So to add an image instead of the normal title text set that property to a UIImageView. For an image and text create a UIView, add a UIImageView and UILabel as subviews and use that as the title...

 

[boyplunder]

Personally I'd just substitute in a view for the documented titleView property of the UINavigationItem. So to add an image instead of the normal title text set that property to a UIImageView. For an image and text create a UIView, add a UIImageView and UILabel as subviews and use that as the title...

That's so well outlined, even I understood it!
Do you see my approach as being any less of a solution. It doesn't seem to present any problems and works without issue. Memory or otherwise. The one nice touch I have found is that the colour of the underlying NavBar in IB shows through any buttons you add to the bar.

 

[robbieduncan]

The one nice touch I have found is that the colour of the underlying NavBar in IB shows through any buttons you add to the bar.

Indeed. And of you use a UILabel you can use any font and text colour you want. I've done this on an app I am working on as I want a yellow navbar with dark green text.

Note that if you so this it will look wrong unless you use the shadow property of the UILabel to make the text look "pushed in". For light text (like the white default) draw the shadow 1px above the text. For dark text draw a white shadow 1px below...

 

[dejo]

Do you see my approach as being any less of a solution. It doesn't seem to present any problems and works without issue. Memory or otherwise. The one nice touch I have found is that the colour of the underlying NavBar in IB shows through any buttons you add to the bar.

I wouldn't say "less". Each approach has tradeoffs. For example, I'm not sure the drawRect approach easily handles resizing upon rotation.

 

[boyplunder]

For example, I'm not sure the drawRect approach easily handles resizing upon rotation.

That's a very good point. I only saw it in a portrait use. The png means the bar could be any pattern you want in the 44 x 320 px. I did wonder if you could add a conditional or random code for that 'je ne sais quoi'.

Using a png for the bar means it might be limited to a portrait view only, although I wonder if you could use a wide png and when it rotates...

 

[robbieduncan]

Looking at your code and my suggestion I think we are doing different things. You are replacing the standard navigation bar background with an image. I am replacing the title text only with an image...

 

[boyplunder]

That same thing just dawned on me. I am keeping the text and buttons, but the png replaces the background only.

I just tried rotating it in simulator and it just stretches it out widthwise. Fine for the pattern I have, but not if you have a photo or text, for instance. Very fluid and no difference to the normal bar.