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.
6 comments
Trackback e pingback
-
Default.png launch image on iPhone 5 « My iOS development blog
[...] more elegant solution to Mrs Priya Rajagopal blog, here. Share this:TwitterFacebookLike this:LikeBe the first to like this. This entry… -
Default.png launch image on iPhone 5 | My iOS development blog
[...] more elegant solution to Mrs Priya Rajagopal blog, here. Share this:Like this:Like [...]
Nixe Extension but better would be:
https://gist.github.com/3782351
Thanks. Agree- the one on github is better if you are dealing with images of different types.
I recently put this addon on github: https://github.com/Orion98MC/UIImage_DeviceBound_Category
Feedback is most welcomed.
This assumes that you have -568h images for all your images. This will work for all pngs and if you dont need a -568 for a particular image it will pick up the @2x version.
+ (UIImage*)imageNamedForDevice:(NSString*)name {
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone && [UIScreen mainScreen].bounds.size.height != 480)
{
UIImage *tallImage = [UIImage imageNamed:[NSString stringWithFormat:@”%@-568h@2x”, name]];
if(tallImage)
{
return tallImage;
}
}
return [UIImage imageNamed:[NSString stringWithFormat:@”%@”, name]];
}