TabBar button background change WHEN selected

Question

I am a very rookie with iOS development, but after a good amount of searching for my answer, I have not yet been able to find it. I am now considering using pure image views over a tab bar, even though Id love to use the tab bar element. My problem is I don't see any way to change the background colour of the tab bar button cell when I select that button. I can change the tint(the colour of the image i used for the button). Is there a war to simply change the background when selected (I am using a white-ish image for when button is selected, hence my need to change background colour of the cell), or should I just use imageView to get my desired need?

Answer 1

EDIT 2 : I think you can achieve your requirements using selectedImageTintColor : (deprecated) or selectionIndicatorImage : methods from UITabBar.

---

Old replies :

According to the documentation: https://developer.apple.com/Library/ios/documentation/UIKit/Reference/UITabBarItem_Class/index.html#//apple_ref/occ/instp/UITabBarItem/selectedImage

There is a convenient property selectedImage to do the stuff.

Use can set it directly in the init method. Example in UIViewController :

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
       self.title = @"my controller";
       self.tabBarItem = [[UITabBarItem alloc] initWithTitle:self.title image:[UIImage imageNamed:@"normalTabBarItem"] selectedImage:[UIImage imageNamed:@"selectedTabBarItem"]];
    }
    return self;
}

EDIT : A UITabBarItem doesn't have a background color. So you must embed the "background color" directly in the image and selected image.

By default, the actual unselected and selected images are automatically created from the alpha values in the source images. To prevent system coloring, provide images with UIImageRenderingModeAlwaysOriginal.

Answer 2

To change selected tab bar item background I made custom class called TabBar with following init:

#import "TabBar.h"
#define RGB(r, g, b) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1]

@implementation TabBar

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    if (!(self = [super initWithCoder:aDecoder])) return nil;

    [self setupSelectionIndicatorImage];

    return self;
}

- (void)setupSelectionIndicatorImage {
    UIView *item = self.subviews.firstObject;
    UIColor *backgroundColor = RGB(0, 117, 255);

    // Creating background image
    CGRect rect = CGRectMake(0, 0, item.bounds.size.width, item.bounds.size.height);
    UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0); // 0 == device main screen scale
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [backgroundColor CGColor]);
    CGContextFillRect(context, rect);
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    self.selectionIndicatorImage = img;
}

@end