I've created a simple custom tabbar by setting the images of each item, as following:
UITabBar *tabBar = self.tabBarController.tabBar;
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
[item0 setFinishedSelectedImage:[UIImage imageNamed:@"activity_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"activity.png"]];
[item1 setFinishedSelectedImage:[UIImage imageNamed:@"agenda_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"agenda.png"]];
[item2 setFinishedSelectedImage:[UIImage imageNamed:@"settings_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"settings.png"]];
While this works great, I noticed that there is a black blank space under my tabbar
My images are 44px in height, but I think I have to somehow change the height of my tabbar.
The tabBar itself is 49px, and it is rendered in black color behind your images (perhaps in [UITabBar layoutSubviews]
). Then your images are rendered on top. The reason of the offset is because the images you supply are too large, UITabBar expects 30x30px icons, not a picture of the entire UITabBarItem.
Here's a few things to try:
[item setImageInsets:UIEdgeInsetsMake(6, 0, -6, 0)]; // play with insets until it renders correctly
layoutSubviews
to first call super
, then reposition your image as you like. Not recommended, it might break in future iOS versions.