What is the best way to add a custom center button to the tab bar?

Question

Many applications have a standard tab bar with a custom button in the center that performs some special function. Some examples can be found here:

http://mobile-patterns.com/custom-tab-navigation

What is the best way to implement this?

Answer 1

Here you can see how to implement this button. I'm going to paste the code so that it stays here forever:

UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0.0, 0.0, buttonImage.size.width, buttonImage.size.height); [button setBackgroundImage:buttonImage forState:UIControlStateNormal]; [button setBackgroundImage:highlightImage forState:UIControlStateHighlighted]; CGFloat heightDifference = buttonImage.size.height - self.tabBar.frame.size.height; if (heightDifference < 0) button.center = self.tabBar.center; else { CGPoint center = self.tabBar.center; center.y = center.y - heightDifference/2.0; button.center = center; } [self.view addSubview:button]; 

Hope this helps

Answer 2

I got a Franciso code working with a few minor tricks. I put the code in the application didFinishLaunchingWithOptions method of the standard Tab Bar application template in Xcode 4.1. I believe Xcode 4.2 may have a different template.

 UIImage *buttonImage = [UIImage imageNamed:@"tabItemOff.png"]; UIImage *highlightImage = [UIImage imageNamed:@"tabItemSelected.png"]; UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0.0, 0.0, buttonImage.size.width, buttonImage.size.height); [button setBackgroundImage:buttonImage forState:UIControlStateNormal]; [button setBackgroundImage:highlightImage forState:UIControlStateHighlighted]; CGFloat heightDifference = buttonImage.size.height - self.tabBarController.tabBar.frame.size.height; if (heightDifference < 0) button.center = self.tabBarController.tabBar.center; else { CGPoint center = self.tabBarController.tabBar.center; center.y = center.y - heightDifference/2.0; button.center = center; } [self.tabBarController.view addSubview:button];