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

Posted 2023-02-23

【中文标题】在 TabBar 中的部分之间添加分隔符

【英文标题】：Add separator between section in TabBar

【发布时间】：2014-12-22 17:38:51

【问题描述】：

我必须在 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 项目但没有结果。 请您帮我提些建议好吗？

谢谢！

【问题讨论】：

你能发一张你旋转设备时得到的照片吗？

这可能有用：***.com/questions/12572165/…

在这种情况下，图标的大小是多少？我有 30x30 的 icon.png 和 60x60 的 [e-mail]

我看到背景图像包含分隔符图形。这是您可能会考虑的事情。

【参考方案1】：

我刚刚将@bojanb89's 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)
    

【讨论】：

int i=0; i<self.tabBar.items.count - 1 是 0..<(self.tabBar.items!.count - 1)，而不是 0...(self.tabBar.items!.count - 1)

这不起作用。在我的 iphone 中有偏移量，通常这种方法也不起作用 - 例如在 ipad 中（也许还有横向模式 - 不记得/测试过）选项卡项目分布不均，但左侧和右侧有一个插图。

【参考方案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 中调用此方法。

【讨论】：

虽然这段代码可以回答问题，但最好包含一些上下文，解释如何它的工作原理和何时 i> 使用它。从长远来看，纯代码的答案没有用处。

这不起作用。在我的 iphone 中有偏移量，通常这种方法也不起作用 - 例如在 ipad 中（也许还有横向模式 - 不记得/测试过）选项卡项目分布不均，但左侧和右侧有一个插图。

【参考方案3】：

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

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

所以，您可以在image 中添加分隔符，并让效果与您想要的一样。

希望，这就是您要找的。有任何问题可以联系我。