Retina & non-retina compatible UIImage stacking and positioning

Question

I often need to position and stack two UIImages into an UIView. For example, placing a picture frame around (behind) a photo, and then displaying it. Specifying the position by modifying the image's frame will not work with both Retina and non-retina devices because the hardcoded frame values will not scale.

For example, if I have a photo frame who's image is 56x56 (retina) and the actual image is 52x52 (retina), it needs to be placed at CGRectMake(2, 2, 54, 54) on top of the photo frame. But if the user is on non-retina this will fail since those values will be incorrect (they're now CGRectMake(1, 1, 27, 27)).

What is the correct way for resolution-safe image processing? Is there a way to combine two images (each with regular and @2x.pngs) that will display correctly on either screen type?

Answer 1

You can use UIScreen scale property. It's a readonly property. In devices prior to iPhone 4 (non-retina displays) this value will be 1.0, but with retina displays the value is 2.0. So you can store this property to a local variable, say called CGFloat scaleFactor and multiply it with the values above:

CGFloat scaleFactor=[[UIScreen mainscreen] scale];
... = CGRectMake(1.0*scalefactor,1.0*scaleFactor,27.0*scaleFactor,27.0*scaleFactor);