Background image of UINavigationBar doesn't size correctly after orientation change on iPhone 5

Question

Long title for hopefully a small problem.

I have a UINavigationBar with a custom background image. My app will support landscape orientation as well as portrait. Landscape works well in the simulator for retina 3 inch and non-retina screens. However, on the retina 4 inch screen, the background image is displayed twice its size in landscape mode.

Here's the relevant code snippet from my custom navigation controller's init-method:

[self.navigationBar setBackgroundImage:[UIImage imageNamed:@"navbar-bg.png"] forBarMetrics:UIBarMetricsDefault];        
if (IS_IPHONE_5)
{
    [self.navigationBar setBackgroundImage:[UIImage imageNamed:@"navbar-bg-landscape-iphone5.png"] forBarMetrics:UIBarMetricsLandscapePhone];
}
else
{
    [self.navigationBar setBackgroundImage:[UIImage imageNamed:@"navbar-bg-landscape.png"] forBarMetrics:UIBarMetricsLandscapePhone];
}

IS_IPHONE_5 is a macro defined as:

#define WIDTH_IPHONE_5 568
#define IS_IPHONE_5 ([[UIScreen mainScreen] bounds].size.height == WIDTH_IPHONE_5)

Here 2 screen fragments that might explain things more clearly. When the app opens in portrait mode, everything is fine:

All blows up when changing to landscape mode:

The image sizes (in pixels, width x height) for the landscape version of the background image are:

• navbar-bg-landscape.png: 480x44
• [email protected]: 960x88
• navbar-bg-landscape-iphone5.png: 1136x88

Or could it perhaps be a simulator only problem? (I don't have an actual iPhone 5 right now)

Answer 1

I believe your navbar-bg-landscape-iphone5.png should actually be called [email protected] and that you should continue to reference it as navbar-bg-landscape-iphone5.png in your code. Because the iPhone 5 has a retina display, iOS will look for the @2x version and use it. If it doesn't find it, it will use the version you have mentioned and then scale it up by 2x. To avoid the 2x scale up by iOS, give it an @2x version.