Add separator between section in TabBar

Question

I have to add separator between section in TabBar as in image below:

I tried to set the background image for tabbar using this image: but I have problems when I rotate the device.

The code that I used:

 + (UITabBarController *)loadTabbar
 {
     UITabBarController *tabBarController = [UITabBarController new];
 
     MenuVC     *viewController0 = [MenuVC new];
     FavVC      *viewController1 = [FavVC new];
     UploadVC   *viewController2 = [UploadVC new];
     RestoreVC  *viewController3 = [RestoreVC new];
     SettingsVC *viewController4 = [SettingsVC new];
     
     tabBarController.viewControllers = @[viewController0, viewController1, iewController2, viewController3, viewController4];
     [tabBarController.tabBar setBackgroundImage:[UIImage mageNamed:@"tabbar_color"]];
 
     [self setRootController:tabBarController];
     
     return  tabBarController;
 }

Also, I tried to add a separator on the right side of image that I used for abbar item but without result. Can you, please, help me with any advice ?

Thanks !

Answer 1

I just converted @bojanb89's answer to Swift 3. This doesn't render a background image, but simply adds a view between each tab bar item.

func setupTabBarSeparators() {
    let itemWidth = floor(self.tabBar.frame.size.width / CGFloat(self.tabBar.items!.count))

    // this is the separator width.  0.5px matches the line at the top of the tab bar
    let separatorWidth: CGFloat = 0.5

    // iterate through the items in the Tab Bar, except the last one
    for i in 0...(self.tabBar.items!.count - 1) {
        // make a new separator at the end of each tab bar item
        let separator = UIView(frame: CGRect(x: itemWidth * CGFloat(i + 1) - CGFloat(separatorWidth / 2), y: 0, width: CGFloat(separatorWidth), height: self.tabBar.frame.size.height))

        // set the color to light gray (default line color for tab bar)
        separator.backgroundColor = UIColor.lightGray

        self.tabBar.addSubview(separator)
    }
}

Answer 2

You can make programmatically a background for UITabBar:

#define SEPARATOR_WIDTH 0.4f
#define SEPARATOR_COLOR [UIColor whiteColor]

- (void) setupTabBarSeparators {
    CGFloat itemWidth = floor(self.tabBar.frame.size.width/self.tabBar.items.count);

    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tabBar.frame.size.width, self.tabBar.frame.size.height)];
    for (int i=0; i<self.tabBar.items.count - 1; i++) {
        UIView *separator = [[UIView alloc] initWithFrame:CGRectMake(itemWidth * (i +1) - SEPARATOR_WIDTH/2, 0, SEPARATOR_WIDTH, self.tabBar.frame.size.height)];
        [separator setBackgroundColor:SEPARATOR_COLOR];
        [bgView addSubview:separator];
    }

    UIGraphicsBeginImageContext(bgView.bounds.size);
    [bgView.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *tabBarBackground = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    [[UITabBar appearance] setBackgroundImage:tabBarBackground];
}

You should only extend UITabBarController and make a custom UITabBarViewController. You should call this method in viewDidLoad and in willRotateToInterfaceOrientation.