How to display high resolution images in iOS4 using UIImageView

Question

Hello All,

I wanted to know how should I use high res images in iOS4 sdk using UIImaageView.

blackBox = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"alert_bg.png"]];
blackBox.frame = CGRectMake(98.0f, 310.0f, 573.0f, 177.0f);

When I use this code I get strange results... the image does not get the correct size. It is looking very big on iPhone 4 screen.

Should I use 326 ppi images?

I have read http://developer.apple.com/library/ios/#documentation/iphone/conceptual/iphoneosprogrammingguide/SupportingResolutionIndependence/SupportingResolutionIndependence.html this but I am very confuse.

Thanks

Saurabh

Answer 1

The key thing to understand about supporting the Retina Display is that, in your code, the screen is always 320x480. You don't need to double the resolution of anything but your image resources themselves. In this case, you just need to put two resources in your app bundle: an alert_bg.png that fits on a 320x480 screen—in this case, I'd guess that'd be 286x88—and an [email protected], exactly double the size of the other, that fits on a 640x960 one. If you ask UIKit for [UIImage imageNamed:@"alert_bg"], it'll automatically pick the correct-resolution resource for the current screen.

Answer 2

You should provide a 480x320 pixels image for the 3G, 3GS and original iPhone, named "alert_bg.png" and another 960x640 px one, named "[email protected]" for the iPhone 4.

The "@2x" in the name is automatically added by iOS and loads the image automatically if it finds it, instead of the standard resolution one.