如何在Swift 4中将徽章放置在UIBarButtonItem上？

Question

我想在UIBarButtonItem上添加徽章。为此，我使用以下参考

在Swift中向右侧栏按钮项添加徽章提醒

我创建了'UIBarButtonItem+Badge.swift'文件并将代码放入其中。在我的视图控制器中，我取出UIBarButtonItem的outlet，并调用函数，但它对我没有起作用。我的视图控制器文件如下所示

我的UIBarButtonItem+Badge.swift文件是这样的

extension CAShapeLayer {
func drawRoundedRect(rect: CGRect, andColor color: UIColor, filled: Bool) {
    fillColor = filled ? color.cgColor : UIColor.white.cgColor
    strokeColor = color.cgColor
    path = UIBezierPath(roundedRect: rect, cornerRadius: 7).cgPath
   }
  }

   private var handle: UInt8 = 0;

   extension UIBarButtonItem {
private var badgeLayer: CAShapeLayer? {
    if let b: AnyObject = objc_getAssociatedObject(self, &handle) as AnyObject? {
        return b as? CAShapeLayer
    } else {
        return nil
    }
}

func setBadge(text: String?, withOffsetFromTopRight offset: CGPoint = CGPoint.zero, andColor color:UIColor = UIColor.red, andFilled filled: Bool = true, andFontSize fontSize: CGFloat = 11)
{
    badgeLayer?.removeFromSuperlayer()

    if (text == nil || text == "") {
        return
    }

    addBadge(text: text!, withOffset: offset, andColor: color, andFilled: filled)
}

 func addBadge(text: String, withOffset offset: CGPoint = CGPoint.zero, andColor color: UIColor = UIColor.red, andFilled filled: Bool = true, andFontSize fontSize: CGFloat = 11)
{
    guard let view = self.value(forKey: "view") as? UIView else { return }

    var font = UIFont.systemFont(ofSize: fontSize)

    if #available(iOS 9.0, *) { font = UIFont.monospacedDigitSystemFont(ofSize: fontSize, weight: UIFont.Weight.regular) }
    let badgeSize = text.size(withAttributes: [NSAttributedString.Key.font: font])

    // Initialize Badge
    let badge = CAShapeLayer()

    let height = badgeSize.height;
    var width = badgeSize.width + 2 /* padding */

    //make sure we have at least a circle
    if (width < height) {
        width = height
    }

    //x position is offset from right-hand side
    let x = view.frame.width - width + offset.x

    let badgeFrame = CGRect(origin: CGPoint(x: x, y: offset.y), size: CGSize(width: width, height: height))

    badge.drawRoundedRect(rect: badgeFrame, andColor: color, filled: filled)
    view.layer.addSublayer(badge)

    // Initialiaze Badge's label
    let label = CATextLayer()
    label.string = text
    label.alignmentMode = CATextLayerAlignmentMode.center
    label.font = font
    label.fontSize = font.pointSize

    label.frame = badgeFrame
    label.foregroundColor = filled ? UIColor.white.cgColor : color.cgColor
    label.backgroundColor = UIColor.clear.cgColor
    label.contentsScale = UIScreen.main.scale
    badge.addSublayer(label)

    // Save Badge as UIBarButtonItem property
    objc_setAssociatedObject(self, &handle, badge, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}

private func removeBadge() {
    badgeLayer?.removeFromSuperlayer()
   }
  }

我的视图控制器文件是这样的

import UIKit

@IBOutlet weak var notificationLabel: UIBarButtonItem!

在viewDidLoad函数中

notificationLabel.addBadge(text: "4")

- sohan123

---

我目前也遇到了这个问题。将徽章异步设置对我有用，但这只是一个解决方法：DispatchQueue.main.async { notificationLabel.addBadge(text: "4") } - Andreas Oetjen

它能够工作，但有时候会出现问题。 - sohan123

有任何适当的解决方案吗？@ Andreas Oetjen - sohan123

Answer 1

以下是@VishalPethani的Swift 4解决方案，经过一些方便的小改动。

将此UIBarButtonItem添加到您的代码中：

class BadgedButtonItem: UIBarButtonItem {

    public func setBadge(with value: Int) {
        self.badgeValue = value
    }

    private var badgeValue: Int? {
        didSet {
            if let value = badgeValue,
                value > 0 {
                lblBadge.isHidden = false
                lblBadge.text = "\(value)"
            } else {
                lblBadge.isHidden = true
            }
        }
    }

    var tapAction: (() -> Void)?

    private let filterBtn = UIButton()
    private let lblBadge = UILabel()

    override init() {
        super.init()
        setup()
    }

    init(with image: UIImage?) {
        super.init()
        setup(image: image)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    private func setup(image: UIImage? = nil) {

        self.filterBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
        self.filterBtn.adjustsImageWhenHighlighted = false
        self.filterBtn.setImage(image, for: .normal)
        self.filterBtn.addTarget(self, action: #selector(buttonPressed), for: .touchUpInside)

        self.lblBadge.frame = CGRect(x: 20, y: 0, width: 15, height: 15)
        self.lblBadge.backgroundColor = .red
        self.lblBadge.clipsToBounds = true
        self.lblBadge.layer.cornerRadius = 7
        self.lblBadge.textColor = UIColor.white
        self.lblBadge.font = UIFont.systemFont(ofSize: 10)
        self.lblBadge.textAlignment = .center
        self.lblBadge.isHidden = true
        self.lblBadge.minimumScaleFactor = 0.1
        self.lblBadge.adjustsFontSizeToFitWidth = true
        self.filterBtn.addSubview(lblBadge)
        self.customView = filterBtn
    }

    @objc func buttonPressed() {
        if let action = tapAction {
            action()
        }
    }

}

然后你可以像这样使用它：

class ViewController: UIViewController {

    let btn = BadgedButtonItem(with: UIImage(named: "your_image"))

    override func viewDidLoad() {
        super.viewDidLoad()

        self.navigationItem.rightBarButtonItem = btn

        btn.tapAction = {
            self.btn.setBadge(with: 1)
        }

    }
}

这是一个带有一些自定义选项的存储库 https://github.com/Syngmaster/BadgedBarButtonItem

- Syngmaster

---

当您设置徽章值时，栏按钮项目将不再显示。@syngmaster - Mark Thomas

Answer 2

这里有一个简单的解决方案，可以将徽章放在导航栏上。

let filterBtn = UIButton.init(frame: CGRect.init(x: 0, y: 0, width: 30, height: 30))
filterBtn.setImage(UIImage.fontAwesomeIcon(name: .filter, style: .solid,
                                                   textColor: UIColor.white,
                                                   size: CGSize(width: 25, height: 25)), for: .normal)
filterBtn.addTarget(self, action: #selector(filterTapped), for: .touchUpInside)

let lblBadge = UILabel.init(frame: CGRect.init(x: 20, y: 0, width: 15, height: 15))
self.lblBadge.backgroundColor = COLOR_GREEN
self.lblBadge.clipsToBounds = true
self.lblBadge.layer.cornerRadius = 7
self.lblBadge.textColor = UIColor.white
self.lblBadge.font = FontLatoRegular(s: 10)
self.lblBadge.textAlignment = .center

filterBtn.addSubview(self.lblBadge)

self.navigationItem.rightBarButtonItems = [UIBarButtonItem.init(customView: filterBtn)]

在你的情况下

self.navigationItem.rightBarButtonItems = [notificationLabel.init(customView: filterBtn)]

- VishalPethani

---

但是我应该把它放在我的导航栏哪里呢？我使用UIBarButtonItem的outlet。我应该把它放在这里吗？ - sohan123

尝试这个： notificationLabel.init(customeView: filterBtn); self.navigationItem.rightBarButtonItems = [notificationLabel]. - VishalPethani

@sohan123 能给一个赞吗？谢谢。 - VishalPethani

Answer 3

import Foundation
import UIKit

extension UIBarButtonItem {
        
    convenience init(icon: UIImage, badge: String, _ badgeBackgroundColor: UIColor = #colorLiteral(red: 0.9156965613, green: 0.380413115, blue: 0.2803866267, alpha: 1), target: Any? = self, action: Selector? = nil) {
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 24, height: 24))
        imageView.image = icon

        let label = UILabel(frame: CGRect(x: -8, y: -5, width: 18, height: 18))
        label.text = badge
        label.backgroundColor = badgeBackgroundColor
        label.adjustsFontSizeToFitWidth = true
        label.textAlignment = .center
        label.font = UIFont.boldSystemFont(ofSize: 10)
        label.clipsToBounds = true
        label.layer.cornerRadius = 18 / 2
        label.textColor = .white

        let buttonView = UIView(frame: CGRect(x: 0, y: 0, width: 24, height: 24))
        buttonView.addSubview(imageView)
        buttonView.addSubview(label)
        buttonView.addGestureRecognizer(UITapGestureRecognizer.init(target: target, action: action))
        self.init(customView: buttonView)
    }
    
}

Use:

item = UIBarButtonItem(icon: UIImage(), badge: "\(Test)", target: self, action: nil)
self.navigationItem.rightBarButtonItems = [item]

- Mohammad Razipour

Answer 4

extension UIBarButtonItem {
  func setBadge(with value: Int) {
    guard let lblBadge = customView?.viewWithTag(100) as? UILabel else { return }
    if value > 0 {
      lblBadge.isHidden = false
      lblBadge.text = "\(value)"
    } else {
      lblBadge.isHidden = true
    }
  }
  
  func setup(image: UIImage? = nil) {
    customView?.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
    let lblBadge = UILabel()
    lblBadge.frame = CGRect(x: 20, y: 0, width: 15, height: 15)
    lblBadge.backgroundColor = .red
    lblBadge.tag = 100
    lblBadge.clipsToBounds = true
    lblBadge.layer.cornerRadius = 7
    lblBadge.textColor = UIColor.white
    lblBadge.font = UIFont.systemFont(ofSize: 10)
    lblBadge.textAlignment = .center
    lblBadge.isHidden = true
    lblBadge.minimumScaleFactor = 0.1
    lblBadge.adjustsFontSizeToFitWidth = true
    customView?.addSubview(lblBadge)
  }
}

步骤：

1. 在导航栏/工具栏中拖放UIButton，或使用customView初始化程序以编程方式添加它。

2. 在viewDidLoad中调用setup方法：

   override func viewDidLoad() { super.viewDidLoad()

    // 加载视图后进行任何其他设置。
    itemsButton.setup(image: UIImage(named: "image_name"))
   

   }

3. 连接@IBOutlet/或以编程方式，并在需要时调用setBadge方法：

   badgeButton.setBadge(with: 10)

- Mihail Salari