2

I'm trying to emulate Xcode's toolbar controls to show/hide the Navigator and Inspector:

This Guy

...but without the bottom pane (only left and right: two segments)

I screen-captured the icons from Xcode's UI and traced them in an image editing application. The resources for the left pane are:

@1x:

Icon Left @1x

(20x20 @72 dpi)

@2x:

Icon Left @2x

(40x40 @72 dpi, although using 20x20 @144 dpi seems to make no difference)

The right-pane counterparts are identical, but flipped horizontally.

All rhe resources are stored in the asset catalogue, as follows:

enter image description here

I dropped a segmented control on the toolbar, to create a toolbar item with a segmented control inside it, and set the image attribute for each segment (0 and 1).

Image Scaling for both segments is set to "Proportionally Down". The segment control has segment width "Fixed" checked, with a width of 48 for both segments. The toolbar item has Minimum Size of (83 x 25) and Maximum Size of (100 x 28).

The icons display correctly on the storyboard (Interface Builder).

However, when I run the app, I can not get the icon images to display appropriately.

  • If I launch my app on a retina monitor, no icon is displayed on either segment.
  • If I move the window to the external, non-retina monitor, both icons are displayed.
  • If I remove the one of the two image sets from thew catalogue and run the app, the other icon is correctly displayed! (on either monitor)
  • If I further set the same, remaining image for both segments, they display correctly!
  • If I leave both image sets in the project, but reset the Image field in one of the segments to empty, the other icon isn't displayed eihter!

What on Earth is going on??

I have put a sample project on GitHub that reproduces the issue.

Edit: Just to make sure, I extracted the resources from the compiled app binary using the cartool command line utility (as explained in this answer), and all 4 images are there at the right sizes...

Solution: As suggested by Ivan's answer below, I switched to using vector graphics (PDF) for the icons. I downloaded the trial version of Acorn and recreated my icons at 1x size, then exported as PDF.

To avoid blurring at the scaled up size of @2x at runtime, I had to make sure all coordinates in the editor were integers, and also check the box for "Snap to pixels" in the Vector Shapes inspector for each shape layer:

Acorn UI

(Happy Ending)

$ git commit -m "Fix toolbar icons for good (PDF)"
EJoshuaS - Stand with Ukraine
  • 11,977
  • 56
  • 49
  • 78
Nicolas Miari
  • 16,006
  • 8
  • 81
  • 189
  • Note: "20 x 20 @144 dpi" represents the size in **points** as reported by Preview.app. Regardless, the png is reported as 40 x 40 px on Finder. – Nicolas Miari Aug 21 '17 at 08:49
  • 1
    Have you tried to use recommended size (17x17) https://developer.apple.com/macos/human-interface-guidelines/icons-and-images/custom-icons/ – Ivan Ičin Aug 21 '17 at 09:26
  • I noticed that when I switched one og the icons by a different bitmap of 16x16 (32x32), both render correctly. I trimmed the transparent pixels down to 18x14 (36x28) and the problem persists. I will try 17x17, but this leaves the question: How does Xcode get away with these icons? – Nicolas Miari Aug 21 '17 at 09:38
  • 1
    If you use vector (pdf) icons you won't have any problems. That's almost certain how XCode get away with those icons (and I do that way too). – Ivan Ičin Aug 21 '17 at 09:42
  • I see. I only have Pixelmator, and I have had bad experiences trying to export to PDF (weird output), haven't tried recently. – Nicolas Miari Aug 21 '17 at 09:45
  • Inkscape is free and available for Mac and PC. Good enough for those simple icons for sure. I'll put my tip as an answer as it seems to bring at least some value. – Ivan Ičin Aug 21 '17 at 09:48
  • Thank you. I used Inkscape in the past but don't really like cross-platform apps. By the way, I tried exporting my @1x geometry (shapes) from Pixelmator to PDF, import as "Sinlge Scale", and now they render at half the size on non-retina, still not rendering on the retina display. – Nicolas Miari Aug 21 '17 at 09:51

1 Answers1

2

According to my experience, using of bitmaps in toolbar is troublesome. You can try to target exactly recommended resolutions to possibly avoid some problems: https://developer.apple.com/macos/human-interface-guidelines/icons-and-images/custom-icons/

However, the cleanest way would be to use vector (pdf) icons, as they simply work as intended.

Ivan Ičin
  • 9,672
  • 5
  • 36
  • 57
  • Thank you. I downloaded the trial version of Acorn and created my images at 18x14 px, eported as PDF. Now they render on both resolutions, but the hi-res version appears blurry. I will try inkscape next... – Nicolas Miari Aug 21 '17 at 10:06
  • 1
    I think you did something wrong if they appear blurry, you should ensure that you add them as the vector resource, not as image. – Ivan Ičin Aug 21 '17 at 10:09
  • Indeed... forgot to check a box (I'm updating my question with the actual solution now) – Nicolas Miari Aug 21 '17 at 10:15