Add separator between section in TabBar

问题:

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 !

回答1:

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.

回答2:

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

回答3:

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.