如何调整标签栏徽章位置？

Posted 2023-03-22

【中文标题】如何调整标签栏徽章位置？

【英文标题】：How to adjust tab bar badge position?

【发布时间】：2014-06-16 04:52:29

【问题描述】：

我在标签栏上显示徽章，但是当数字增加时，它会出现在标签栏项目中，如图所示

我想将徽章视图稍微向左移动，使其适合选定的标签图像。我按照here 的描述进行了尝试，但没有运气。 那么有什么方法可以调整徽章视图位置吗？任何帮助将不胜感激。

【问题讨论】：

我在我的问题中提到了那个线程，因为我已经尝试过了。

各位有什么帮助吗？

【参考方案1】：

我发现 Kateryna 的回答有助于我走上正轨，但我必须对其进行一些更新：

func repositionBadge(tab: Int)

    for badgeView in self.tabBarController!.tabBar.subviews[tab].subviews 

        if NSStringFromClass(badgeView.classForCoder) == "_UIBadgeView" 
            badgeView.layer.transform = CATransform3DIdentity
            badgeView.layer.transform = CATransform3DMakeTranslation(-17.0, 1.0, 1.0)
        
    

请注意制表符整数不是零索引的，所以第一个制表符将是数字 1，第二个数字是 2，依此类推。

【参考方案2】：

当你更新你的徽章值时，添加这样一个方法：

func updateBadge(#value: UInt, tabBarItemTag: Int) 
     self.viewControllerForTag(tabBarItemTag)?.tabBarItem.badgeValue = value
     for badgeView in (tabBar.subviews[tabBarItemTag] as! UIView).subviews 
         let className = "\(_stdlib_getDemangledTypeName(badgeView))"
         if className.rangeOfString("BadgeView").location != NSNotFound 
             badgeView.layer.transform = CATransform3DIdentity
             badgeView.layer.transform = CATransform3DMakeTranslation(0.0, 10.0, 20.0)
         
     

您需要使用第二个 CATransform3DMakeTranslation 来进行正确定位。在此代码中，徽章在底部/左侧移动了一点。首先需要 CATransform3DMakeTranslation 来假装徽章移动。这是一个 Swift 代码，但您可以轻松地将其转换为 Objective-C。

【参考方案3】：

默认情况下，徽章与您的标签栏图像对齐。如果您将大图像添加为标签栏项目图像，您可以使用以下代码对其进行调整。

for tabBarButton in self.tabBar.subviews
        for badgeView in tabBarButton.subviews
        var className=NSStringFromClass(badgeView.classForCoder)
            if  className == "_UIBadgeView"
            
                badgeView.layer.transform = CATransform3DIdentity
                badgeView.layer.transform = CATransform3DMakeTranslation(-17.0, 1.0, 1.0)
            
        
    

【讨论】：

完美答案兄弟

【参考方案4】：

在 Objective-C 中：

    for (UIView *tabBarButton in self.navigationController.tabBarController.tabBar.subviews)
    
        for (UIView *badgeView in tabBarButton.subviews)
        
            NSString *className = NSStringFromClass([badgeView class]);

            // Looking for _UIBadgeView
            if ([className rangeOfString:@"BadgeView"].location != NSNotFound)
            
                badgeView.layer.transform = CATransform3DIdentity;
                badgeView.layer.transform = CATransform3DMakeTranslation(-5.0, 1.0, 1.0);
            
        
    

【参考方案5】：

在 C# Xamarin 中

void RepositionBadge(int tab)

    foreach (var badgeView in TabBar.Subviews[tab].Subviews)
    
        if (badgeView.Class.Name == "_UIBadgeView")
        
            badgeView.Layer.Transform = CATransform3D.Identity;
            badgeView.Layer.Transform = CATransform3D.MakeTranslation(-10.0f, 1.0f, 1.0f);
        
    

【参考方案6】：

斯威夫特 4、5

我为UITabBar 创建了一个扩展，它可以快速获取徽章视图和徽章标签：

extension UITabBar 
    func badgeViewForItem(at index: Int) -> UIView? 
        guard subviews.count > index else 
            return nil
        
        return subviews[index].subviews.first(where:  NSStringFromClass($0.classForCoder) == "_UIBadgeView" )
    

    func labelForItem(at index: Int) -> UILabel? 
        guard subviews.count > index else 
            return nil
        
        return badgeViewForItem(at: index)?.subviews.first(where:  $0 is UILabel ) as? UILabel
    

然后您可以执行以下操作：

let firstItemBadgeView = badgeViewForItem(at: 0)!
// Do something with the badge view like setting the border, background color ...
// ex: firstItemBadgeView.backgroundColor = UIColor.clear