CODEWITHSUNDEEP
objective-cuiimageretina-display
Neil Galiaskarov
Neil Galiaskarov

Reputation: 5073

How to correctly show @2x retina images

  I'm using Xcode 4.5.2, the app is targeting iOS 6.0. In my application, I am having trouble with showing iPad Retina images. I know I have to use the @2x~ipad.png extension in order to get them to properly show and I do that. My images are named according so they are all named the same besides the extension for each device. Here is how I named it.

enter image description here

However, 

 NSString *name=@"appearanceConnection.png";
 //NSString *name=@"appearanceConnection"; //I did check this
 //I did check the target
 UIImage *image = [UIImage imageNamed:name];
 NSLog(@"%f",image.size.width);

shows me the width of @1x image.

If i try to set proper image name manually:

  if ([[UIScreen mainScreen] respondsToSelector:@selector(displayLinkWithTarget:selector:)] &&
            ([UIScreen mainScreen].scale == 2.0)) {
            // Retina display
            name=@"appearanceConnection@2x~ipad.png";

            NSLog(@"retina");
        }
        else
        {
            name=@"appearanceConnection.png";
            NSLog(@"non-retina");
        }
     UIImage *image = [UIImage imageNamed:name];
     NSLog(@"%f",image.size.width);

proper @2x picked and then it scaled by 2.0 when I'm adding it to view.

I cleaned/rebuild my project many times, I reset IOS simulator settings, no result.
What am I doing wrong?

update:
non-retina

enter image description here

retina:

NSLog(@"%f", image.scale)

after imageNamed method gives me 1.0

enter image description here

UPDATE 2: I'm trying to optimize my animation appearance, so I want to load one big image once and cut it by frames. Firstly, I load big image (@2x or 1@x), then using cycle

for (int i = 0; i<numberOfFrames; i++)
    {
        CGImageRef imageRef = CGImageCreateWithImageInRect(image.CGImage,
                                                           CGRectMake(i*width, 0.0f, width, height));
        UIImage *animationImage = [UIImage imageWithCGImage:imageRef];

        if (isFlip)
        {
            [animationImages insertObject:animationImage atIndex:0];
        }
        else
        {
            [animationImages addObject:animationImage];
        }

        CGImageRelease(imageRef);
    }

i cut this big image and create animation. width and height are multiplied by 2 if it is retina display.

Maybe here is a caveat?

UIImage *animationImage = [UIImage imageWithCGImage:imageRef];

returns me image scaled twice?

however, if I scale (0.5,0.5) UIImageView which is initialized by this image it fits. Have any idea why scaled twice?

Upvotes: 0

Views: 1259

Answers (1)

Fonix
Fonix

Reputation: 11597

the retina and non retina images will have the same width and height when used as a UIImage or something similar, think of it as on retina displays the DPI of the image is doubled, and not the width or height.

this is to keep things transparent when coding for retina and non retina.

Upvotes: 3

Related Questions