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