iPhone: How can I build my own TabBar?

Question

Because I have some requirements for a tabbar that the normal iphone tabbar cannot provide, I am needing to build my own.

What is the best way to build my own tabbar, specifically, how to add/remove (show/hide) views in my main view controller in the right way, taking into account memory and best practices for subviews?

Answer 1

It really depends on your application. If you can afford to keep in memory all view controllers, that assigned to your tabbar, then you can use a simple array, that would store all appropriate view controllers, and you show them using the index in that array. It is also a good idea to create your custom view controller, that would store it's own tabbar image (and/or title). And your tabbar would take all that values from there.

If you can't afford so much memory (but it's not very possible) then you can store NSDictionary in the array, and not view controllers. And when user taps on the tabbar item you just unload the previous view controller and create the new one, with parameters from that dictionary. Or instead of the dictionary you can use some custom container class.

Answer 2

As I've stated elsewhere, it's almost never a good idea to get rid of the core navigational classes that are provided by UIKit. What type of application requirements do you have that you think merit a completely custom tab bar class? It's almost always possible to achieve the necessary customizations by either subclassing, categorizing, or making use of layers.

UPDATE 1: So here's what I did in some of my apps to get a custom tab bar implementation.

1. Create a subclass of UITabBar
2. Add a method to your custom subclass called something like -updateTabBarImageForViewControllerIndex:
3. In Interface Builder, change the class of your tab bar controller's tab bar to your custom subclass
4. In whatever class conforms to your tab bar controller's delegate (e.g., your app delegate), implement -tabBarController:shouldSelectViewController: and call -updateTabBarImageForViewControllerIndex: on your custom tab bar subclass

Basically, you want to notify your tab bar subclass every time the tab bar controller is about to switch view controllers. When this happens, determine what image you need to choose for your tab bar. You should have n images for your tab bar, one for the selected state of each tab. It's possible to actually fudge the implementation of UITabBarItem and just work with individual images, but it's a little more work.

// MyAppDelegate.m

- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController
{
    // Determine the index based on the selected view controller

    NSUInteger viewControllerIndex = ...;

    [(MyTabBar *)tabBarController.tabBar updateTabBarImageForViewControllerIndex:viewControllerIndex];

    return YES;
}

// MyTabBar.m

- (void)updateTabBarImageForViewControllerIndex:(NSUInteger)index
{
    // Determine the image name based on the selected view controller index

    self.selectedTabBarImage = [UIImage imageNamed:...];

    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    CGContextDrawImage(UIGraphicsGetCurrentContext(), rect, self.selectedTabBarImage.CGImage);
}

UPDATE 2: Now that I think about it more, you actually could (and should) get away with what you're trying to achieve without subclassing UITabBar at all. Import <QuartzCore/QuartzCore.h> and take advantage of layer contents. :)

// MyAppDelegate.m

- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController
{
    // Determine the image name based on the selected view controller

    CGImageRef newTabBarImageRef = [[UIImage imageNamed:...] CGImage];
    tabBarController.tabBar.layer.contents = (id)newTabBarImageRef;

    return YES;
}

Answer 3

This two accepted answers break in iOS5. What I did instead was to keep the custom tab bar subclass, and leave only this method intact:

- (void)drawRect:(CGRect)rect
{
   CGContextDrawImage(UIGraphicsGetCurrentContext(), rect, nil);
} 

Then in MainWindow.xib, I created a custom view with an imageview as the background and UIButtons as the tab bar items.

In the TabController delegate, I update the buttons' selected states.

- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController
{
 // Determine the index based on the selected view controller

 UIButton *newBtn;

 if(viewController == homeVC) {
   ...
 }
 // Update the buttons
 newBtn.selected = YES;
 _selectedTabBtn.selected = NO;
 _selectedTabBtn = newBtn;

 return YES;
}