我想在 UIBarButtonItem 上放置徽章。为此，我使用以下参考资料
在此我创建“UIBarButtonItem+Badge.swift”文件并将该代码放入其中。在我的视图控制器中，我采用 UIBarButtonItem 的出口。并调用该函数，但它对我不起作用。我的视图控制器文件是这样的
我的 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!
在视图didload函数中
notificationLabel.addBadge(text: "4")
这是 @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
这是将徽章放在导航栏上的简单解决方案
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)]
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)
}
}
用途：
item = UIBarButtonItem(icon: UIImage(), badge: "\(Test)", target: self, action: nil)
self.navigationItem.rightBarButtonItems = [item]
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)
}
}
步骤：
在导航/工具栏中拖放 UIButton 或使用 customView 初始值设定项以编程方式添加它。
在视图didload中调用setup方法：
覆盖 func viewDidLoad() { super.viewDidLoad()
// Do any additional setup after loading the view.
itemsButton.setup(image: UIImage(named: "image_name"))
}
以编程方式连接 @IBOutlet/或 并在需要的地方调用 setBadge 方法：
badgeButton.setBadge(with: 10)
这是我的版本，尽管问题已经很老了。 我只是在上面已经有效的答案的基础上做了一些改进（至少在我看来）。
我将其创建为扩展，以便可以在代码中的任何位置使用和重用。
最大的区别是，对
UIButton'sUIBarButtonItem在此示例中，我创建了一个简单的圆形徽章，但如果需要，可以将
UIImageViewUILabel我添加了内联注释来解释代码中发生的情况：
extension UIBarButtonItem {
convenience init(icon: UIImage, badgeColor: UIColor = .systemRed, target: Any? = nil, action: Selector? = nil) {
// create the button on which the badge will be attached
let button = UIButton()
// call the designated initializer
self.init(customView: button)
// apply any necessary customizations to the button's image
let imageConfig = UIImage.SymbolConfiguration(font: .preferredFont(forTextStyle: .body), scale: .large)
// set button's image
button.setImage(icon.withConfiguration(imageConfig), for: .normal)
// prepare whatever desired customization fro the badge
let circleConfig = UIImage.SymbolConfiguration(font: .preferredFont(forTextStyle: .body), scale: .small)
// create a circle image for the badge applying the customizations
let circle = UIImage(systemName: "circle.fill")?.withConfiguration(circleConfig)
// create a simple UIImageView for the badge
let badge = UIImageView(image: circle)
// set the badge color
badge.tintColor = badgeColor
// prepare badge (UIImageView) for applying constraints for the layout
badge.translatesAutoresizingMaskIntoConstraints = false
// add the badge to the button's view hierarchy
button.addSubview(badge)
// create and apply the constraints
// in this case the badge will be attached to the top-trailing corner of the button
// offset by 8 points each direction
NSLayoutConstraint.activate([
badge.topAnchor.constraint(equalTo: button.topAnchor, constant: -8),
button.trailingAnchor.constraint(equalTo: badge.trailingAnchor, constant: -8)
])
// assign the provided target and action in order to be handled by whatever was passed
self.target = target as? AnyObject
self.action = action
// add another target as self and action so the UIButton's tap will be detected and forwarded to the function's target/action
button.addTarget(self, action: #selector(handleTap(_:)), for: .touchUpInside)
}
/// Handle the UIButton's tap and forward it to the UIBarButtonItem's target and action if available
/// - Parameter button: the UIBarButtonItem's custom view that calls the method
@objc private func handleTap(_ button: UIButton) {
// check if the UIBarButtonItem has a target and an action otherwise return
guard let target, let action else { return }
// check if the the target has implemented and can execute the action
if target.responds(to: action) {
// tell the target to perform the action that was checked above
_ = target.perform(action, with: self)
}
}
}