High-res UITabBar icons display at full size on low-res screen

Question

I'm in the process of upgrading my iPhone app to high-res graphics, and I've run into some problems with older devices. The situation involves my UITabBar icons. Have a look:

The top screenshot looks correct. It was captured on the latest generation iPhone (new screen) running OS4. However, the second screenshot is completely wrong. The high-res icons are displaying at 100% size and are getting cropped. That second screenshot was taken from my second-gen iPod touch (old screen) running OS4.

So, I'm really confused here. I've read over Apple's documentation, and as far as I know I'm doing everything they require. Within my app bundle I have images named as:

• tab-featured.png
• [email protected]
• tab-topics.png
• [email protected]
• (...etc...)

Within interface builder, I have specified the low-res version of each image (the filename WITHOUT "@2x") to be used in the tab bar. If I understand iPhone documentation correctly, the device should automatically detect screen resolution and display the high-res version if available. So if anything, it almost seems like my iPod touch is incorrectly detecting its display resolution. Am I missing something here perhaps?

Any help or insight that can be offered would be appreciated! Thanks.

Update 1:

No luck so far. I took the manual approach and added the following into the viewDidLoad command of my UITabBarController:

- (void)viewDidLoad {
    [super viewDidLoad];

    UITabBarItem *tab;
    UIViewController *item;

    tab = [[UITabBarItem alloc] initWithTitle:@"Featured" image:[UIImage imageNamed:@"tab-featured.png"] tag:0];
    item = [self.viewControllers objectAtIndex:0];
    item.tabBarItem = tab;
    [tab release];

    tab = [[UITabBarItem alloc] initWithTitle:@"Topics" image:[UIImage imageNamed:@"tab-topics.png"] tag:1];
    item = [self.viewControllers objectAtIndex:1];
    item.tabBarItem = tab;
    [tab release];

    tab = [[UITabBarItem alloc] initWithTitle:@"Video" image:[UIImage imageNamed:@"tab-video.png"] tag:2];
    item = [self.viewControllers objectAtIndex:2];
    item.tabBarItem = tab;
    [tab release];

    tab = [[UITabBarItem alloc] initWithTitle:@"Experts" image:[UIImage imageNamed:@"tab-experts.png"] tag:3];
    item = [self.viewControllers objectAtIndex:3];
    item.tabBarItem = tab;
    [tab release];

    tab = [[UITabBarItem alloc] initWithTitle:@"Events" image:[UIImage imageNamed:@"tab-events.png"] tag:4];
    item = [self.viewControllers objectAtIndex:4];
    item.tabBarItem = tab;
    [tab release];
}

This still produces the same result as above (large cut-off icons within the tab bar). Has anyone heard of issues with the UITabBar populating high-res icon pairs?

Update 2:

Regarding James' comment:

Yes, I was able to resolve this. It seemed to be an error with file references in XCode. I was running out of ideas, so I rolled back and started stripping out all @2x images from my app, just to get everything displaying correctly again with the low-res artwork. Once the app displayed proper size images again (albeit at low-resolution), then one by one I started adding the @2x images back in, waiting for something to break. It seemed to work fine the second time going in. Don't know why or what happened. The SDK just seemed to get some wires crossed as to what had happened.

Answer 1

As I understand it, the magic is in UIImage's imageNamed:, imageWithContentsOfFile: and initWithContentsOfFile: methods. Pass one of those an NSString literal without the "@2x" or the file extension, and it'll magically find the right version of the file for your device.

One implication of that is, the images for your tab bar items need to be set programmatically. It could be that IB isn't yet smart enough to write a nib that dynamically picks the image based on the device resolution. So try setting those images by hand in your -viewDidLoad method.