I'd like to show a UITabBarItem badge above the selectionIndicatorImage. There are 3 screenshots:
Screenshots
Light gray color is the selectionIndicatorImage. Yes, badge looks good. When I touch up inside at the cloud icon UITabBar become:
It's wrong.. I'd like to show badge above the selection image.
If there is no icon for UITabBar - it looks good.
How can I fix this issue?
Thanks in advance.
Edited
I add icons in the storyboard. For badge I've made the code:
UITabBarItem *cartTabBarItem = (UITabBarItem *)[self.tabBarController.tabBar.items objectAtIndex:3];
if ([[DataSourceWrapper getInstance] getFullCost] == 0)
cartTabBarItem.badgeValue = nil;
else
cartTabBarItem.badgeValue = [NSString stringWithFormat:#"%.0f тнг", [[DataSourceWrapper getInstance] getFullCost]];
For selectionIndicatorImage
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:#"selected-tabbar-bg.png"]];
I know it's a bit tricky, but I think Apple didn't add TabBar subview in correct order.
anyway I've fixed it the following way
for (UIView *subview in marketTrackerAppDelegate.tabBarController.tabBar.subviews)
{
if ([marketTrackerAppDelegate.tabBarController.neededController.tabBarItem respondsToSelector:#selector(view)] &&
[marketTrackerAppDelegate.tabBarController.neededController.tabBarItem performSelector:#selector(view)] == subview)
{
[marketTrackerAppDelegate.tabBarController.tabBar bringSubviewToFront:subview];
break;
}
}
I had the same issue. You can fix it with code that #dollar8 suggested or change order of UITabBarItems creation.
I have 4th tab with badge and SelectionIndicatorImage of 5th tab overlay badge of 4th tab, so first I set 5th tab:
UIImage *item5image = [UIImage imageNamed:#"profile_tabbar_item"];
UIImage *item5imageSel = [UIImage imageNamed:#"profile_tabbar_item_selected"];
item5image = [item5image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item5imageSel = [item5imageSel imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tab5.tabBarItem = [[UITabBarItem alloc] initWithTitle:#"" image:item5image selectedImage:item5imageSel];
and after set 4th tab:
UIImage *item4image = [UIImage imageNamed:#"messages_tabbar_item"];
UIImage *item4imageSel = [UIImage imageNamed:#"messages_tabbar_item_selected"];
item4image = [item4image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item4imageSel = [item4imageSel imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tab4.tabBarItem = [[UITabBarItem alloc] initWithTitle:#"" image:item4image selectedImage:item4imageSel];
And the order of subview will be right.
When I set 4th tab before 5th tab - the SelectionIndicatorImage overlay badge view.
Related
I get the behavior from the picture below. Basically the badge from the second tab it's under the third UITabBarItem image. The image from third tab it's composed from the camera icon and the green background.
I am assigning an image using:
UITabBarItem *tabItem3 = [self.tabBar.items objectAtIndex:3];
tabItem3.selectedImage = [[UIImage imageNamed:#"albumsSelected"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tabItem3.image = [[UIImage imageNamed:#"albums"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
Is there a way to fix this UI bug?
My code here:
for (NSInteger i = 1; i<= 4 ; i ++) {
UIViewController *VC = self.viewControllers[i-1];
UIImage *itemImage = [[UIImage imageNamed:[self getTabBarItemImageNameFromIndex:i selected:NO]] imageWithRenderingMode:UIImageRenderingModeAutomatic];
UIImage *itemImageSelected = [[UIImage imageNamed:[self getTabBarItemImageNameFromIndex:i selected:YES]]imageWithRenderingMode:UIImageRenderingModeAutomatic];
UITabBarItem *item = [[UITabBarItem alloc]initWithTitle:[self getTabBarItemTitleWithIndex:i] image:itemImage selectedImage:itemImageSelected];
item.tag = i-1;
VC.tabBarItem = item;
}
First I run :
I want to shrink the UITabBarItem size, the original size of picture is 36 × 36 pixels.
Then I add these code:
item.imageInsets = UIEdgeInsetsMake(3, 3, 3, 3);
It does well,but when I press the TabBarItem the size of item was changed
I know the issue is about the setting of imageInsets, but I don't know how to resize the TabBarItem without to set imageInsets.
I don't think that the standard UITabBar control is very customizable. I would recommend you create your own custom tab bar which fits your need, or use something like UISegmentedControl which is quite customizable.
Have a look at these threads for reference:
how to resize iphone tab bar in xcode?
How do I resize the tab bar items in Xcode 4.3.1?
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];
I get colored tab icons for the tabs as seen in the screenshot below.
but when I click more and view further tabs, I don't get colored tab icons
How to get colored tab icons for 'more' tabs? Here's my code in AppDelegate's didFinishLaunchingWithOptions
UITabBar *tb = tabBarControllerProperty.tabBar;
NSArray *itemsObject = tb.items;
for(UITabBarItem *tabItem in itemsObject)
{
UIImage *imaged = tabItem.image;
if([imaged respondsToSelector:#selector(imageWithRenderingMode:)])
{
tabItem.image = [imaged imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
else
{
tabItem.image = imaged;
}
tabItem.selectedImage = imaged;
}
Try this,
For setting selection indicator:
[[yourTabBarController tabBar] setSelectionIndicatorImage:[UIImage imageNamed:ImageName]];
For setting tab bar icons use the following code:
yourTabBarController.ViewController[0].tabBarItem = [[UITabBarItem alloc] initWithTitle:TitleForTabItem image:[[UIImage imageNamed:FirstTabIconImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] selectedImage:[UIImage imageNamed:FirstTabIconImage]];
Using this set tab bar item for other viewControllers also.
go on... :)
I am new to ios development.
I created UITabbar programatically and set its delegate to self. All functions well. But my tabbar consists three tab bar items. I have given different images to the different tab bar items. But they all shows another image.
This is my code:
UITabbarItem item1 = [[UITabBarItem alloc] initWithTitle:#"item1" image:[UIImage imageNamed:#"imagename"] tag:1];
Try this :
UIImage *selectedImage0 = [UIImage imageNamed:#"tab-selected.png"];
UIImage *unselectedImage0 = [UIImage imageNamed:#"tab-unselected.png"];
[item1 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];