【问题标题】:Is there a way to use SF Symbols in macOS SwiftUI development?有没有办法在 macOS SwiftUI 开发中使用 SF Symbols?
【发布时间】:2019-09-24 10:34:36
【问题描述】:

SF Symbols 提供了一组超过 2,400 个一致且高度可配置的符号,您可以在应用中使用它们。 Apple 设计了 ​​SF Symbols 以与 San Francisco 系统字体无缝集成,因此这些符号自动确保与各种粗细和大小的文本在光学上垂直对齐。

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

据我所知,在 macOS 项目中尝试使用 SF 符号时,macOS 不支持 NSImage(systemName: String) 语法。

具体来说,我试图在工具栏项上使用 SF Symbol 字形。

【问题讨论】:

  • 您是否有理由希望使用NSImage 而不是Image?毕竟,您使用的是SwiftUI
  • 他想使用Image还是NSImage都没有关系,因为它们都不支持macOS上的init(systemName:)初始化器。

标签: macos swiftui


【解决方案1】:

SF Symbol 现在可用于 ma​​cOS 11

SF 符号适用于 iOS 13 及更高版本、macOS 11 及更高版本、watchOS 6 及更高版本以及 tvOS 13 及更高版本。

这是你如何使用它:

NSImage(systemSymbolName: "hammer", accessibilityDescription: nil)

如果您想支持 macOS 10.15 及更低版本,您必须使用 SF Symbols Mac 应用程序并将符号导出为 SVG,然后将其导入 Xcode 项目中的资产文件。您可以从here 获取该应用程序。

【讨论】:

  • 当我尝试使用这个初始化器时,为什么 Xcode 无法识别它?
  • 我使用的是 Xcode 12.1 和 macOS 11。我猜我需要 Xcode 12.2 或 12.3。你是哪个版本的?
  • 更新到 Xcode 12.2 后,符号出现了。这是此 API 的最低版本。
  • 为 macOS 11.1 编译时,Xcode 无法为我完成 systemSymbolName。我使用了NSImage *image = [NSImage imageWithSystemSymbolName:@"hammer" accessibilityDescription:nil];(也许我有错误的objc语法,因为一个是type method,另一个是initializer)。
  • 在将nil 赋予accessibilityDescription: 参数时,这是一个不好的例子!人们盲目地复制/粘贴这个。为了支持有视力障碍的人,您应该传递一个有用的(和本地化的)文本,用户可以通过 VoiceOver 阅读!
【解决方案2】:

macOS 不支持 SF 符号(目前)

但您可以下载SF Symbols App 并将您需要的符号导出为独立图像。

【讨论】:

  • 可能这就是我想要的。感谢您的提示!
  • 我在here解决了这个问题
  • 如何在旧的 iOS 应用和 macOS 上支持旧金山字体burcugeneci.wordpress.com/…
  • @VictorKushnerov 将符号导出为图像,根据需要对其进行缩放并将它们添加到您的资产目录中。
  • @vadian 不同的设备有不同的 dpi。我更喜欢使用矢量图像在所有设备上呈现高质量。
【解决方案3】:

SF 符号在 macOS 上不可用。来自 Apple 的人机界面指南:

您可以在运行 iOS 13 及更高版本、watchOS 6 的应用中使用 SF 符号 及更高版本,以及 tvOS 13 及更高版本。

【讨论】:

    【解决方案4】:

    您还可以将 SF Symbols 应用程序中的符号导出为 SVG,然后使用此工具将其转换为 SwiftUI Shape:quassummanus.github.io/SVG-to-SwiftUI/

    【讨论】:

      【解决方案5】:

      如果您的 macOS 版本低于 macOS 11

      1. 下载sfsymbols并导出所有符号https://github.com/davedelong/sfsymbols

      2. 在您的 Xcode 项目中选择 Assets.xcassets

      3. 将图标集文件夹作为新资源拖到 Xcode 中的 Assets.xcassets

      【讨论】:

        【解决方案6】:

        目前还没有办法在 macOS 上使用 SF 符号。但是,您可以将此扩展用作 macOS 的后备,以便您的代码可以在多个平台上运行。

        extension Image {
            init(systemName: String) {
                self.init("YOUR FALL BACK IMAGE(s)")
            }
        }
        

        【讨论】:

          【解决方案7】:

          重要 在使用下面的代码之前阅读这篇文章How to support San Francisco Fonts on old iOS app and macOS

          Button(action: {}) {
            Image(systemName: "star")            
          }
          
          我为 macOS 制作了Image,如下所示

          这就是它在 macOS 上的外观

          对于剪切/粘贴:

          import SwiftUI
          
          #if os(macOS)
          struct Image: View {
            let symbol: String
          
            init(systemName: String) {
              self.symbol = [
                "speaker":      "?",
                "speaker.fill": "?",
                "star":         "☆",
                "star.fill":    "★"
                ][systemName] ?? "?"   }
          
            var body: some View {
              Text(symbol)
            }
          }
          #endif
          

          【讨论】:

          • 除非您要求所有用户都安装该字体,否则这将不起作用。
          • 是的,刚刚在 App 中这样使用它们,发现它们在 Apple 审阅者的机器上看起来像问号。
          猜你喜欢
          • 2020-12-22
          • 2021-01-12
          • 2020-07-02
          • 1970-01-01
          • 1970-01-01
          • 2021-02-26
          • 2012-11-20
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多