Changing NSToolbarItem image size in Mac Catalyst

Question

When adding custom NSToolbarItem using NSToolbarDelegate I can't set the image of the icons. The problem comes when using default ones (SplitView or Share), which have a different size:

Here's the example code for two of the items, one is the share one and the other is to add a new item. Please also note that in the share example I'm using NSSharingServicePickerToolbarItem and even I'm overriding the image it's still using the 'system' one.

        case .new:
            let item = NSToolbarItem(itemIdentifier: itemIdentifier)
            item.image = UIImage(systemName: "plus")
            item.label = "New Card"
            item.action = #selector(ViewController.didTapCreateNewToolbarButton(_:))
            item.target = nil
            toolbarItem = item
        case .share:
            let item = NSSharingServicePickerToolbarItem(itemIdentifier: itemIdentifier)
            item.image = UIImage(systemName: "square.and.arrow.up")
            item.label = "Share"
            item.action = #selector(ViewController.didTapShareToolbarButton(_:))
            item.target = nil
            
            toolbarItem = item

I've tried using UIImage.SymbolConfiguration(pointSize: 8, weight: .medium) but the result is the same. I've also tried this solution: https://developer.apple.com/forums/thread/131364 but the result is an image taking the whole space available (bigger and pixelated).

So, how can I change the size/styles of those buttons? Would be great to be able to change both the system and my custom ones.

EDIT 1: This issue only appears when removing the title, which makes the toolbar more small in height and resizes properly the system buttons but not the other ones:

if let titlebar = windowScene.titlebar {
  titlebar.toolbar = toolbar
  titlebar.toolbarStyle = .automatic
  titlebar.titleVisibility = .hidden // <-- THIS
}

user_1129789 · Answer

I ran into this issue too, but there are a few things that have helped.

Firstly, creating the NSToolbarItem from a UIBarButtonItem helps with sizing, and also gives the outline on mouse over that most apps seems to have in their toolbar items.

Secondly, using applyingSymbolConfiguration on the UIImage allows you to tweak the size and weight.

Here is my code for creating a share button:

let image = UIImage(systemName: "square.and.arrow.up")?.applyingSymbolConfiguration(.init(pointSize: 13.0, weight: .medium))
let button = UIBarButtonItem(image: image)
let toolbarItem = NSToolbarItem(itemIdentifier: .share, barButtonItem: button)

Here it is on the left compared to NSSharingServicePickerToolbarItem on the right.

It’s pretty close — the size and weight are correct, but the colour is a little off. The same is true in light mode — the Catalyst button is a little less prominent. This does seem to just be a Catalyst thing though. If you compare icons in Messages (left) for example to Finder (right), you’ll notice a similar difference. Hopefully Apple will fix this odd discrepancy at some point.

Changing NSToolbarItem image size in Mac Catalyst

1 Answers