Custom styling of UINavigationBar not working prop

Question

I am using this code to set custom background image for all UINavigationBars. The problem is that the final image does not appear to be retina size. I researched UINavigationBars are 640x88px. Thats exact dimensions of my UINavigationBar.png however I only see 320x44px on the iPhone Sim(retina) and my iphone 4 which is also retina.

The code that sets the image:

UIImage *background = [UIImage imageNamed:@"UINavigationBar.png"];
[[UINavigationBar appearance] setBackgroundImage:background forBarMetrics:UIBarMetricsDefault];

Here is a screenshot for illustration:

(the difference is there is no bottom dark line as in Photoshop. I can only see half of the image in the iPhone 5 Simulator (Retina))

My question is why this happens and how can I fix it? Thanks.

Answer 1

You need to have two .png files with different size and same name, but with @2x addition in the retina display file.
For example,

File 1 for regular display support:
size- 320x44,
name- UINavigationBar.png

File 2 for retina display support:
size- 640x88,
name- [e-mail]

In your code you always use UINavigationBar.png, the device will automatically know witch file to use, according to the hardware.