Добавить разделитель между разделами в TabBar

Мне нужно добавить разделитель между секцией в TabBar, как показано на рисунке ниже:

Я попытался установить фоновое изображение для табло с помощью этого изображения: но у меня проблемы при повороте устройства.

Код, который я использовал:

 + (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;
 }

Кроме того, я попытался добавить разделитель в правой части изображения, который я использовал для элемента abbar, но без результата. Можете ли вы помочь мне с советами?

Спасибо!

Ответ 1

Вы можете программно создать фон для 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];
}

Вы должны расширять UITabBarController и настраивать UITabBarViewController. Вы должны вызвать этот метод в viewDidLoad и в willRotateToInterfaceOrientation.

Ответ 2

Я просто преобразовал @bojanb89 answer в Swift 3. Это не отображает фоновое изображение, а просто добавляет представление между каждым элементом панели табуляции.

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

Вы можете добавить разделитель в правой части изображения для каждого TabBarItem. Размер изображения: @1x - 64*50 (Ширина устройства - 320, Элементы - 5, поэтому TabBarItem Width = 320/5 = 64) и @2x - 128*100 (Если в вашем TabBar есть пять TabBarItems).

При повороте устройства изменяется ширина TabBarItems.

Итак, вы можете добавить разделитель в свой image, и сделать эффекты будут такими же, как вы хотите.

Надеюсь, это то, что вы ищете. Меня волнует любая забота.