CODEWITHSUNDEEP
iphoneiosobjective-cuiimageview
hfz
hfz

Reputation: 337

Why does my retina-display-specific image show up bigger than the screen?

I am developing a wallpaper app, made solely for retina display iPhones. I have a 640 x 960 pixels sized image, legends.jpg, that I want to display in a view, as a preview. Here's my code in loadView:

- (void)loadView
{

    // Init the main view first.
    UIView *wallpaperContainerView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    UIImage *wallpaper = [UIImage imageNamed:@"legends.jpg"];

    UIImageView *wallpaperView = [[UIImageView alloc] initWithImage:wallpaper];

    [wallpaperContainerView addSubview:wallpaperView];

    [self setView:wallpaperContainerView]; 
}

My questions are:

  1. When I run it on the Simulator (iPhone Retina 3.5 inch), the image looks bigger than the entire screen, only showing the top left portion of it. Why is this the case, when the 3.5inch iPhones resolution is 640x960, similar with my image's size? What should I add to my code to make the image fit the screen?
  2. If I'm only targeting retina display iPhones, should I append all my image file names with "@2x" and leave out the non "@2x" files?

Update

Thanks to the suggestions below, I created the legends.png (for non-retina) and [email protected] files. Then, I modified the *wallpaper initialization to:

UIImage *wallpaper = [UIImage imageNamed:@"legends"];

This completely solves my #1 question. So apparently using JPG causes this scaling confusion, while with PNG everything works fine.

Upvotes: 0

Views: 691

Answers (3)

LudoZik
LudoZik

Reputation: 917

Do not forget to manage Iphone 5 screens that have a height of 568.

Here is something that can be handy :

#define IS_PHONEPOD5() ([UIScreen mainScreen].bounds.size.height == 568.0f && 
[UIScreen mainScreen].scale == 2.f &&
 UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)

and 

- (void)viewDidLoad
{
    [super viewDidLoad];

        if(IS_PHONEPOD5())
        {
                self.imageView.image = [UIImage imageNamed:@"image-568h@2x"];
        }
        else
        {
                self.imageView.image = [UIImage imageNamed:@"image"];
        }
}

Upvotes: 1

lovethebomb
lovethebomb

Reputation: 293

You should always use @2x in the filename of the Retina version of your image.

And by the way, try to always use PNG format, as you won't have to bother in the future with filename extensions.

For instance, if you've got 2 files (normal and Retina with suffix @2x.png) you could simply write:

[UIImage imageNamed:@"legends"];

Upvotes: 1

Augustine P A
Augustine P A

Reputation: 5068

iPhone Retina screen is 3.5 inch but its resolution is double than non retina screens. So you have to include image resources for supporting both retina and non retina displays. Retina resource image name should have a suffix @2x. So include images with 320x480 (non retina) and 640x960 (retina) resolutions, your problem will get over.

Upvotes: 1

Related Questions