带有分段控件的NSToolbarItem-无法正确渲染图像 [英] NSToolbarItem with Segmented Control - Images Not Rendering Correctly

问题描述

我正在尝试模拟Xcode的工具栏控件以显示/隐藏Navigator和Inspector:

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

...但没有底部窗格(仅左右两部分)

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

我从Xcode的UI屏幕捕获了图标，并在图像编辑应用程序中对其进行了跟踪.左窗格的资源为:

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:

(20x20 @ 72 dpi)

@ 2x:

(40x40 @ 72 dpi，尽管使用20x20 @ 144 dpi似乎没有什么区别)

右侧窗格是相同的，但是水平翻转了.

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

所有这些资源都存储在资产目录中，如下所示:

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

我在工具栏上放置了一个分段控件，以创建一个内部带有分段控件的工具栏项，并为每个分段(0和1)设置image属性.

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).

两个片段的图像缩放比例均设置为成比例下降".段控件已选中固定"的段宽度，两个段的宽度均为48.工具栏项的最小大小"为(83 x 25)，最大大小"为(100 x 28).

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).

图标正确显示在情节提要(Interface Builder)上.

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

但是，当我运行该应用程序时，无法正确显示图标图像.

• 如果我在视网膜监视器上启动我的应用程序，则任何一个细分市场上均不会显示任何图标.
• 如果我将窗口移至外部非视网膜监视器，则会显示两个图标.
• 如果我从w目录中删除了两个图像集之一并运行应用程序，则另一个图标正确显示！(在任一显示器上)
• 如果我进一步为两个片段设置相同的剩余图像，它们将正确显示！
• 如果我将两个图像集都留在项目中，但是将其中一个细分市场的 Image 字段重置为空，则其他图标不会再显示！

• 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!

地球上正在发生什么?

我在GitHub上放置了示例项目，问题.

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

为确保确定，我使用cartool命令行实用程序从编译的应用程序二进制文件中提取了资源(如此说明中所述答案)，所有4张图片都以正确的尺寸显示...

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...

解决方案:如下面的 Ivan的答案所建议，我转而使用矢量图形(图标).我下载了Acorn的试用版，并以1x的大小重新创建了我的图标，然后将其导出为PDF.

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.

为避免在运行时@ 2x的放大尺寸时模糊，我必须确保编辑器中的所有坐标都是整数，还要在矢量形状"检查器中选中每个形状层的对齐像素"框:

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:

(幸福的结局)

$ git commit -m "Fix toolbar icons for good (PDF)"

推荐答案

根据我的经验，在工具栏中使用位图比较麻烦.您可以尝试针对完全建议的分辨率，以避免可能出现的一些问题: https://developer.apple.com/macos/human-interface-guidelines/icons-and-images/custom-icons/

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/

但是，最干净的方法是使用矢量(pdf)图标，因为它们可以按预期工作.

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

这篇关于带有分段控件的NSToolbarItem-无法正确渲染图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！