Ok, so, I'm trying to create a custom tab bar. I've read a hundred tutorials and downloaded half as many sample code projects and this problem seems to still be in all of them.
I don't really want a custom background, what I really want to for the buttons to take up the entire area so that no background ever shows. Why is it that when using an image sized at 49px (98px for Retina) for the background AND the buttons...the tab bar itself is scaled up and that ugly glow that Apple adds is viewable?
Here's the code I used (found here on Stack):
UIImage *selectedImage0 = [UIImage imageNamed:#"transactions_tab_btn_active"];
UIImage *unselectedImage0 = [UIImage imageNamed:#"transactions_tab_btn"];
UIImage *selectedImage1 = [UIImage imageNamed:#"bills_tab_btn_active"];
UIImage *unselectedImage1 = [UIImage imageNamed:#"bills_tab_btn"];
UIImage *selectedImage2 = [UIImage imageNamed:#"messages_tab_btn_active"];
UIImage *unselectedImage2 = [UIImage imageNamed:#"messages_tab_btn"];
UIImage *selectedImage3 = [UIImage imageNamed:#"reports_tab_btn_active"];
UIImage *unselectedImage3 = [UIImage imageNamed:#"reports_tab_btn"];
UITabBar *tabBar = self.tabBarController.tabBar;
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
UITabBarItem *item3 = [tabBar.items objectAtIndex:3];
UIImageView *tabBarImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"tab_bar"]];
if ([[[UIDevice currentDevice] systemVersion] floatValue] < 5) {
[tabBar insertSubview:tabBarImageView atIndex:0];
}else{
[tabBar insertSubview:tabBarImageView atIndex:1];
}
[item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
[item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
[item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];
[item3 setFinishedSelectedImage:selectedImage3 withFinishedUnselectedImage:unselectedImage3];
Again, I can remove that background image as it's of no use to me, but without it, the default black background for the tab bar is viewable. Both bad. Help.Please.
Well, I can help you with the glow. To hide it just create a transparent image and use it instead.
UIImage* image = [UIImage imageNamed:#"transparent.png"];
[[UITabBar appearance] setSelectionIndicatorImage:image];
Related
I have added a tabbar in my app. I am showing 5 tabs at once. I am trying to make the custom colors of the tab bar. I have used following in my TabBarController
UITabBarItem *homeTab = [self.exposeTabBar.items objectAtIndex:0];
UIImage *home_unselectedImage = [UIImage imageNamed:#"home.png"];
UIImage *home_selectedImage = [UIImage imageNamed:#"home.png"];
[homeTab setImage: [home_unselectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[homeTab setSelectedImage: home_selectedImage];
UITabBarItem *bookmarkTab = [self.exposeTabBar.items objectAtIndex:1];
UIImage *bookmark_unselectedImage_ = [UIImage imageNamed:#"bookmark.png"];
UIImage *bookmark_selectedImage = [UIImage imageNamed:#"bookmark.png"];
[bookmarkTab setImage: [bookmark_unselectedImage_ imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[bookmarkTab setSelectedImage: bookmark_selectedImage];
UITabBarItem *postTab = [self.exposeTabBar.items objectAtIndex:2];
UIImage *post_unselectedImage_ = [UIImage imageNamed:#"create-post.png"];
UIImage *post_selectedImage = [UIImage imageNamed:#"create-post_white.png"];
[postTab setImage: [post_unselectedImage_ imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[postTab setSelectedImage: post_selectedImage];
UITabBarItem *notificationTab = [self.exposeTabBar.items objectAtIndex:3];
UIImage *notification_unselectedImage_ = [UIImage imageNamed:#"notifications.png"];
UIImage *notification_selectedImage = [UIImage imageNamed:#"notifications_white.png"];
[notificationTab setImage: [notification_unselectedImage_ imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[notificationTab setSelectedImage: notification_selectedImage];
UITabBarItem *profileTab = [self.exposeTabBar.items objectAtIndex:4];
UIImage *profile_unselectedImage_ = [UIImage imageNamed:#"user-profile.png"];
UIImage *profile_selectedImage = [UIImage imageNamed:#"user-profile_white.png"];
[profileTab setImage: [profile_unselectedImage_ imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[profileTab setSelectedImage: profile_selectedImage];
For unselected Image it is showing the correct image but for selected image it is not showing the right image. It is showing some blue image for the icon.
Please tell how can I prevent this?
Try using the tab bar appearance api method with clear color, in app delegate:
[[UITabBar appearance] setTintColor:[UIColor clearColor]];
try to change tabBar color and tabBar tint
example:
// Generate a black tab bar
self.tabBarController.tabBar.barTintColor = [UIColor blackColor];
// Set the selected icons and text tint color
self.tabBarController.tabBar.tintColor = [UIColor orangeColor];
Try to change tabBarController's "tabEdgeColor" and "topEdgeColor".
Or change the barTint or tint color of tabBar to clear color.
For selected image, you should also set rendering mode, try this:
[homeTab setSelectedImage:[home_selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
You can use custom image for different color
tabBarItem1.image = [[UIImage imageNamed:"imag"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
tabBarItem1.selectedImage = [[UIImage imageNamed:#"selected_image"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
I have several apps that I wrote a couple of years ago that are on the store and all fine, working, approved, etc.
I have now opened them up in Xcode 6 to do some updates to them, and the custom tab bar that I wrote and was working fine in Xcode 4 now displays very odd behaviour.
The bar shows up blank on first load, but when each tab is touched/selected, then the image loads. Once all tabs have been selected once, then the bar is fully working and all images are showing up as expected - but on first load the tab bar shows blank (except for the first tab, because it is selected).
The code hasn't changed since it previously worked, all images are there and loaded fine, because once a tab is selected then they show up fine. It is only on first load that the images don't appear, until that tab is touched and selected.
My code for this custom tab bar is as follows, which all worked fine previously, and works fine in the apps on the store now:
CGRect screenBound = [[UIScreen mainScreen] bounds];
CGSize screenSize = screenBound.size;
CGRect tabbarTopFrame = CGRectMake(0,(screenSize.height - 59),320,10);
UIImageView *tabbarTop = [[UIImageView alloc] initWithFrame:tabbarTopFrame];
tabbarTop.image = [UIImage imageNamed:#"tabbar_top.png"];
[self.tabBarController.view addSubview:tabbarTop];
UIImage *selectedImage0 = [UIImage imageNamed:#"tabbar_introduction_active.png"];
UIImage *unselectedImage0 = [UIImage imageNamed:#"tabbar_introduction_default.png"];
UIImage *selectedImage1 = [UIImage imageNamed:#"tabbar_nests_active.png"];
UIImage *unselectedImage1 = [UIImage imageNamed:#"tabbar_nests_default.png"];
UIImage *selectedImage2 = [UIImage imageNamed:#"tabbar_home_active.png"];
UIImage *unselectedImage2 = [UIImage imageNamed:#"tabbar_home_default.png"];
UIImage *selectedImage3 = [UIImage imageNamed:#"tabbar_dogowners_active.png"];
UIImage *unselectedImage3 = [UIImage imageNamed:#"tabbar_dogowners_default.png"];
UIImage *selectedImage4 = [UIImage imageNamed:#"tabbar_spotted_active.png"];
UIImage *unselectedImage4 = [UIImage imageNamed:#"tabbar_spotted_default.png"];
UITabBar *tabBar = self.tabBarController.tabBar;
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
UITabBarItem *item3 = [tabBar.items objectAtIndex:3];
UITabBarItem *item4 = [tabBar.items objectAtIndex:4];
item0.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item1.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item2.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item3.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item4.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
[item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
[item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
[item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];
[item3 setFinishedSelectedImage:selectedImage3 withFinishedUnselectedImage:unselectedImage3];
[item4 setFinishedSelectedImage:selectedImage4 withFinishedUnselectedImage:unselectedImage4];
What has changed since Xcode 4 regarding the above code, or is there any issues with the above code that would cause the images not to load until after they have been selected?
Xcode shows no errors or warnings with the code as shown.
This is causing me no end of grief, and I just cant understand this behaviour!
[item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
The function is deprecated first in iOS7.
The alternative:
[item0 setImage:[unselectedImage0 imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item0 setSelectedImage:[selectedImage0 imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
Try checking if the unselectedimages are not missing in the folder. Try to remove and reconnect this images again and make sure to add them to target.
How can I change background color of UITabBarItem? I need something like this:
(color under wallet)
To add an image
UITabBarController *tabController = (UITabBarController *)self.window.rootViewController;
//tab1
UIImage *selectedImage = [UIImage imageNamed:#"home-tab-selected"];
UIImage *unselectedImage = [UIImage imageNamed:#"home2-tab"];
MyTabBar *tabBar = (MyTabBar *)tabController.tabBar;
UITabBarItem *item1 = [tabBar.items objectAtIndex:0];
[item1 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
//tab2
selectedImage = [UIImage imageNamed:#"customers-tab-selected"];
unselectedImage = [UIImage imageNamed:#"customers-tab"];
UITabBarItem *item2 = [tabBar.items objectAtIndex:1];
[item2 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
//tab3
selectedImage = [UIImage imageNamed:#"maps-tab-selected"];
unselectedImage = [UIImage imageNamed:#"maps-tab"];
UITabBarItem *item3 = [tabBar.items objectAtIndex:2];
[item3 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
//tab4
selectedImage = [UIImage imageNamed:#"reports-tab-selected"];
unselectedImage = [UIImage imageNamed:#"reports-tab"];
UITabBarItem *item4 = [tabBar.items objectAtIndex:3];
[item4 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
//tab5
selectedImage = [UIImage imageNamed:#"orders-tab-selected"];
unselectedImage = [UIImage imageNamed:#"orders-tab"];
UITabBarItem *item5 = [tabBar.items objectAtIndex:4];
[item5 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
if ([tabBar respondsToSelector:#selector(setBackgroundImage:)])
{
// ios 5 code here
[tabBar setBackgroundImage:[UIImage imageNamed:#"tab-bg"]];
}
Take a look at the appearance proxy of UITabbarItem, particularly for the method -selectedImage(doc).
Just pay attention that in iOS7 most of those images are rendered as templates (I don't know in tab bar item) so you should specify their rendering mode.
Something like that:
[[UIImage imageNamed:#"wallet"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
Those methods are safe on iOS7, if you need to deploy on lower target is better that you check if they are available or your app will crash.
I had an application in which I am adding the images for the UITabBarItems programatically like this..
UIImage *selectedImage0 = [UIImage imageNamed:#"home_hvr.png"];
UIImage *unselectedImage0 = [UIImage imageNamed:#"home.png"];
UIImage *selectedImage1 = [UIImage imageNamed:#"star_hvr.png"];
UIImage *unselectedImage1 = [UIImage imageNamed:#"star.png"];
UITabBar *tabBar = self.tabbarcontroller.tabBar;
self.tabbarcontroller.tabBar.barStyle = UIBarStyleBlack;
self.tabbarcontroller.tabBar.translucent = NO;
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
[item0 setSelectedImage:[selectedImage0 imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item0 setImage:[unselectedImage0 imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item1 setSelectedImage:[selectedImage1 imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item1 setImage:[unselectedImage1 imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
since the tabbaritems doesn't have any titles it will bring a blank space at the bottom of the tab-bar pulling the image above the tab bar,I need no titles but needs to put my image inside the tab bar completely.
Can any body guide me on this?
UITabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
was done this trick worked for me .thanks
Try below code:
[[self.tabBarController.tabBar.items objectAtIndex:0] setFinishedSelectedImage:[UIImage imageNamed:#"offer_btn_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"offer_btn.png"]];
[[self.tabBarController.tabBar.items objectAtIndex:1] setFinishedSelectedImage:[UIImage imageNamed:#"merchant_btn_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"merchant_btn.png"]];
I have struggled several hours now trying to add an uniqe image (because i want the tab separators to show up correctly with no separators to the far left and right) for each item in my UITabBar.
The following code I have in my app delegate displays the items in a strange way at the bottom.. Also would want to remove the title labels. What would be the correct approach? This is driving me crazy..
Image of my tabbar
UIImage *selectedImage0 = [UIImage imageNamed:#"home-tab-active"];
UIImage *unselectedImage0 = [UIImage imageNamed:#"home-tab"];
UIImage *selectedImage1 = [UIImage imageNamed:#"guide-tab-active"];
UIImage *unselectedImage1 = [UIImage imageNamed:#"guide-tab"];
UIImage *selectedImage2 = [UIImage imageNamed:#"search-tab-active"];
UIImage *unselectedImage2 = [UIImage imageNamed:#"search-tab"];
UIImage *selectedImage3 = [UIImage imageNamed:#"favorites-tab-active"];
UIImage *unselectedImage3 = [UIImage imageNamed:#"favorites-tab"];
UIImage *selectedImage4 = [UIImage imageNamed:#"locations-tab-active"];
UIImage *unselectedImage4 = [UIImage imageNamed:#"locations-tab"];
// The Tab Bar
UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
UITabBarItem *item0 = [tabBarController.tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBarController.tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBarController.tabBar.items objectAtIndex:2];
UITabBarItem *item3 = [tabBarController.tabBar.items objectAtIndex:3];
UITabBarItem *item4 = [tabBarController.tabBar.items objectAtIndex:4];
[item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
[item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
[item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];
[item3 setFinishedSelectedImage:selectedImage3 withFinishedUnselectedImage:unselectedImage3];
[item4 setFinishedSelectedImage:selectedImage4 withFinishedUnselectedImage:unselectedImage4];
The titles and images of tab items should come from the content controllers assigned to each of the tabs, not from the tab bar controller. It looks like you have the ones you're creating in the app delegate as well as ones that belong to the individual controllers, and that's why you're getting overlapping images and titles (the default string for a tab bar item is the title of the controller assigned to that tab).