Archive for September 2012 | Monthly archive page
Supporting Tall Retina Images in iPhone apps
If you have an iPhone app or are developing one, with the launch of iPhone5 , you need to ensure that your images scale to support the new taller retina display (640X1136).
In case of the launch image, naming the new launch with the suffix "-568h@2x" (e.g.. Default-568h@2x) will ensure that the system picks up the right launch image for the iPhone5.
However, just adding the "-568h@2x" to the new images is not sufficient to have the system pick the right images for the tall retina display. Here is a very simple category on UIImage that can be used to return the right image. Note that in the category implementation, I assume that all the iPhone5 specific images are named with a suffix of "-568h@2x".
The "UIImage+iPhone5extension.h" Interface definition
|
1 2 3 4 |
<span style="color: #78492a;">#import </span><UIKit/UIKit.h> <span style="color: #bb2ca2;">@interface</span> UIImage (iPhone5extension) + (<span style="color: #703daa;">UIImage</span>*)imageNamedForDevice:(<span style="color: #703daa;">NSString</span>*)name; @end |
The "UIImage+iPhone5extension.m" file implementation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span style="color: #78492a;">#import </span>"UIImage+iPhone5extension.h" <span style="color: #bb2ca2;">@implementation</span> UIImage (iPhone5extension) + (<span style="color: #703daa;">UIImage</span>*)imageNamedForDevice:(<span style="color: #703daa;">NSString</span>*)name { <span style="color: #703daa;">UIImage</span> *returnImage = [<span style="color: #703daa;">UIImage</span> <span style="color: #3d1d81;">imageNamed</span>:[<span style="color: #703daa;">NSString</span> <span style="color: #3d1d81;">stringWithFormat</span>:<span style="color: #d12f1b;">@"%@"</span>, name]]; <span style="color: #bb2ca2;">if</span><span style="color: #000000;"> (</span><span style="color: #78492a;">UI_USER_INTERFACE_IDIOM</span><span style="color: #000000;">() == </span>UIUserInterfaceIdiomPhone<span style="color: #000000;">)</span> { <span style="color: #bb2ca2;">if</span><span style="color: #000000;"> (([</span>UIScreen<span style="color: #3d1d81;">mainScreen</span><span style="color: #000000;">].</span>bounds<span style="color: #000000;">.</span>size<span style="color: #000000;">.</span>height<span style="color: #000000;"> * [</span>UIScreen<span style="color: #3d1d81;">mainScreen</span><span style="color: #000000;">].</span>scale<span style="color: #000000;">) >=</span><span style="color: #272ad8;">1136</span><span style="color: #000000;">)</span> { <span style="color: #bb2ca2;">return</span> [<span style="color: #703daa;">UIImage</span> <span style="color: #3d1d81;">imageNamed</span>:[<span style="color: #703daa;">NSString</span> <span style="color: #3d1d81;">stringWithFormat</span>:<span style="color: #d12f1b;">@"%@-568h@2x"</span>, name]]; } } <span style="color: #bb2ca2;">return</span> returnImage; } @end |
Just include the above files in your project and replace relevant occurrences of [UIImage imageNamed:] call with [UIImage imageNamedForDevice:]. This would ensure that right image is picked up for non-retina,retina and tall retina versions of the resolution.