Swift aggiungi il badge alla barra di navigazioneButtonItem e UIButton

Question

Sto tentando di visualizzare il badge sul mio pulsante di notifica, in app come visualizzato su AppIcon.

Finora tutto ciò che ho cercato è legato all'obj. C, ma nulla che abbia discusso in modo specifico per implementare tale soluzione in Swift,

Si prega di aiutare a trovare una soluzione per aggiungere una classe/codice personalizzato per ottenere Badge su UiBarbutton e UiButton.

ricercato finora:

https://github.com/Marxon13/M13BadgeView

con classe MKBadge ecc

Answer 1

Per UIBarButtonItem si può provare questo progetto:

ENMBadgeBarButtonItem

Answer 2

Il MIBadgeButton-Swift sta lavorando anche su UIBarButtonItems. Ecco il mio codice dopo la barra di navigazione è creato:

let rightBarButtons = self.navigationItem.rightBarButtonItems 

let alarmsBarButton = rightBarButtons?.last 

let alarmsButton = alarmsBarButton.customView as! MIBadgeButton? 

alarmsButton.badgeString = "10" 

Answer 3

utilizzando M13BadgeView .. utilizzare questo codice

(im utilizzando fontawesome.swift per i pulsanti :: https://github.com/thii/FontAwesome.swift)

let rightButton = UIButton(frame: CGRect(x:0,y:0,width:30,height:30)) 
    rightButton.titleLabel?.font = UIFont.fontAwesome(ofSize: 22) 
    rightButton.setTitle(String.fontAwesomeIcon(name: .shoppingBasket), for: .normal) 

    let rightButtonItem : UIBarButtonItem = UIBarButtonItem(customView: rightButton) 

    let badgeView = M13BadgeView() 
     badgeView.text = "1" 
     badgeView.textColor = UIColor.white 
     badgeView.badgeBackgroundColor = UIColor.red 
     badgeView.borderWidth = 1.0 
     badgeView.borderColor = UIColor.white 
     badgeView.horizontalAlignment = M13BadgeViewHorizontalAlignmentLeft 
     badgeView.verticalAlignment = M13BadgeViewVerticalAlignmentTop 
     badgeView.hidesWhenZero = true 

    rightButton.addSubview(badgeView) 

    self.navigationItem.rightBarButtonItem = rightButtonItem 

Answer 4

È può farlo a livello di programmazione con

self.tabBarItem.badgeColor = .red 

oppure utilizzare la st oryboard. Vedere l'immagine: storyboard

Answer 5

C'è una soluzione più elegante, con un'estensione per UIButtonItem

extension CAShapeLayer { 
    func drawCircleAtLocation(location: CGPoint, withRadius radius: CGFloat, andColor color: UIColor, filled: Bool) { 
     fillColor = filled ? color.cgColor : UIColor.white.cgColor 
     strokeColor = color.cgColor 
     let origin = CGPoint(x: location.x - radius, y: location.y - radius) 
     path = UIBezierPath(ovalIn: CGRect(origin: origin, size: CGSize(width: radius * 2, height: radius * 2))).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 addBadge(number: Int, withOffset offset: CGPoint = CGPoint.zero, andColor color: UIColor = UIColor.red, andFilled filled: Bool = true) { 
     guard let view = self.value(forKey: "view") as? UIView else { return } 

     badgeLayer?.removeFromSuperlayer() 

     // Initialize Badge 
     let badge = CAShapeLayer() 
     let radius = CGFloat(7) 
     let location = CGPoint(x: view.frame.width - (radius + offset.x), y: (radius + offset.y)) 
     badge.drawCircleAtLocation(location: location, withRadius: radius, andColor: color, filled: filled) 
     view.layer.addSublayer(badge) 

     // Initialiaze Badge's label 
     let label = CATextLayer() 
     label.string = "\(number)" 
     label.alignmentMode = kCAAlignmentCenter 
     label.fontSize = 11 
     label.frame = CGRect(origin: CGPoint(x: location.x - 4, y: offset.y), size: CGSize(width: 8, height: 16)) 
     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) 
    } 

    func updateBadge(number: Int) { 
     if let text = badgeLayer?.sublayers?.filter({ $0 is CATextLayer }).first as? CATextLayer { 
      text.string = "\(number)" 
     } 
    } 

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

Questo grande codice è stato creato da Stefano Vettor e si possono trovare tutti i dettagli sul sito: https://gist.github.com/freedom27/c709923b163e26405f62b799437243f4

Answer 6

Buona risposta @ Julio Bailon (https://stackoverflow.com/a/45948819/1898973)!

Ecco il sito dell'autore con spiegazione completa: http://www.stefanovettor.com/2016/04/30/adding-badge-uibarbuttonitem/.

Sembra non funzionare su iOS 11, forse perché lo script tenta di accedere alla proprietà "view" di UIBarButtonItem.Ho fatto lavoro:

1) Creando un UIButton e quindi creando il UIBarButtonItem usando l'UIButton come CustomView:

navigationItem.rightBarButtonItem = UIBarButtonItem.init(customView: shoppingCartButton)

2) Sostituendo la linea nella UIBarButtonItem estensione:

guard let view = self.value(forKey: "view") as? UIView else { return }

con il seguente:

0.123.516,410617 millions

guard let view = self.customView else { return }

Sembra elegante per me e, soprattutto, ha funzionato!