Search code examples
swiftcocoabadgenstoolbaritem

Custom NSToolbarItem with Badge Counter

I'm trying to add a custom badge counter circle on a NSButton inside of a Custom NSToolbarItem.

It's supposed to look like this (with the red circle and a number inside):

enter image description here

I've tried doing it in the storyboard by adding a inline button but I don't have too much control over it's positioning and also having trouble setting a solid color to the badge.

Failed attempts:

enter image description here enter image description here

Then I tried implementing this guys technique (I converted to swift3): http://bertmcdowell.com/posts/2013/nstoolbarbadgeditem.html

But the problem with this technique is that it subclasses the NSToolbarItem directly so I can't draw it outside the bounds of the NSButton. Here's the result:

enter image description here

I feel like I need to draw a custom view behind the NSButton so that it has space to draw the badge in the upper right without getting clipped. Any other ideas?

Solution

  • One option is to subclass either the toolbar item or the button and add a subview which draws the badge. Here's a forked version of your project which does this: https://github.com/AriX/NSToolbarItemBadge