Add separator between section in TabBar

Question

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

I tried to set the background image for tabbar using this image: enter image description here 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 !

Can you post a picture of what you get when you rotate the device? — manecosta, Dec 22 '14 at 19:17
This might be of use: http://stackoverflow.com/questions/12572165/how-can-i-add-a-custom-divider-image-to-the-uitabbar — manecosta, Dec 22 '14 at 19:19
In this case, which will be the size of icons? I have 30x30 for icon.png and 60x60 for icon@2x.png — Tyrone Prude, Dec 23 '14 at 08:09
I have seen background images incorporate the separator graphic. This is something you might consider. — xdeleon, Dec 14 '15 at 19:35

score 15 · Answer 1 · edited May 23 '17 at 11:47

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)
    }
}

This doesn't work. In my iphone there are offsets, also in general this approach doesn't work - e.g. in the ipad (and maybe also landscape mode - don't remember/tested it) the tab items are not distributed equally but there's an inset at the left and right side. — User, Aug 13 '17 at 21:47

bojanb89 · Answer 2 · 2016-07-05T11:51:59.583

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.

While this code may answer the question, it would be better to include some _context_, explaining _how_ it works and _when_ to use it. Code-only answers are not useful in the long run. — Benjamin W., Apr 27 '16 at 14:07
This doesn't work. In my iphone there are offsets, also in general this approach doesn't work - e.g. in the ipad (and maybe also landscape mode - don't remember/tested it) the tab items are not distributed equally but there's an inset at the left and right side. — User, Aug 13 '17 at 21:46

score -1 · Answer 3 · answered Dec 16 '15 at 10:16

You can add separator on the right side of image for each TabBarItem. Image Size : @1x - 64*50 (Device width - 320, Items - 5; so TabBarItem Width = 320/5 = 64)and @2x - 128*100 (If you have five TabBarItems into your TabBar).

When you rotating the device, the width of TabBarItems is changed.

So, You can add separator into your image and make effects was same as you want.

Hope, this is what you're looking for. Any concern get back to me.

Add separator between section in TabBar

3 Answers3

Linked