Hi-Res @2x image not being picked up for tab bar item

psychotik picture psychotik · Jul 27, 2010 · Viewed 9.9k times · Source

I have a TabBarController that sets the image for the tab like so, in the -init method:

self.tabBarItem.image = [UIImage imageNamed:@"tabImage.png"];

I have a [email protected] file in the resource. In the iPhone 4 simulator or the phone, the hi-res image isn't being picked up - the low res version is simply being scaled up.

Any ideas why this might be?

EDIT: Some more info: If I try and explicitly use [email protected] (or just tabImage@2x) then the tab image I see is extremely large and blown up beyond the bounds of the tab, as if it's being scaled from 60px to 120px. So it looks like whatever name is supply is being treated as a scale=1.0 image.

Answer

AndrewS picture AndrewS · Oct 27, 2010

Note that the simulator is not case-sensitive, but the device is. Make sure case matches EXACTLY. If you've changed the case of the filename at some point, you'll need to clean and rebuild. Sometimes, for the simulator, I've had to actually blow away the folder in Library/Application Support/iPhone Simulator/4.3/Applications/ to get the rebuild to pick up the renamed image.

Always use

 [UIImage imageNamed:@"foo.png"]

This will work on 3.x and 4.x devices, and on the 4.x Simulator. Devices with Retina Displays (and the 4.x simulator) will magically pick up the @2x versions of your images; iOS has been modified to be smart about this function and @2x.png files.

Make sure you have both the @2x.png and the normal.png added to the project file, and do a full clean & build. As others have mentioned, verify the size of the images, too; apparently if they're not exactly 2x the dimensions it won't work (I haven't verified this myself).

If you leave the .png off, it will only work on iOS 4.0. So if you're building a 4.0+ only app, you can ask for:

    [UIImage imageNamed:@"foo"]

If you have only one hi-res image and want to use it on both Retina and non-Retina devices, then you'll have to change view.contentMode to scale to fit.