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
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With