UITabBarItem Image disappearing when selected Xcode 6 Beta

Question

Fairly new to development however the Xcode Betas are giving me a bit of a headache (Xcode 6 beta 5 / iOS 8).

Have found some answers but mostly relating to Xcode 5 and under.

Everything runs fine, however the selected icon/view controller disappears. In Xcode 5-4 the image assets weren't even coming through giving the following error message. Now they do, however the error message still runs.

Screenshot:

CUICatalog: Invalid asset name supplied: (null) 2014-08-12 15:16:26.521 TheApp[5275:3231837] CUICatalog: Invalid asset name supplied: (null) 2014-08-12 15:16:26.521 TheApp[5275:3231837] Could not load the "(null)" image referenced from a nib in the bundle with identifier "YourCompnay.TheApp"

I'm racking my brain trying to figure out if it's my connections / images or just an Xcode beta bug.

Def need help and a clear explanation. ELI5.

Any help would be appreciated. I can't seem to find anything specifically relating to this error.

Answer 1

I am in almost the exact same spot as you. Like you, my "unselected" tab images would show up fine, but for my selected tab images, they would not be present, and I'd get the "could not load null image..." error.

I had been assigning the images within the Storyboard IB... perhaps this is what you were doing too. Either way, within IB in the Attributes Inspector for the UITabBarItem, there are two different fields. One is under the Tab Bar Item section and it is named Selected Image. The other is under the Bar Item section and it is named Image. Just to be clear (restating my first paragraph but in terms of IB), I had "valid" images that I had saved within my .xcassets assigned to each of these Image/Selected_Image fields (each image was slightly different from the other to distinguish selection). The one that I had in my Image field would show up, and the one that I had in my Selected Image field would not.

If I put the "good" one from the Image field into the Selected Image field, I would still get the error, which didn't make sense to me.

HOWEVER, if I only put my "unselected" image into the Bar Item -> Image field and left the Tab Bar Item -> Selected Image empty, THEN the one image would get used in both places AND it would be highlighted blue when selected. This didn't give me the minor image change that I wanted (as my review of the Apple Docs for Bar Button Item indicated I should have "thicker lines" in my image for the selected item), it does at least give me an image for the selected tab. Hopefully this will help you as well.

Answer 2

Yjo-jo's answer is not actually a solution to this problem. It makes the tab bar use the unselected image for both normal and selected states, but does not let you use a different image for the selected state, as recommended in Apple's docs.

The bug is that the 'selected image' field for tab bar items in storyboards simply does not work, and it is still a problem as of Xcode 6.0.1 - I'm using images directly included in my app's resources rather than .xcassets and I'm experiencing the same issue. The images exist in my app's bundle, they appear in the drop-down box when editing my storyboard, and yet I get the same Could not load the "(null)" image ... error, and a blank selected image.

My solution was to add this in my tab bar item's (view controller) viewWillAppear method:

[[self tabBarItem] setSelectedImage:[UIImage imageNamed:@"(selected image file)"]];

However, when doing this, I found that the size of the image changed ever so slightly when being selected/unselected, although my images were the same size. This might be because the size of the images for tab bar items is precalculated in some specific way, and we're messing around with them just as they're about to be drawn. It's a small issue but it was enough to bug me, so in order to get them perfect I removed the previous code and added this in my tab bar controller's viewWillAppear method:

[(UITabBarItem*)[[[self tabBar] items] objectAtIndex:n] setImage:[UIImage imageNamed:@"(unselected image file)"]];
[(UITabBarItem*)[[[self tabBar] items] objectAtIndex:n] setSelectedImage:[UIImage imageNamed:@"(selected image file)"]];

Where n is the index of the tab bar item. (starting from 0)

It's ugly but it works. As far as I know, the "selected image" field just blatantly does not work in Xcode 6.

Answer 3

Defining selectedImage in User Defined Runtime Attributes like in this answer worked for me.

Answer 4

Looks like a bug in UIKit, I've filed a radar already.

In order to make this work however, you should add icons manually from your view controller code. There are few things to do:

1. Detect which UITabBarItem belongs to your view controller

YourViewController.m:

-(UITabBarItem *)tabBarItem {
  return self.tabBarController.tabBar.items[[self.tabBarController.viewControllers indexOfObject:self.navigationController]];
}

Note self.navigationController, you should just self if there is no navigation view controller wrapping your regular view controller.

2. Change icons

YourViewController.m -awakeFromNib: function:

[self.tabBarItem setImage:[UIImage imageNamed:@"RegularImage"]];
[self.tabBarItem setSelectedImage:[UIImage imageNamed:@"SelectedImage"]];

Works for me, should work for you too. It's a bit of a hack, but as elegant as it can be.

Answer 5

I have been seeing this issue across several versions of XCode. Now on 6.3 beta 3, I finally fixed it.

In my case, I solved this by doing two things:

1. For each tab bar item, in Interface Builder, remove the "Selected Image" field (this may have been unnecessary).

2. Right-click on your storyboard and select "Open As -> Source Code".. search for "tabBarItem". Review each item. They should look something like this:

In my case, there were duplicate/orphaned tabBarItem elements that appeared out of place and with bad/old settings. Comment out any elements that do not match your settings in IB. Clean & rebuild your app and see if you're fixed like I was.

Answer 6

Click the TabButtonItem and go to the Attributes inspector. You will see 2 sections: Tab Bar Item & Bar Item. You probably filled in the selected image field under the Tab Bar Item and the Image field under the Bar Item. You need to keep the Tab Bar Item: Selected Image field empty. It will work then.

Answer 7

For anybody else suffering from the same annoying errors: "CUICatalog: Invalid asset name supplied: (null) 2014-08-12 15:16:26.521 TheApp[5275:3231837] CUICatalog: Invalid asset name supplied: (null) 2014-08-12 15:16:26.521 TheApp[5275:3231837] Could not load the "(null)" image referenced from a nib in the bundle" ... Try selecting "Image" from the "Bar Item" section of the Attributes Inspector to set the image. I'm not exactly sure what the difference is but the "Selected Image" dropdown of the "Tab Bar Item" section throws this error and doesn't work.

Answer 8

Here's the solution, This worked very well for me.

1. Select the tabBarItem and set system item: custom and selected Image: empty in attribute inspector
   2. Go to Identity inspector and remove the keypath that indicates any image