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];
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)
UITabBarItem *tabBarItem0 = [self.tabBarController.tabBar.items objectAtIndex:0];
[tabBarItem0 setImage:[[UIImage imageNamed:#"iconGray.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[tabBarItem0 setSelectedImage:[[UIImage imageNamed:#"iconBlue.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
The simplest way I found was
self.tabBarItem.image=[UIImage imageNamed:#"myImage.png"];
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];
This Answer May be Help You
UITabBarItem *i5=[[UITabBarItem alloc]initWithTitle:#"Profile" image:[UIImage imageNamed:#"profile.png"] tag:5];
- (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];
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.
let favorites = UITabBarItem(title: nil, image:UIImage(named: "Screen Shot 2018-12-13 at 11.00.42 AM") , tag: 0)
Related
I am trying to set the tab bar icons of my UITabBarController with custom *.png files (one for the selected and one for unselected).
The images are all in non-interlaced png format and are named correctly (#2x, #3x, etc) residing in an *.imageset.
But the tab bar items are only shown as silhouettes like this:
I tried to set these images within Interface Builder, without success. Then I also tried to set them programmatically in the "loadView" function of MyTabBarController (which is extending UITabBarController) like this:
UIImage *selectedImage;
UIImage *unselectedImage;
// tab1
selectedImage = [UIImage imageNamed:#"cmdGamesActive"];
unselectedImage = [UIImage imageNamed:#"cmdGamesInactive"];
UITabBarItem *item1 = [self.tabBar.items objectAtIndex:0];
item1 = [item1 initWithTitle:#"Games" image:unselectedImage selectedImage:selectedImage];
// tab2
selectedImage = [UIImage imageNamed:#"cmdFriendsActive"];
unselectedImage = [UIImage imageNamed:#"cmdFriendsInactive"];
UITabBarItem *item2 = [self.tabBar.items objectAtIndex:1];
item2 = [item2 initWithTitle:#"Friends" image:unselectedImage selectedImage:selectedImage];
// tab3
selectedImage = [UIImage imageNamed:#"cmdTrophiesActive"];
unselectedImage = [UIImage imageNamed:#"cmdTrophiesInactive"];
UITabBarItem *item3 = [self.tabBar.items objectAtIndex:2];
item3 = [item3 initWithTitle:#"Trophies" image:unselectedImage selectedImage:selectedImage];
// tab4
selectedImage = [UIImage imageNamed:#"cmdSettingsActive"];
unselectedImage = [UIImage imageNamed:#"cmdSettingsInactive"];
UITabBarItem *item4 = [self.tabBar.items objectAtIndex:3];
item4 = [item4 initWithTitle:#"Settings" image:unselectedImage selectedImage:selectedImage];
... with the same result.
Any ideas how to solve this issue ?
According to this answer, I did something extra and kind of have answer for you here. I have my custom UITabBarController, which is linked with my UITabBarController in the StoryBoard file. So in order to remove the automatic tint provided by iOS when the TabBar is unselected, I ended up removing it in this manner. The images can be a vast variety of images but just in the way recommended here. Here it goes:
NSArray *navConArr = self.viewControllers;//self is custom UITabBarController
UINavigationController *naviOne = [navConArr objectAtIndex:0];//I have 3 different tabs, objectAtIndex:0 means the first tab navigation controller
UITabBarItem *naviBtn = naviOne.tabBarItem;
UIImage *image = [[UIImage imageNamed:#"iconNaviOne"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[naviBtn setSelectedImage:image];
[naviBtn setImage:image];
Thankfully, this works like a charm (:
I was facing a similar issue.
I had chosen few icons for my tabs such as 'mic', 'smiley' and 'settings'.
But the only things visible when I executed the program were grey and blue squares.
I modified my '.png' images to be transparent and now they are visible as they were intended to.
i.e, make sure the images used for tab icons do not have a background.
This should do the trick:
UITabBarItem *item0 = [_tabBar.items objectAtIndex:0];
item0.image = [[UIImage imageNamed:#"edit_profile_tab"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item0.selectedImage = [[UIImage imageNamed:#"edit_profile_tab_active"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
Im going to try to explain my problem as good as possible.
When my application starts it checks this in the appdelegate class:
if([[NSUserDefaults standardUserDefaults] boolForKey:#"checkboxClicked"]){
tabBarItem3.image = [UIImage imageNamed:#"lock-open"];
tabBarItem3.title = #"Logga ut";
}
else{
tabBarItem3.title = #"Logga In";
tabBarItem3.image = [UIImage imageNamed:#"lock.png"];
}
essentially it is deciding if the image should be an lock or unlocked with the corresponding titles. Now it all works fine and the image is what it should be showed.
Scenario 1) The user starts the app and the image starts with the "lock-open" image. Later the user goes to the logout page and loggs off the user. When the UITabBarItem that should change it's image is clicked after that, it still shows the image "lock-open". HOWEVER when the user clicks on another UITabBarItem then the correct image is being shown.
NOTE the title is always set correct. Just the image thats doing the weird stuff.
Scenario 2) Just vise versa user starts as logged off etc..
This is the code i use to change the image:
UITabBarItem *item = self.tabBarController.tabBar.items[2];
item.image = [UIImage imageNamed:#"lock"];
item.title = #"Logga in";
Use bellow code for change the image of UITabBarItem
UITabBarItem *item0 = [self.tabBar.items objectAtIndex:0];
item0.image = [[UIImage imageNamed:#"lock.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item0.selectedImage = [UIImage imageNamed:#"lock-selected.png"];
I want the middle button in my UITabBarController to have a different colour to the others, like Instagram for example. Does anyone have any suggestions?
Instead of colour you should set every tabBarItem image differently for each one (If you want it just like instagram)
Here is an example for one:
UITabBarItem *tabBarItem = [yourTabBarController.tabBar.items objectAtIndex:2]; //set objectAtIndex you want (For Instagram its 2)
UIImage *unselectedImage = [UIImage imageNamed:#"unselected-imagename"]; //set unselected image
UIImage *selectedImage = [UIImage imageNamed:#"selected-imagename"]; //set selected image
[tabBarItem setImage: [unselectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[tabBarItem setSelectedImage: selectedImage];
Hope this helps :)
Cheers
I'm developing an app that has iOS 7.1 as its Deployment Target. So far everything works just fine, however there is one huge issue, the tab bar images are not showing up. This is confusing, because they show up when running on the iOS 8 Simulator, I'm using the Xcode 6 beta 1.
I've set up two images. The dimensions are 60x60 and 70x60. So size does not seem to be an issue. I've set the images up in Interface Builder. When logging the tab bar image to the console however, it returns nil. I've then tried setting the images up in code, and using the same method to log it to the console, I now have a memory address for the image, but it still does not show up.
When searching for an answer on Google and stackoverflow, I've found this method:
self.tabBarItem.image = [[UIImage imageNamed:#"IMAGE"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.tabBarItem.selectedImage = [[UIImage imageNamed:#"IMAGE"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
NSLog(#"%#", self.tabBarItem.image);
This worked for some users apparently, but not for me. I can not figure this out, I'd be glad if someone could help me.
I have a feeling about what you're doing, but it's still not clear.
You have a tab bar, but you have an outlet to the tab bar item itself.
That's not the way you would do it. You create an outlet to the tab bar, then add custom items with:
UIImage *defaultImage = [UIImage imageNamed:#"ImageName"];
UIImage *selectedImage = [UIImage imageNamed:#"ImageName"];
UITabBarItem *itemZero = [[UITabBarItem alloc] initWithTitle:#"Item One" image:defaultImage selectedImage:selectedImage];
UITabBarItem *itemOne = [[UITabBarItem alloc] initWithTitle:#"Item Two" image:defaultImage selectedImage:selectedImage];
NSArray *items = #[itemZero,itemOne];
[self.tabBar setItems:items animated:animated];
At some point during runtime, I want to change the image for one of the tabs in my UITabBar. Here is what I have tried so far:
[[self.tabBarController.tabBar.items objectAtIndex:1]
setImage:[UIImage imageNamed:#"image-name"]
forState:UIControlStateNormal];
The above gives me a -[UITabBarItem setImage:forState:]: unrecognized selector sent to instance
If I use the setImage method without forState it works, but this method was deprecated in iOS 3.
I tried your answers, but now there's this weird blue line above the UITabBar's UIIMage I changed. Any idea why?
Use image and selectedImage properties:
UITabBarItem *item = [self.tabBarController.tabBar.items objectAtIndex:1];
item.image = [UIImage imageNamed:#"image"];
item.selectedImage = [UIImage imageNamed:#"selected_image"];
Also pay attention on this:
By default, the actual selected image is automatically created from
the alpha values in the source image. To prevent system coloring,
provide images with UIImageRenderingModeAlwaysOriginal.
UITabBarItem extends UIBarItem which has an image property.
Do:
[[self.tabBarController.tabBar.items objectAtIndex:1] setImage:[UIImage imageNamed:#"image-name"]];
Though it would be easier to read and debug as follows:
UITabBarItem *item = self.tabBarController.tabBar.items[1];
item.image = [UIImage imageNamed:#"image-name"];
though the question is very old and the answer by #visput absolutely working but for some one complete newbie like me
In your UITabBarController implementation
if while loading of the UITabBarController you want, put it in viewDidLoad method
UITabBarItem *item = [self.tabBar.items objectAtIndex:ITEM_INDEX];// item index is the tab index which starts from 0
item.image = [UIImage imageNamed:#"image"];
item.selectedImage = [UIImage imageNamed:#"image"];
If you want to change it runtime like on selection of something, put this code in viewDidLayoutSubviews method