Goal C: How to Maintain Resolution / Image Quality in Navigation Buttons and Tabs

Question

I am trying to put an image in the right button of a navigation element through 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]; 

Image I have a size of 52 X 52 pixels. If I simply add the image to the button without resizing, I get a disproportionate display, as shown below.

However, if I try to compress the image before adding to the button (18 X 18 pixels), the image will look blurry on the iPhone's retina screen

This also happens for tab stripes to display the retina of the iPhone.

Can I use a large image on a button or tab without getting a disproportionate display? Or is there a way to maintain image resolution?

Answer 1

You need to create two graphic objects: one in the normal size, doubled for the retina with the addition of @ 2x to the file name. You can learn more:

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

Answer 2

Check the Edge tabs for the image in the interface builder. You can adjust the values ​​left to right to resize the larger image in UIButton.

Equivalent to UIbutton [uiButton setImageEdgeInsets:<#(UIEdgeInsets)#>]