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?
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
}
}
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!)
}
}
}