swiftmacosswiftuipopovernspopover

SwiftUI macOS menubar icon with badge


As you can see from the image I have a program that should open as menubar, I would like to know if it was possible to add a badge as seen in image two to the menubar, to indicate that there are notifications.

I find nothing on the documentation.

Can you give me a hand?

enter image description here

enter image description here

StatusBarController

import AppKit
import SwiftUI

class StatusBarController {
    @ObservedObject var userPreferences = UserPreferences.instance
    private var statusBar: NSStatusBar
    var statusItem: NSStatusItem
    private var popover: NSPopover
    
    init(_ popover: NSPopover) {
        self.popover = popover
        statusBar = NSStatusBar.init()
        statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength)
        
        if let statusBarButton = statusItem.button {
            statusBarButton.image = #imageLiteral(resourceName: "Fork")
            statusBarButton.image?.size = NSSize(width: 18.0, height: 18.0)
            statusBarButton.image?.isTemplate = true
            statusBarButton.action = #selector(togglePopover(sender:))
            statusBarButton.target = self
            statusBarButton.imagePosition = NSControl.ImagePosition.imageLeft
        }
    }
    
    @objc func togglePopover(sender: AnyObject) {
        if(popover.isShown) {
            hidePopover(sender)
        }else {
            showPopover(sender)
        }
    }
    
    func showPopover(_ sender: AnyObject) {
        if let statusBarButton = statusItem.button {
            popover.show(relativeTo: statusBarButton.bounds, of: statusBarButton, preferredEdge: NSRectEdge.maxY)
        }
    }
    
    func hidePopover(_ sender: AnyObject) {
        popover.performClose(sender)
    }
    
}

AppDelegate

import Cocoa
import SwiftUI

@main
class AppDelegate: NSObject, NSApplicationDelegate {
    var statusBar: StatusBarController?
    var popover = NSPopover.init()
    
    var timer: Timer? = nil

    func applicationDidFinishLaunching(_ aNotification: Notification) {
        let contentView = ContentView()
        popover.contentSize = NSSize(width: 360, height: 360)
        popover.contentViewController = NSHostingController(rootView: contentView)
        statusBar = StatusBarController.init(popover)
    }

    func applicationWillTerminate(_ aNotification: Notification) {
        // Insert code here to tear down your application
    }
}

Solution

  • You have to do it manually

    Create a custom badge view. In drawRect you have to play with the position of the badge and the size of the number.

    class BadgeView: NSView {
        
        var number : Int {
            didSet {
                if oldValue != number { needsDisplay = true }
            }
        }
        
        init(frame frameRect: NSRect, number : Int) {
            self.number = number
            super.init(frame: frameRect)
        }
        
        required init?(coder: NSCoder) {
            self.number = 0
            super.init(coder: coder)
        }
        
        override func draw(_ dirtyRect: NSRect) {
            let fillColor = NSColor.systemRed
            let path = NSBezierPath(ovalIn: NSRect(x: 3, y: 4, width: 14, height: 14))
            fillColor.set()
            path.fill()
            let one = "\(number)"
            let attribs : [NSAttributedString.Key:Any] = [.font : NSFont.systemFont(ofSize: 11.0), .foregroundColor : NSColor.white]
            let xOrigin = (number > 9) ? 3.5 : 6.5
            one.draw(at: NSPoint(x: xOrigin, y: 4.5), withAttributes: attribs)
        }
    }
    

    In the controller class add a property and a function to set the number

    private var badgeView : BadgeView?
    
    func setBadge(num : Int)
    {
        if num == 0 {
            if let view = badgeView {
                view.removeFromSuperview()
                badgeView = nil
            }
        } else {
            if let badgeView = badgeView {
                badgeView.number = num
            } else {
                badgeView = BadgeView(frame: NSRect(x: 0, y: 0, width: 19, height: 22), number: num)
                statusItem.button!.addSubview(badgeView!)
            }
        }
    }