Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Interface Builder refuses to see "@2x" image files

WarpWarp Posts: 110Registered Users
edited April 2012 in iPhone SDK Development
I'm making some apps with support for all three major iOS platforms: iPhone&Co, iPhone4 and iPad. This support means, naturally, having larger-resolution images for the latter two platforms. Currently I'm making the apps universal, so the same app will run in all of them.

Since most of the double-resolution images of the iPhone4 version of the app can be used as-is in the iPad version (only things like background images have to be made separately for all three types of platform due to differing screen resolutions; the rest can be done with simply laying out the elements appropriately in the iPad as compared to the iPhone4, using the same element images for both), it would be a huge waste of space to make separate images for the iPhone4 and the iPad, when these images would be completely identical. Thus it only makes sense to reuse the same "@2x" images of the iPhone4 on the iPad version of the app.

This worked nicely for a while. However, at some point quite suddenly (I don't really know what happened), Interface Builder started to completely refuse to see any image files with a "@2x" in their name. It won't show them on the drop-down menu where you select an image (eg. for an UIImageView or UIButton), and if you write it manually, it will refuse to show it (only showing the question mark image symbolizing a missing image file). The image will show ok when running the app, but IB simply refuses to acknowledge the existence of such images. If I rename the image such that I remove the "@2x", then IB will accept it, but not if it has those characters.

As said, IB did see the "@2x" images at some point, but for some reason now it doesn't. (This is a bit of a mystery because I don't remember this happening after any kind of SDK upgrade or anything.)

This tells me that this is either 1) a bug in IB, or 2) intentional behavior, and the "@2x" images should not be "abused" in this way to create an iPad version of the app properly.

If hypothesis 2 is correct, then what is the proper way of using the same images in both the iPhone4 and iPad versions of the app? Duplicating the image files would be an enormous waste of space (the apps are quite graphics-heavy).

One "kludge" that comes to mind would be to create soft links for the images so that the iPad versions of the image files would just be soft links to the @2x iPhone4 images. However, I don't know if the bundling mechanism of the iPhone SDK supports soft links (you can't add them to the bundle in xcode, at least), or if it will simply make copies of the images (in which case each such image will end up being stored twice in the bundle).
Post edited by Warp on

Replies

  • GismoGismo Posts: 13Registered Users
    edited November 2010
    I'm currently facing the exact same problem - did you find a solution ??
  • bluemonkeybluemonkey Posts: 162Registered Users @ @
    edited November 2010
    Hi

    Interface builder will not show any images with @2x in the file name.

    The correct way to do this is add the images to your project i.e.

    myImage.png
    myImage@2x.png

    Then in interface builder add the image and select myImage.png.

    Now when you compile the application the iPhone will automatically use the @2x image if it is running on an iPhone 4.
    Aaron
  • kapps11kapps11 Posts: 731Registered Users @ @ @
    edited November 2010
    basically what blue monkey said, just use the low res ones in IB and they shuld pop up as the nice ones. altho idk if that works on ipad. But the reason behind this is to make it really easy to go and upgrade to retina display, and so the entire system just treats @2x images as normal ones when ur working with them and takes care of which image to use in the background
  • JasonRJasonR San Diego, CAPosts: 1,587Registered Users
    edited November 2010
    The problem is none of this seems to work on the iPad. The only solution I've found is to just start with the high resolution images without @2x in the filename, and scale them down for the old iPhones. If anyone has a better way, please speak up.
    My development blog: <a href="http://jrinn.com" target="_blank">http://jrinn.com</a>;
  • WarpWarp Posts: 110Registered Users
    edited November 2010
    Yes, that's exactly what I'm saying in my original post. I know that for the iPhone I just use the lowres images and the system will them automatically use the @2x versions on the iphone4 if they exist. That's not the problem.

    The problem is that I want to use (some of) the @2x images on the iPad (in the separate nib files for the ipad version), but IB is refusing to see them, so using them is shooting in the dark. I could duplicate the hires images to file names which do not contain the "@2x" part, but then the same images would exist in the project twice, wasting tons of space for no good reason.

    I asked about this in the Apple support forum, and got no answers.
  • bluemonkeybluemonkey Posts: 162Registered Users @ @
    edited November 2010
    The iPad does not have a retina display or make use of the 2x images.
    Aaron
  • WarpWarp Posts: 110Registered Users
    edited November 2010
    bluemonkey wrote: »
    The iPad does not have a retina display or make use of the 2x images.

    Which is exactly why you have to specify the @2x file names explicitly, which is the whole point. If you specify the file name explicitly, it will load it. You can write the file name in your code or even in IB, and it will load just fine on the iPad. The problem is that IB refuses to show the image in question, making it very difficult to lay out the views. In other words, the problem is not in the iPad. The problem is in Interface Builder.
  • bluemonkeybluemonkey Posts: 162Registered Users @ @
    edited November 2010
    Hi,

    I think you are missing the point @2x images should be used for iPhone Retina apps, now if you are making an iPad version of your app save the images as something like ImageName_iPad.png.
    Aaron
  • WarpWarp Posts: 110Registered Users
    edited November 2010
    bluemonkey wrote: »
    I think you are missing the point @2x images should be used for iPhone Retina apps, now if you are making an iPad version of your app save the images as something like ImageName_iPad.png.

    So the exact same images should be included in the project twice, one set for the iPhone4 and a second set for the iPad (completely identical to the first one, the only difference being the names of the files), thus needlessly increasing the size of the package with duplicated image files? Why is that something that "should" be done? It is forbidden to reuse the same image in the iPhone4 and the iPad? I don't get it.

    As I already said, the problem is not in the devices. They read the images just fine. The problem is in Interface Builder. It makes it difficult to create the user interfaces when you can't see the images.
  • nobre84nobre84 Posts: 980Registered Users @ @ @
    edited November 2010
    It really seems like a bug. Maybe its intentional (Apple possibly doesn't want people to directly use @2x files)
    Something you could do to alleviate the problem would be making copies of the @2x images to lay out your UI in IB for iPad, but don't include them in your target's bundle. Then on your view controller's awakeFromNib you could programmatically change them to the @2x ones. A lot of trouble tho...
    I tried using sym links with a different name, but IB won't show them either.
  • VinceYuanVinceYuan Posts: 34Registered Users
    edited November 2010
    I have the same problem. Orinally, I can see image@2x.png in the list in IB for ipad resource. But it is not there in the latest xcode/IB.
    I used image@2x for iPhone 4 and iPad. In the .xib file of iPad, I manually type in image@2x.png. Though the image does not show in IB, it does show correctly in the running app.
  • WarpWarp Posts: 110Registered Users
    edited November 2010
    nobre84 wrote: »
    Maybe its intentional (Apple possibly doesn't want people to directly use @2x files)

    My guess is that it's intentional, but Apple has not explained the rationale.
    Something you could do to alleviate the problem would be making copies of the @2x images to lay out your UI in IB for iPad, but don't include them in your target's bundle. Then on your view controller's awakeFromNib you could programmatically change them to the @2x ones.

    It's not possible to access the file name of an image being loaded from a nib file, even if you eg. directly subclass UIImageView or whatever (yes, I have tried this in the past, for a different project).
    I tried using sym links with a different name, but IB won't show them either.

    AFAIK it's not possible to add symlinks to a bundle. (Or at least xcode won't do it.)
  • jimbojimbo Posts: 43Registered Users
    edited March 2011
    I know it's a little late, but I was just trying to do the same thing.
    Correct me if I'm wrong, but in interface builder instead of choosing the image from the dropdown list, type in the name of the @2x image.
    Unfortunately IB won't see it and will show the question mark placeholder. But when you build the app on the iPad it should be using the high res image.
  • WarpWarp Posts: 110Registered Users
    edited March 2011
    In fact, Apple officially recommends against using the images using the "@2x" naming convention directly on the iPad because while it may work now, it's possible that things may change and it might stop working in the future. Even if it means that images are duplicated for the iPhone4 and the iPad, Apple recommends doing that. It's to be seen if in the future Apple will add some kind of official way of reusing the same image files on the iPhone4 and the iPad in a universal application.
  • jimbojimbo Posts: 43Registered Users
    edited March 2011
    wow thanks for the quick reply.
    It did seem like a very hacky way of doing it so I wouldn't be surprised if it broke at some point.
    I do find it strange though how Apple don't seem to mind that app bundles are growing huge because of the images, if they release a retina iPad display they'll have to seriously bump up the storage.
  • WarpWarp Posts: 110Registered Users
    edited March 2011
    jimbo wrote: »
    I do find it strange though how Apple don't seem to mind that app bundles are growing huge because of the images, if they release a retina iPad display they'll have to seriously bump up the storage.

    Depending on how smart the iOS app packing algorithm is, it might detect if two files are identical and store it only once in the app package. However, I don't know if it does that. (My guess is that unfortunately it does not, and you will get a significantly larger app when you duplicate all your double-resolution images for the iPad in your universal app, and some cursory testing seems to corroborate this.)
  • jimbojimbo Posts: 43Registered Users
    edited March 2011
    Depending on how smart the iOS app packing algorithm is, it might detect if two files are identical and store it only once in the app package. However, I don't know if it does that. (My guess is that unfortunately it does not, and you will get a significantly larger app when you duplicate all your double-resolution images for the iPad in your universal app, and some cursory testing seems to corroborate this.)

    Yeah I'm pretty sure it doesn't do that at the moment. Hopefully they'll provide a better way to do this in the future when it becomes more of an issue.
  • shraddha hattimareshraddha hattimare Posts: 3New Users
    edited April 2012
    you have to add @2x images in your app main bundle then it will display in Interface builder and if u want to set 2x images from app code then use setbackgroundimage method inplace of setImage.
Sign In or Register to comment.