10

下面的问题和我的类似。

如何使用自定义 UIImage 作为 UITabBarItem 徽章？

是否可以使用背景图像而不是自己绘制？我认为这很好，因为我的应用程序只会使用 1 位数的 badgeValue。

如果真的不可能，我想知道我们是否可以更改徽章颜色。下面问题中的答案并没有真正帮助。

是否可以更改 UITabBarItem 徽章颜色

4

6 回答 6

13

这是你最好的选择。在文件范围内添加此扩展名，您可以根据需要自定义徽章。只需调用self.tabBarController!.setBadges([1,0,2])您的任何根视图控制器。

需要明确的是，这是一个包含三个项目的标签栏，徽章值从左到右。

如果您想添加图像，只需更改addBadge方法

extension UITabBarController {
    
    func setBadges(badgeValues: [Int]) {

        var labelExistsForIndex = [Bool]()

        for _ in badgeValues {
            labelExistsForIndex.append(false)
        }

        for view in self.tabBar.subviews where view is PGTabBadge {
            let badgeView = view as! PGTabBadge
            let index = badgeView.tag
            
            if badgeValues[index] == 0 {
                badgeView.removeFromSuperview()
            }
            
            labelExistsForIndex[index] = true
            badgeView.text = String(badgeValues[index])
        }

        for i in 0...(labelExistsForIndex.count - 1) where !labelExistsForIndex[i] && (badgeValues[i] > 0) {
            addBadge(index: i, value: badgeValues[i], color: .red, font: UIFont(name: "Helvetica-Light", size: 11)!)
        }

    }

    func addBadge(index: Int, value: Int, color: UIColor, font: UIFont) {

        let itemPosition = CGFloat(index + 1)
        let itemWidth: CGFloat = tabBar.frame.width / CGFloat(tabBar.items!.count)

        let bgColor = color

        let xOffset: CGFloat = 5
        let yOffset: CGFloat = -12

        let badgeView = PGTabBadge()
        badgeView.frame.size =  CGSize(width: 12, height: 12)
        badgeView.center = CGPoint(x: (itemWidth * itemPosition) - (itemWidth / 2) + xOffset, y: 20 + yOffset)
        badgeView.layer.cornerRadius = badgeView.bounds.width/2
        badgeView.clipsToBounds = true
        badgeView.textColor = UIColor.white
        badgeView.textAlignment = .center
        badgeView.font = font
        badgeView.text = String(value)
        badgeView.backgroundColor = bgColor
        badgeView.tag = index
        tabBar.addSubview(badgeView)

    }
}
    
class PGTabBadge: UILabel { }
于 2015-08-30T12:39:09.547 回答
3

这是基于TimWhiting 回答的另一种解决方案：

extension UITabBar {
        func setBadge(value: String?, at index: Int, withConfiguration configuration: TabBarBadgeConfiguration = TabBarBadgeConfiguration()) {
            let existingBadge = subviews.first { ($0 as? TabBarBadge)?.hasIdentifier(for: index) == true }
            existingBadge?.removeFromSuperview()

            guard let tabBarItems = items,
                let value = value else { return }

            let itemPosition = CGFloat(index + 1)
            let itemWidth = frame.width / CGFloat(tabBarItems.count)
            let itemHeight = frame.height

            let badge = TabBarBadge(for: index)
            badge.frame.size = configuration.size
            badge.center = CGPoint(x: (itemWidth * itemPosition) - (0.5 * itemWidth) + configuration.centerOffset.x,
                                   y: (0.5 * itemHeight) + configuration.centerOffset.y)
            badge.layer.cornerRadius = 0.5 * configuration.size.height
            badge.clipsToBounds = true
            badge.textAlignment = .center
            badge.backgroundColor = configuration.backgroundColor
            badge.font = configuration.font
            badge.textColor = configuration.textColor
            badge.text = value

            addSubview(badge)
        }
    }

    class TabBarBadge: UILabel {
        var identifier: String = String(describing: TabBarBadge.self)

        private func identifier(for index: Int) -> String {
            return "\(String(describing: TabBarBadge.self))-\(index)"
        }

        convenience init(for index: Int) {
            self.init()
            identifier = identifier(for: index)
        }

        func hasIdentifier(for index: Int) -> Bool {
            let has = identifier == identifier(for: index)
            return has
        }
    }

    class TabBarBadgeConfiguration {
        var backgroundColor: UIColor = .red
        var centerOffset: CGPoint = .init(x: 12, y: -9)
        var size: CGSize = .init(width: 17, height: 17)
        var textColor: UIColor = .white
        var font: UIFont! = .systemFont(ofSize: 11) {
            didSet { font = font ?? .systemFont(ofSize: 11) }
        }

        static func construct(_ block: (TabBarBadgeConfiguration) -> Void) -> TabBarBadgeConfiguration {
            let new = TabBarBadgeConfiguration()
            block(new)
            return new
        }
    }
于 2019-03-06T06:41:57.957 回答
2

您可以使用更强大的解决方案 @ UITabbarItem-CustomBadge。

演示

在此处输入图像描述

简单的两行代码可以让你继续

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  //supplying the animation parameter
  [UITabBarItem setDefaultAnimationProvider:[[DefaultTabbarBadgeAnimation alloc] init]];
  [UITabBarItem setDefaultConfigurationProvider:[[DefaultSystemLikeBadgeConfiguration alloc] init]];

  //rest of your code goes following...

  return YES;
}
于 2016-11-22T15:15:52.247 回答
1

好吧...更改内置徽章的背景对我来说似乎是不可能的。但是，可能的情况如下：

子类化 TabBarController，构建一个在 NIB 中布局的自定义视图，将其添加到选项卡栏中您想要的位置的视图层次结构中。

在自定义视图中，您可以将图像设置为背景，并在该背景之上设置一个标签，这将显示您可以通过代码更改的数值。

然后，您需要确定您要将视图放置在选项卡栏内的自定义视图的水平和垂直位置。

希望这会有所帮助。塞巴斯蒂安

于 2013-04-29T08:38:26.490 回答
1

TimWhiting 的答案更新为 Swift 4，删除了一些强制展开。

extension UITabBarController {
  func setBadges(badgeValues: [Int]) {
    var labelExistsForIndex = [Bool]()

    for _ in badgeValues {
      labelExistsForIndex.append(false)
    }

    for view in tabBar.subviews {
      if let badgeView = view as? PGTabBadge {
        let index = badgeView.tag

        if badgeValues[index] == 0 {
          badgeView.removeFromSuperview()
        }

        labelExistsForIndex[index] = true
        badgeView.text = String(badgeValues[index])
      }
    }

    for i in 0 ... labelExistsForIndex.count - 1 where !labelExistsForIndex[i] && badgeValues[i] > 0 {
      addBadge(
        index: i,
        value: badgeValues[i],
        color: UIColor(red: 4 / 255, green: 110 / 255, blue: 188 / 255, alpha: 1),
        font: UIFont(name: "Helvetica-Light", size: 11)!
      )
    }
  }

  func addBadge(index: Int, value: Int, color: UIColor, font: UIFont) {
    guard let tabBarItems = tabBar.items else { return }
    let itemPosition = CGFloat(index + 1)
    let itemWidth: CGFloat = tabBar.frame.width / CGFloat(tabBarItems.count)

    let bgColor = color

    let xOffset: CGFloat = 12
    let yOffset: CGFloat = -9

    let badgeView = PGTabBadge()
    badgeView.frame.size = CGSize(width: 17, height: 17)
    badgeView.center = CGPoint(x: (itemWidth * itemPosition) - (itemWidth / 2) + xOffset, y: 20 + yOffset)
    badgeView.layer.cornerRadius = badgeView.bounds.width / 2
    badgeView.clipsToBounds = true
    badgeView.textColor = UIColor.white
    badgeView.textAlignment = .center
    badgeView.font = font
    badgeView.text = String(value)
    badgeView.backgroundColor = bgColor
    badgeView.tag = index
    tabBar.addSubview(badgeView)
  }
}

class PGTabBadge: UILabel {}

示例图像

在此处输入图像描述

于 2019-01-07T20:02:18.993 回答
0

对于那些难以将badgeView添加到标签栏项目并为iPad计算其位置的人- 为了在TimWhiting答案中获取xCenterValue，您可以使用它（注意：我在UITabBarController的扩展中编写的所有这些方法）：

  private func configureXCenterValue(index: Int) -> CGFloat {
    let tabbarButtonItems = orderedTabBarItemViews()
    let buttonWithBadge = tabbarButtonItems[index]
    let offsetToButton = buttonWithBadge.frame.minX // important
    let imageOffset = buttonWithBadge.subviews[0].frame.maxX // important
    return offsetToButton + imageOffset
  }

gettung orderedTabbarItemViews 的助手：

  private func orderedTabBarItemViews() -> [UIView] {
    let interactionViews = tabBar.subviews.filter { $0.isUserInteractionEnabled }
    return interactionViews.sorted(by: { $0.frame.minX < $1.frame.minX })
  }

您可以在此方法中使用它：

  private func getBadgeViewCenterPoint(index: Int) -> CGPoint {
    let yOffset: CGFloat = Device.current.isPad ? -5 : -10 // I am using DeviceKit
    let xCenterValue = configureXCenterValue(index: index)
    let yCenterValue = 20 + yOffset
    let centerPosition = CGPoint(x: xCenterValue, y: yCenterValue)
    return centerPosition
  }

主要思想不是通过除以标签栏项目的数量来计算标签栏中视图的 centerX 位置。我们只使用这些项目的偏移量（不是手动计算）。

于 2021-05-09T08:40:04.050 回答