Custom background for UINavigationBar in landscape mode

StackOverflow https://stackoverflow.com/questions/380507

  •  22-08-2019
  •  | 
  •  

Question

I am adding a custom background for my UINavigationBar. It works fine as long as the phone is in portrait mode. As soon as I switch to landscape mode, half the bar appears blue (the default navbar color) and half of it has my image

How can I stretch the image for landscape mode and make it small again for portrait mode?

Thanks

Solution
Incase anyone is looking for an answer to how to add an image to navigation bar - here goes

UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 480.0, 44.0)];
[imgView setImage:[UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"navbar_landscape" ofType:@"png"]]];
[navigationController.navigationBar addSubview:imgView];
[imgView release];
Was it helpful?

Solution

You probably need to set the autoresizingMask of your background image view; try using UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight

OTHER TIPS

In both screen orientation modes it's much better to use

[navigationController.navigationBar insertSubview:imgView atIndex:0];

This puts image view under all other views and all the default navigation bar elements (title, standard buttons) work OK.

After a bit of research and trail and error, I found a work around, that will not replace the navbar when you enter the movie playback mode. Hopeefully this does not cause problems with app approval, but based on this post, I think it should be fine:

http://developer.apple.com/iphone/library/qa/qa2009/qa1637.html

@implementation UINavigationBar (UINavigationBarCategory)

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    if([self isMemberOfClass: [UINavigationBar class]]){
        UIImage *image = [UIImage imageNamed:@"navBarBackground.png"];
        CGContextClip(ctx);
        CGContextTranslateCTM(ctx, 0, image.size.height);
        CGContextScaleCTM(ctx, 1.0, -1.0);
        CGContextDrawImage(ctx, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage);
    }else{
        [super drawLayer:layer inContext:ctx];
    }
}

@end

The solution Ben gave did solve the problem but it stretches the image in landscape mode. I ended up creating two images- one for landscape and other for the portrait mode. I then added code in shouldAutoRotate to change the navbar image based on the orientation

You can change the image for both portrait and landscape orientations by supplying different images for different orientations by checking the frame size of that UINavigation bar instance:

- (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 this complete demo Xcode project on customizing the appearance of UINavigationBar might be helpful. It also includes @2x versions of background images to support retina displays on iPhone 4 devices.

Try the simpler method of [UIImage imageNamed:@"navbar_landscape.png"] since a UI element is exactly what imageNamed: is intended for, as ljonesATL shows.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top