Setting the background color of a specific tab bar Item and making it a seperate item

Question

Like the Instagram app, i would like to have my center tab bar item a specific color.

I understand this is how I would set the selected image:

[[UITabBar appearance] setSelectionIndicatorImage:[AppDelegate imageFromColor:[UIColor colorWithRed:0.484 green:0.403 blue:0.884 alpha:1] forSize:CGSizeMake(64, 49) withCornerRadius:0]];

But how would I keep the 3rd tab's background to always stay that color?

Also, how do I make the middle tab separate from the rest, as in, when I press the center tab, there is modal presentation of a view controller (like instagram), and the previous tab stays selected for when dismissing the modal view controller.

Simply add a custom `UIButton` with specific image above the center tabbar item. Subclass the tabbarcontroller and add action method in this class. And on action you can present whatever viewcontroller and above the tabbar and on dismiss the previously selected tab will be there intact. Don't know this is the best way or not, sharing a thought. — Akhilrajtr, May 19 '15 at 06:27
ya that may work @Akhilrajtr there must be a better way though. Thats really all I can think of too though at the moment. — Andy, May 19 '15 at 06:32
You may need to subclass Tab bar controller.Below is link which will help you , how to subclass the tab bar controller http://stackoverflow.com/questions/8909379/setting-a-background-image-for-a-tabbar — Mukesh, May 19 '15 at 06:33
@Andy yes, there will be better way. But i think in all cases you may need to subclass the tabbarcontroller. And showing the previous tab will also be handled separately. — Akhilrajtr, May 19 '15 at 06:41

Mukesh · Accepted Answer · 2015-05-19T06:57:05.727

@interface BaseViewController : UITabBarController

// Create a view controller and setup it's tab bar item with a title and image
-(UIViewController*) viewControllerWithTabTitle:(NSString*)title image:(UIImage*)image;

// Create a custom UIButton and add it to the center of our tab bar
-(void) addCenterButtonWithImage:(UIImage*)buttonImage highlightImage:  (UIImage*)highlightImage;


@implementation BaseViewController


-(UIViewController*) viewControllerWithTabTitle:(NSString*) title image:(UIImage*)image
{
UIViewController* viewController = [[UIViewController alloc] init] ;
 viewController.tabBarItem = [[UITabBarItem alloc] initWithTitle:title image:image tag:0];

return viewController;
 }

// Create a custom UIButton and add it to the center of our tab bar

  -(void) addCenterButtonWithImage:(UIImage*)buttonImage highlightImage:(UIImage*)highlightImage
{
UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
button.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleTopMargin;
 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
 {
center = self.tabBar.center;
center.y = center.y - heightDifference/2.0;
button.center = center;
 }

  [self.view addSubview:button];
 }

Subclass this Tab controller and call the above function to set image o tab bar items and center button like Instagram

  @interface InstagramViewController : BaseViewController


  @end

@implementation InstagramViewController

- (void)viewDidLoad
   {
      [super viewDidLoad];

 self.viewControllers = [NSArray arrayWithObjects:
                        [self viewControllerWithTabTitle:@"Feed" image:[UIImage imageNamed:@"112-group.png"]],
                        [self viewControllerWithTabTitle:@"Popular" image:[UIImage imageNamed:@"29-heart.png"]],
                        [self viewControllerWithTabTitle:@"Share" image:nil],
                        [self viewControllerWithTabTitle:@"News" image:[UIImage imageNamed:@"news.png"]],
                        [self viewControllerWithTabTitle:@"@user" image:[UIImage imageNamed:@"123-id-card.png"]], nil];
}


 -(void)willAppearIn:(UINavigationController *)navigationController
    {

     [self addCenterButtonWithImage:[UIImage imageNamed:@"cameraTabBarItem.png"] highlightImage:nil];
    }

@end

You should post some part of answer here. Otherwise this answer should be a comment. — Bista, May 19 '15 at 06:32

Setting the background color of a specific tab bar Item and making it a seperate item

1 Answers1