在TabBar中的部分之间添加分隔符

Question

我必须在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项目,但没有结果.请你帮我提一下建议吗？

谢谢 !

Answer 1

我刚刚将@ bojanb89的答案转换为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)
    }
}

Answer 2

您可以以编程方式为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中调用此方法.

Answer 3

您可以在每个图像的右侧添加分隔符TabBarItem。图像大小：（@1x - 64*50设备宽度 - 320，项目 - 5；因此 TabBarItem 宽度 = 320/5 = 64）和@2x - 128*100（如果TabBarItemsTabBar 中有 5 个）。

当您旋转设备时， 的宽度TabBarItems会发生变化。

因此，您可以在其中添加分隔符image，并使效果与您想要的相同。

希望，这就是您正在寻找的。有任何疑虑请回复我。