Adding background Image in UINavigationBar

Question

Is there a way to add an image in the background of UINavigationBar. There is no direct option through interface builder but I have seen apps implemented this thing.

Any help would be appreciated.

Thanks

score 2 · Answer 1 · answered Mar 16 '13 at 07:34

2

Use this code

        UIImage *backgroundImage = [UIImage imageNamed:@"strip.png"];
        [upnavbar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];

this wil work.

answered Mar 16 '13 at 07:34

Nithinbemitk

2,710
4
24
27

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

Create a UIView and add it as a subview.

Edit: You can now use setBackgroundImage:forBarMetrics:. Source: https://stackoverflow.com/a/7765102/313875

edited May 23 '17 at 12:30

Community

1
1

answered Jul 22 '10 at 07:55

jrtc27

8,496
3
36
68

2

Updated to reflect the fact that this is no longer the way of doing it. – jrtc27 Jan 22 '15 at 17:13
Great to see someone keeping their answers up to date. Thanks! – Ashley Mills Jan 22 '15 at 17:14

score 0 · Answer 3 · answered Jul 22 '10 at 08:24

0

Just add your background as a subview, as jrtc27 suggested and change the tint color according your needs.

answered Jul 22 '10 at 08:24

nacho4d

43,720
45
157
240

score 0 · Answer 4 · edited Jan 22 '15 at 13:48

0

You can also override the drawRect function.

@implementation UINavigationBar (UINavigationBarCustom)

- (void)drawRect:(CGRect)rect {

    UIImage *image = [UIImage imageNamed:@"nav_bar_logo.png"];
    [image drawInRect:rect];
}

@end

edited Jan 22 '15 at 13:48

Ashley Mills

50,474
16
129
160

answered Jul 22 '10 at 08:31

Charter

783
4
6

score 0 · Answer 5 · answered Feb 13 '11 at 10:12

You can also override the drawLayer:inContext: method in a UINavigationBar category class. Inside the drawLayer:inContext: method, you can draw the background image you want to use. You can also use different sized images for portrait and landscape orientations if you'd like to.

- (void) drawLayer:(CALayer *)layer inContext:(CGContextRef)context
{
    if ([self isMemberOfClass:[UINavigationBar class]] == NO) {
        return;
    }

    UIImage *image = (self.frame.size.width > 320) ?
                        [UINavigationBar bgImageLandscape] : [UINavigationBar bgImagePortrait];
    CGContextClip(context);
    CGContextTranslateCTM(context, 0, image.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextDrawImage(context, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage);
}

And as a complete demo Xcode project on customizing the appearance of UINavigationBar this and this might be helpful.

score 0 · Answer 6 · answered Apr 24 '11 at 23:50

I recently wrote an article about customization of background for UINavigatioBar and UIToolbar. You can find a code sample and categories for seamless integration of this functionality in your app by following link — http://leonov.co/2011/04/uinavigationbar-and-uitoolbar-customization-ultimate-solution/

Adding background Image in UINavigationBar

6 Answers6