Is there any way to adjust the position of the UITabBar badge in iOS 7? The badge now blocks the tab bar icon a bit more than I would like.
iOS 6:
iOS 7:
It looks like the badge is placed in a certain position relative to the image. So if you have no image, the badge is in the upper left corner of the tabBarItem.
So - to position the badge, adjust the border of blank pixels around the .png you're using for the tabBarItem image.
If possible, can you provide the method by which you are setting the tab bar image?
I had the same problem that you did, and fixed it by using UIImageRenderingModeAlwaysOriginal:
UIImage *image = // Your tab bar item image
UIImage *selected = // Your selected tab bar item image
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
selected = [selected imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
controller.tabBarItem = [[UITabBarItem alloc] initWithTitle:title
image:image
selectedImage:selected];
Cheers!
It's not possible to adjust appearance of the badge.
If you really want to have it different, I think implementing custom overlay on UITabBar should be pretty easy. That way you could put there any custom text, not just numbers.
iOS 7 SDK depreciate 3 key method we used to customize tabbar
- (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage
- (UIImage *)finishedUnselectedImage
- (UIImage *)finishedSelectedImage
They suggest their alternatives in docs as #Daniel Amitay suggests.
Documentation is here
https://developer.apple.com/library/ios/documentation/uikit/reference/UITabBarItem_Class/DeprecationAppendix/AppendixADeprecatedAPI.html#//apple_ref/occ/instm/UITabBarItem/setFinishedSelectedImage:withFinishedUnselectedImage:
Related
I am creating the UITabBarItem for my ViewControllers contained in the TabBarController with the new recommended method
UIImage * normal = [UIImage imageNamed:viewIconKey];
normal = [normal imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal];
UIImage * selected = [UIImage imageNamed:[NSString stringWithFormat:#"%#On",viewIconKey]];
selected = [selected imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal];
self.tabBarItem = [[UITabBarItem alloc] initWithTitle:self.title
image:normal
selectedImage:selected];
of creating my images with UIImageRenderingModeAlwaysOriginal to keep the blue tint from applying.
This works fine on the normal Tab Bar Items, but when I select the "More" tab (I have 9 items in the viewControllers collection), then the icon displayed next to each item is tinted in the "blue" color.
On iOS 7 this does not happen, the icons retain their original color.
Any ideas? New API in iOS 8 for this? The More Tab Controller has always been a PITA.
UITabBarController exposes the MoreTab as a navigation controller called moreNavigationController. You can customize it as explained in this answer.
Hope this helps
I am googling around so much, but nowhere I find a straight and consolidated answer.
I want to customize myUITabBarController such that:
the UITabBar itself is completely black
the text color of the item titles is white in non-highlighted state
the text color of the item titles is red in highlighted state
Use multicolored icons in the tab bar
1. Turn UITabBar black
I am guessing I need to use the UIAppearance API for this, and actually I was able to turn the UITbarBar black using: [[UITabBar appearance] setBarTintColor:[UIColor blackColor]];.
2. and 3. Modify color of item titles
However, the color of the text items doesn't seem to do what I want, after googling around, the following solutions made sense to me, but it only changes the non-highlighted state to white, highlighted stays white as well...
NSDictionary *titleAttributes = #{NSForegroundColorAttributeName : [UIColor whiteColor]};
[[UITabBarItem appearance] setTitleTextAttributes:titleAttributes forState:UIControlStateNormal];
UIColor *titleHighlightedColor = [UIColor redColor];
NSDictionary *highlightedTitleAttributes = #{NSForegroundColorAttributeName : titleHighlightedColor};
[[UITabBarItem appearance] setTitleTextAttributes:highlightedTitleAttributes forState:UIControlStateHighlighted];
4. Multicolored items
About the multicolored icons, so far by approach was to simply set the icons in Storyboards like this:
But this doesn't do what I want, it only shows the whole icon in grey when the item is not selected. When the item is selected, the icon completely disappears.
This is the original icon:
This is how it looks when the item is not selected:
And here it is in the selected stated, as mentioned the icon completely disappears:
So, my question is how precisely I can achieve the above mentioned requirements. What am I currently missing? Am I better off doing everything in code than in Storyboards?
Note: I am targeting iOS versions greater than 7.0, so please include any version specific information if the behaviour differs between iOS 7 and iOS 8.
I had the same problem as you. As far as I know there is no difference for the different iOS versions.
I solved it programmatically like this:
Turning the bar color black works as following (You already said it) (in AppDelegate):
UITabBar.appearance().barTintColor = UIColor.blackColor()
To set the color of the title for the different states, I used this code (in AppDelegate):
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName!: UIColor.redColor()], forState:.Selected)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName!: UIColor.whiteColor()], forState:.Normal)
(and 4.) You can achieve the different item colors, multicolored icons and different item colors for the different states, by setting the image programmatically and change the rendering mode (imageWithRenderingMode:) to UIImageRenderingMode.AlwaysOriginal, this looks as following (do this in the first view controller class for all your view controllers):
var recentsItem = self.tabBarController!.tabBar.items![0] as UITabBarItem
var recentsItemImage = UIImage(named:"recents.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
var recentsItemImageSelected = UIImage(named: "recentsSelected.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
recentsItem.image = recentsItemImage
recentsItem.selectedImage = recentsItemImageSelected
I hope this helps, if you have any following questions, feel free to ask me.
Solution provided by smudis is great and because I don't have enough reputation to comment I decided to post the 3rd part of smudis' solution in Objective-C, in case it might help somebody:
To get a reference of the tabBar type the above code into AppDelegate's method application:didFinishLaunchingWithOptions:
UITabBarController *tbc = (UITabBarController*)self.window.rootViewController;
UITabBar *tb = tbc.tabBar;
Then the image adjustment can be done as follows:
for (UITabBarItem *tbi in tb.items) {
tbi.selectedImage = [tbi.selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tbi.image = [tbi.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
I want to create the TabBar which align at center no matter what how many tabitem is.
The final result may be look like the image below.
I can set width of TabBar by using
UITabBar *tabBar = self.tabBarController.tabBar;
CGRect rectAdjust = CGRectMake(tabBar.frame.origin.x, tabBar.frame.origin.y, 160.0f, tabBar.frame.size.height);
tabBar.frame = rectAdjust;
But I cannot remove the black background on UITabBar(on the right side in below image) even though I already set the size of TabBar to be half the screen's width.
Is there any way to solve this?
Thanks.
Instead of reinventing the wheel, you could take a look at this control at the CocoaControls website:
ALTabBarController for iOS
It is more customizable than the traditional TabBar
You could set an image for the table bar that has caps on either side and a few pixels in between, then make it a resizeable image like so:
UIImage *background = [[UIImage imageNamed:#"ImageName.png"]resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
Then set it as the background image of the tab bar:
tabBar.backgroundImage = background;
And it should resize to the image you need.
Then set the background color of the tab bar to clear:
tabBar.backgroundColor = [UIColor clearColor];
I'm getting some odd behaviour with my custom tab bar. The images seem to be aligned incorrectly. Here is a screenshot (I have removed my own tab bar background to highlight my problem):
Here is the code I'm using to set the images for each state:
self.tabBarController = [[[UITabBarController alloc] init] autorelease];
self.tabBarController.viewControllers = [NSArray arrayWithObjects:homeNavController, whatsOnNavController, mapNavController, infoNavController, nil];
self.tabBarController.delegate = self;
// For iOS 5 only - custom tabs
if ([self.tabBarController.tabBar respondsToSelector:#selector(selectedImageTintColor)])
{
// Set the background images
//[[UITabBar appearance] setBackgroundImage: [UIImage imageNamed:#"nav_bg.png"]];
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:#"nav_over.png"]];
[homeNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:#"nav_home_over"] withFinishedUnselectedImage:[UIImage imageNamed:#"nav_home"]];
[whatsOnNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:#"nav_whats_on_over"] withFinishedUnselectedImage:[UIImage imageNamed:#"nav_whats_on"]];
[mapNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:#"nav_map_over"] withFinishedUnselectedImage:[UIImage imageNamed:#"nav_map"]];
[infoNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:#"nav_info_over"] withFinishedUnselectedImage:[UIImage imageNamed:#"nav_info"]];
}
All of my replacement tab images are correctly sized (49 pixels high and 80 pixels wide for the non-retina versions).
What could be causing this odd behaviour?
--- Update ---
Here is an updated screenshot with the background in place:
There is a property on UIBarItem (UIBarButton item inherits from this class) imageInsets.
To use full height images (49px) for finishedSelectedImage and finishedUnselectedImage you need to set these image insets:
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
You can fix this in Storyboard now. Storyboard size inspector image inset adjustment
Select the Tab Bar Item you want to adjust, open the Size Inspector, and adjust the Top and Bottom Image Insets. You need to adjust them the same amount or they will just squish/stretch your image (so +5 in Top, and -5 in Bottom)
This may seem a bit hackish but I believe it's the only way you can achieve what you want: you just need to use tab bar finished images which have a transparent 11 pixels "top padding" (22 pixels for retina). Your images will then have to be 60px (120px) high.
My app made it to the App Store using this technique, so you should be safe to use it.
Hope it helps!
It turns out that you should always have text inside a tabitem. The space was created by blank text.
This API is really poorly documented.
Your finishedSelectedImage should be an icon ~30x30 px. This is just the icon part of the tab. If you create a finishedSelectedImage that's too tall, the system will not put it right at the bottom of the screen.
Conceptually, you start with a full-width, 49px high backgroundImage for the tabBar, add a single-tab-width, 49px high selectionIndicatorImage which functions as the background image for the selected tab, then add a two versions of each tab's icon ~30x30 px, finishedUnselectedImage and finishedSelectedImage.
If you add the image as a subview instead with frames defined, can help you out.
Check this
Try using slightly smaller images, tabbar repositions them slightly
I'd like to make a view with a unique color with uitabbar i.e I don't want to separate the view into the UITabbar and the rest, so I've created a custom UITabbar programmatically with custom color. The UITabbar and the "rest of the view" have the same color but there is a gray line on top of the UITabbar that separates the to parts. How can I hide that?
this is an example image, I want to delete that dark line:
https://picasaweb.google.com/felixdl/20Giugno2012#5756005463317234882
SOLUTION
Thank you! this works perfectly! the line I've added is:
[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:#"myImage.jpg"]];
I've never used the "appearance" tag before
If you're building for iOS 5, you can set the background as an image which would eliminate the grey line you're talking about.
[uiTabBarController setBackgroundImage:[UIImage imageNames:#"my_background.png"]];
This does require you to have an image which matches your programitically created color though.
In iOS4, you can override the drawRect function (which is significantly more complicated, but I'd be happy to answer if you're making a pre iOS 5 app)
Try this,
** Objective-C **
//Remove shadow image by assigning nil value.
[[UITabBar appearance] setShadowImage: nil];
// or
// Assing UIImage instance without image reference
[[UITabBar appearance] setShadowImage: [[UIImage alloc] init]];
** Swift **
//Remove shadow image by assigning nil value.
UITabBar.appearance().shadowImage = nil
// or
// Assing UIImage instance without image reference
UITabBar.appearance().shadowImage = UIImage()
Here is apple document for shadowImage.
#available(iOS 6.0, *)
open var shadowImage: UIImage?
Default is nil. When non-nil, a custom shadow image to show instead of
the default shadow image. For a custom shadow to be shown, a custom
background image must also be set with -setBackgroundImage: (if the
default background image is used, the default shadow image will be
used).