Changing tab bar item background color without affecting the tint

Question

I am new to iOS and I was stuck in design. I have searched through several posts but none of them helps.

Most of the posts have suggested to replace the whole tab bar item with image which I don't think is a good idea.

I would expect something like configuration in the storyboard (eg: User Defined Run Time Attributes) that can help to change the background color of an item without affecting its TINT COLOR.

This is the result I am trying to achieve.

Answer 1

You can set background image tabbar like this way, it would be better to customize the tabbar controller by this way.

In Header file

#import <UIKit/UIKit.h>

@interface CustomTabBarController : UITabBarController

-(void) setBGView;

@end

In M file.

#import "CustomTabBarController.h"

@implementation CustomTabBarController
- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
}
-(void)viewDidLoad
{
    [super viewDidLoad];
    [self setBGView];
}
-(void)setBGView
{
    // Background
    UIImageView* bgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"TabBG.png"]] ; //You can create single color image  or Single Color view to add 
    bgView.frame = CGRectMake(0, self.view.frame.size.height-60, elf.view.frame.size.widdth, 60);
    [self.view addSubview:bgView];

@end

HTH, Enjoy Coding!!

Answer 2

Thanks to @ViralSavaj and tagyro from here

I manage to achieve the output similar to my question, seem like "setSelectionIndicatorImage" is the only way to achieve the output like this.

However, the output might not be good when you run in other devices, one way to resolve this problem is to draw a shape according to the device resolution, you can get the snippets from the above link

beware of the code you reused from @tagyro

CGSize tabSize = CGSizeMake(CGRectGetWidth(self.view.frame)/5, 49);

you might want to change the /5 according to your number of tabs, in my case, i only need to put 4 to get the job done