Objective C: How to maintain image resolution/quality in navigation buttons and tab bars

Question

I am trying to put an image to the navigation item's right button via the following code

//Add image to right bar button in navigation bar
UIBarButtonItem *rightBarButton = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"refresh.png"] style:UIBarButtonItemStyleBordered target:self action:@selector(getData)];

self.navigationItem.rightBarButtonItem = rightBarButton;
[rightBarButton release];

The image I has a dimension of 52 X 52 pixels. If I just add the image into the button without changing the size, I will get a unproportionate display as seen below

However, if I try to shrink the image before adding to the button (18 X 18 pixels), the image will look blurry on the iPhone retina display

This is also happening for the tab bars for the iPhone retina display.

Is there any way to use a large image in the button or tab without getting a disproportionate display? Or is there a way to maintain the resolution of the image?

Answer 1

You need to create two graphic assets, one in normal size other doubled for retina with @2x added to filename. You can read more at:

https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/SupportingHiResScreensInViews/SupportingHiResScreensInViews.html#//apple_ref/doc/uid/TP40010156-CH15-SW1