Asset Catalog UIImage Incorrectly Sized based on Device and Orientation

I'm trying to display a background image to the first view that I show in my app on launch that is the same image shown as the LaunchImage.

I have the LaunchImage asset catalog all setup correctly and it shows correctly at launch. I'm using the iPad simulator and have it in Landscape orientation.

However my background image is not only the wrong orientation but it's the wrong size.

Consider the following bit of code...

[self.backgroundImageView setImage:[UIImage imageNamed:@"LaunchImage"]];

NSLog(@"Image size should be: %@", [[UIScreen mainScreen] scale] == 1 ? @"1024x768":@"2048x1136");
NSLog(@"Image size is:%@", NSStringFromCGSize(self.backgroundImageView.image.size));

The first NSLog correctly states 1024x768.

However the second NSLog states 320x480. This is just simply the first image in the asset catalog which is the iPhone LaunchImage.

Any ideas here?

UPDATE:

I've seen numerous answers online about the naming convention of images and the first answer below has been kind of enough to list all these out. It's a great list for anyone needing these.

However, the point of an asset-catalog is to store all your images for each device, iOS6 or 7, retina or not, and for which orientation. If one still needs to go and check what device, orientation, whether it's retina or not each time an image is displayed, then what's the point of an asset catalog? I thought that was one of the reason for them.

I should note that this was working as I'm expecting to work in the past in my app. I then changed the images in the asset-catalog and all was still working. However I decided to change the images back to the originals and this is where everything broke. I've tried cleaning the build and even deleting the derived data and restarting xCode. No go.

I do have the correct files in the asset-catalog available. However you'll notice that they are not saved with the filenames as described below in the answer from Alexander Kostiev as you would expect. Instead they are named with dimensions in them. But they are referenced correctly in the json as I'll post now next...

{
  "images" : [
    {
      "orientation" : "portrait",
      "idiom" : "iphone",
      "extent" : "full-screen",
      "minimum-system-version" : "7.0",
      "filename" : "AppImage@2x320x480.png",
      "scale" : "2x"
    },
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "retina4",
      "filename" : "AppImage@2x320x568.png",
      "minimum-system-version" : "7.0",
      "orientation" : "portrait",
      "scale" : "2x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "ipad",
      "extent" : "full-screen",
      "minimum-system-version" : "7.0",
      "filename" : "AppImage768x1024.png",
      "scale" : "1x"
    },
    {
      "orientation" : "landscape",
      "idiom" : "ipad",
      "extent" : "full-screen",
      "minimum-system-version" : "7.0",
      "filename" : "AppImage1024x768.png",
      "scale" : "1x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "ipad",
      "extent" : "full-screen",
      "minimum-system-version" : "7.0",
      "filename" : "AppImage@2x768x1024.png",
      "scale" : "2x"
    },
    {
      "orientation" : "landscape",
      "idiom" : "ipad",
      "extent" : "full-screen",
      "minimum-system-version" : "7.0",
      "filename" : "AppImage@2x1024x768.png",
      "scale" : "2x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "iphone",
      "extent" : "full-screen",
      "filename" : "AppImage320x480.png",
      "scale" : "1x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "iphone",
      "extent" : "full-screen",
      "filename" : "AppImage@2x320x480-1.png",
      "scale" : "2x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "iphone",
      "extent" : "full-screen",
      "filename" : "AppImage@2x320x568-1.png",
      "subtype" : "retina4",
      "scale" : "2x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "ipad",
      "extent" : "to-status-bar",
      "filename" : "AppImage768x1004.png",
      "scale" : "1x"
    },
    {
      "orientation" : "landscape",
      "idiom" : "ipad",
      "extent" : "to-status-bar",
      "filename" : "AppImage1024x748.png",
      "scale" : "1x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "ipad",
      "extent" : "to-status-bar",
      "filename" : "AppImage@2x768x1004.png",
      "scale" : "2x"
    },
    {
      "orientation" : "landscape",
      "idiom" : "ipad",
      "extent" : "to-status-bar",
      "filename" : "AppImage@2x1024x748.png",
      "scale" : "2x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

As you can see in the fourth item from the top is the json for the iPad without retina display in a portrait layout. I've confirmed this file exists in the asset-catalog directory and it is in fact the right image as I view in preview.

Any further thoughts?

UPDATE 2:

I've also now tried adding files named background-Landscape~ipad.png and background-Portrait~ipad.png. I now use the following to load the image...

    [self.backgroundImageView setImage:[UIImage imageNamed:@"background"]];

I've tried background and background.png. However no image is displayed and the image.size is 0,0. ie. UIImage imageNamed gave me a nil image.

I'm now at a completely loss.

Answers


This is the complete list of the LaunchImage's:

  • LaunchImage-568h@2x.png
  • LaunchImage-700-568h@2x.png
  • LaunchImage-700-Landscape@2x.png
  • LaunchImage-700-Landscape.png
  • LaunchImage-700-Portrait@2x.png
  • LaunchImage-700-Portrait.png
  • LaunchImage-700@2x.png
  • LaunchImage-Landscape@2x.png
  • LaunchImage-Landscape.png
  • LaunchImage-Portrait@2x.png
  • LaunchImage-Portrait.png
  • LaunchImage.png
  • LaunchImage@2x.png

So, possibly, you need to check the orientation first and get the proper image. Please consider using something like

UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation];
if (UIInterfaceOrientationIsPortrait(orientation)) {
    imageName = @"LaunchImage-Portrait";
} else {
    imageName = @"LaunchImage-Landscape";
}

We assume that all the launch images are set up properly in your Assets Catalog


Need Your Help

Managing user stories for a large project

project-management agile scrum user-stories

We are just starting on a pretty big project with lots of sub projects. we don't currently use any kind of named process but I am hoping to get some kind of agile/scrumlike process in by the back d...