how to programmatically change the tabbarItem's image

Question

I'm developing a shopping cart tab. Originally I just use the default badge value to show how many items in the cart on the bottom tabbar. Now the designer wants to be fancy, he wants to show different image based on how many items in the cart. For example, if there's one, show cartTab-1.png, if 2, show cartTab-2.png...

I tried to change the tabaritem (UITabBarItem)'s image but it didn't work for me. Is it feasible? I discussed with my colleague, he said I may have to draw the image on top of the tabbarItem by myself. Do you have any suggestion? Thanks

more details:

I created the tabItem using InterfaceBuilder, and set the image and title over there
I need to support ios4. So I can't use the setSelectedImage...
In my case it's a KVO, if the cart count changes, it notifies the method to update the image. not in the initialize step.

does anyone know why [self.tabBarItem setImage:[UIImage imageNamed:@"cartxxx.png"]] doesn't work? When I debug, the property do changed, but the UI remains same

Update

the below code works. Thanks everyone!

UIImage* cartTabImage = [UIImage imageNamed:cartTabImageName];
[[self.tabBarController.tabBar.items objectAtIndex:3] setImage:cartTabImage];

score 8 · Answer 1 · answered Oct 31 '16 at 20:25

Swift 3.0 version for 2 tabs,

self.tabBar.items?[0].image = UIImage(named: "inactive_image_0")?.withRenderingMode(.alwaysOriginal)
self.tabBar.items?[0].selectedImage = UIImage(named: "active_image_0")?.withRenderingMode(.alwaysOriginal)

self.tabBar.items?[1].image = UIImage(named: "inactive_image_1")?.withRenderingMode(.alwaysOriginal)
self.tabBar.items?[1].selectedImage = UIImage(named: "active_image_1")?.withRenderingMode(.alwaysOriginal)

.withRenderingMode(.alwaysOriginal) is really helped me. – Ganesh G Aug 06 '18 at 08:13 — Ganesh G, Aug 06 '18 at 08:13

score 6 · Answer 2 · answered Jun 22 '16 at 15:01

UITabBarItem *tabBarItem0 = [self.tabBarController.tabBar.items objectAtIndex:0];

[tabBarItem0 setImage:[[UIImage imageNamed:@"iconGray.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[tabBarItem0 setSelectedImage:[[UIImage imageNamed:@"iconBlue.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

score 3 · Answer 3 · answered Mar 15 '14 at 20:47

3

The simplest way I found was

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

answered Mar 15 '14 at 20:47

user3344717

161
3
5

`self.tabBarItem` is not necessarily non-null. – Raptor Apr 30 '14 at 06:14
This isn't setting the selectedImage and failed to work properly for me. – David Rector Apr 17 '19 at 19:23

tilo · Answer 4 · 2012-01-13T08:16:01.620

2

Try this:

int numItems = 0; // count of items in your shopping cart
NSString *imageName = [NSString stringWithFormat:@"cartTab-%d",numItems];

// change your image
[[self.tabBar.items objectAtIndex:myIndex] setImage:[UIImage imageNamed:imageName]];

// or, if you want to set it when initializing the tabBar
UITabBarItem *item = [[[UITabBarItem alloc] initWithTitle:myTitle image:[UIImage imageNamed:imageName] tag:someTag];

edited Jan 13 '12 at 08:16

answered Jan 13 '12 at 08:09

tilo

14,009
6
68
85

1

Thanks. Actually I did the same thing but the image didn't change. When I debug, the tabBarItem's property is changed to the new image. But for some reason, the UI is not updated. none of the below worked: [self.tabBarItem setImage:[UIImage imageNamed:@"play.png"]]; [self.tabBarItem setBadgeValue:@"4"]; [self.tabBarItem setTitle:@"test"]; BTW, I did it in the viewDidLoad. – Jason S Jan 13 '12 at 22:20

score 1 · Answer 5 · answered Jan 13 '12 at 08:07

1

This Answer May be Help You

  UITabBarItem *i5=[[UITabBarItem alloc]initWithTitle:@"Profile" image:[UIImage imageNamed:@"profile.png"] tag:5];

answered Jan 13 '12 at 08:07

Anand

3,346
9
35
54

thanks In my case it's a KVO, if the cart count changes, it notifies the method to update the image. not in the initialize step – Jason S Jan 14 '12 at 01:48

score 1 · Answer 6 · answered Jan 13 '12 at 08:12

1

- (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage

selectedImage is displayed when the user has selected the tab. unselectedImage is displayed when the user has selected a different tab.

in your viewDidLoad: do

UIImage *c1 = [UIImage imageNamed:@"cart1.png"];
UIImage *c2 = [UIImage imageNamed:@"cart1unselected.png"];
[[self tabBarItem] setFinishedSelectedImage:c1 withFinishedUnselectedImage:c2];

answered Jan 13 '12 at 08:12

ColdLogic

7,206
1
28
46

thanks Since I need to support ios 4, I call the similar code but it didn't work. [self.tabBarItem setImage:[UIImage imageNamed:@"cartxxx.png"]]; I don't call it inside the viewDidLoad neither. In my case it's a KVO, if the cart count changes, it notifies the method to update the image. – Jason S Jan 14 '12 at 01:46
this is an iOS5 method. If you need to support iOS4, you will have to subclass UITabBar and create custom image code... its annoying and extremely long and can get very buggy. There are tutorials around on how to add a custom image to a UITabBar – ColdLogic Jan 15 '12 at 04:04

score 0 · Answer 7 · answered May 03 '17 at 16:13

As mentioned on the updated question and other answers, in most cases the UITabBarItem needs to be accessed via the UITabBarController directly.

It seems that iOS creates a copy of the UITabBarItem instance, which explains why updating the self.tabBarItem property does not reflect the changes in the user interface:

My guess is that this happens when the Tab Bar items are created programmatically, instead of by the storyboard, but this is just a guess.

The solution is then, as pointed out, accessing the array of Tab Bar items via the Tab Bar controller. This solution is bad in that it depends on the knowledge of the tab bar item index:

UITabBarItem *tabBarItem = [self.tabBarController.tabBar.items objectAtIndex:0];
[tabBarItem setImage:image];
[tabBarItem setSelectedImage:image];

Don't forget to update both images for default and selected states.

score 0 · Answer 8 · edited Dec 28 '18 at 06:48

0

let favorites = UITabBarItem(title: nil, image:UIImage(named: "Screen Shot 2018-12-13 at 11.00.42 AM") , tag: 0)

edited Dec 28 '18 at 06:48

Suraj Rao

29,388
11
94
103

answered Dec 28 '18 at 06:47

Muhammad Hashim

3
4

how to programmatically change the tabbarItem's image

8 Answers8

Linked