SwiftUI 中的 SF Symbols

探索如何才能将 SF Symbols 纳入您的 SwiftUI app。我们将探讨符号呈现、大小自定义和不同变体显示的基本方法。我们还将向您介绍符号着色的最新更新功能，并帮助您挑选符合您的 app 需求的工具。

资源

相关视频

WWDC21

下载

♪ ♪ 嗨我是雅各布欢迎来到“SwiftUI中的SF Symbols” 我们将在本环节中探讨几个主题首先是通过SwiftUI 使用SF Symbols的一些基础知识接着是如何使用符号的变量最后则是运用全新的渲染模式关于这些API的可用性有一个小提醒本环节中看到的所有内容都能在所有Apple平台上取得并请留意New徽标来了解哪些项目在今年的版本属于新内容让我们开始介绍基础知识吧如果您已通过SwiftUI使用过SF Symbols 这部分对您而言应该是小事一桩

作为开头我们直接展示一个符号吧

最简单的方式是使用系统提供的其中一个符号例如以图像呈现的“爱心” 标签视图是另一个显示符号的主要方法标签是标题和图标的组合而图标经常都是一个符号标签的优点在于它是这个组合的一般描述并会随着组合所显示的环境来调整其行为例如在许多组件中标签会和符号与标题一起显示有时候它们会以不同的布局显示或者有时组件仅会显示符号或仅显示标题 SwiftUI会在内建视图中自动为您进行这些变更也可以在自己的视图中使用标签样式来变更直接变更使用的初始化表达式即可在图像和标签中显示自定义符号画面上是各个设定的样子但是视觉表示法并非唯一的重点这是每个视图在旁白当中默认显示的样子您可看到使用标签会自动提供强大的辅助功能支持因为标题提供了内容的文字描述让我们进一步了解只有图像的案例可能的话 SwiftUI将根据系统符号的内容来提供标签这可能就是您所需的一切例如当您使用爱心制作“喜爱”的按钮然而有些符号没有标准意义在这些情况下预设的辅助使用描述便不如往常实用您也可新增更多特定信息关于您的应用程序使用符号的方法随时使用accessibilityLabel 即可提供该信息自定义符号是另一个案例让我们无法取得理想的辅助使用描述有一个好方法可以改善这点那就是在Localizable.strings文件中提供本地化的图像名称 SwiftUI会针对任何使用此图像accessibilityLabel的位置自动使用可本地化的字符串

最后一个使用符号的方法则是作为文字的一部分您可以使用字符串内插在文字执行里嵌入符号这是个很好的技术可用于您要符号与文字自动重排的情况就像这个V形符号

让我们回到“爱心”的标签看看一些我们可以套用到符号的修饰符来进行自定义先从通过foregroundStyle修饰符来变更符号色彩开始吧文字和符号要默认为黑色或白色以浅色模式或深色模式显示您可以将foregroundStyle 设定为特定颜色像是红色或是更加语义化的值例如目前的tint或secondary样式我们稍后会再回到foregroundStyle 了解通过此功能所能产生的进阶效果

您可以使用font修饰符变更文字大小以及符号大小若使用文字样式如body或caption 文字和符号便会随动态字体而自动缩放若选择固定字号它们则会维持一致

您还可以变更符号的缩放比例使用imageScale修饰符即可进行缩放这不会改变文本的字体大小而是符号与文字相比之下显示的大小

接着我们来看看变量您可能已注意到iOS标签栏应使用填充风格的符号变量以前这步骤需要由您亲自从Symbols app 小心地选择正确的符号并需留意符号是否提供了fill变量就像此处的“sparkles” 从今年开始标签栏和其他视图已自动加入特定变量例如fill 以套用至其中包含的任何符号这表示您可直接使用符号的基础版本来实现正确变量而无须额外的工作而且无需过度指定您要的确切设定您就能获得更具复用性的程序代码举例来说假设我们在macOS上执行相同程序代码便能为该平台取得正确的变量也就是线框风格

我们也可以在自己的组件中使用此变量支持画面上是一个简单的标签列表显示了默认的线框风格变量为了在此使用填充风格变量我可以用新的symbolVariant修饰符这个修饰符会设定环境中的指定变量非常适合用于整个视图层级就如我们现在做的我们提供了大量的变量 fill、slash和一组形状封装这些也可以和彼此相互结合和在符号名称里的结合方法一样例如.circle.fill

同一组变量也可用于自定义符号您只需要遵循系统符号使用的命名模式即可接着我们来看看渲染模式 Symbols支持四种不同的渲染模式可让您自定义符号着色的方式以下是各个渲染模式的一些范例我们将逐一介绍如果您希望了解更多不同渲染模式设计的信息我非常建议您观看 “SF Symbols中的新增功能”

好的让我们回到卡片列表这次是以macOS为例现在我们的符号显示的是默认渲染模式也就是单色这很适合用于为一组符号显示一致的颜色然而本案例中我想要使用与各个卡片关联的色彩来显示这些符号多色渲染模式是很好的方法可显示各个符号呈现的颜色只要在symbolRenderingMode修饰符添加multicolor 即可变更至多色模式如果符号没有multicolor表示法该符号便会回到单色渲染模式您可以使用SF Symbols app 查询哪些符号具有多色定义并将多色支持添加至自定义符号观看“SF Symbols App概述” 以了解更多信息这个App的另一个部分有一些按钮可以将卡片随机显示于不同花色我要通过不同层次的不透明度来强调这些符号的关键部分您还记得哪一个渲染模式可以做到这点吗？没错就是分层我们可以将相同的 symbolRenderingMode修饰符用于分层模式这会使用当前的前景样式将单一色彩套用至符号如同单色模式同时还会新增多重层次的不透明度来强调符号的关键元素而最后一个渲染模式我的app里有一个可以提供帮助的按钮我不是很擅长卡片游戏所以我需要这个按钮来复原我的错误画面上显示了带有符号的按钮以及.circle.fill变量来获得这个圆形背景但是色彩和我希望的不太相符我想要和卡片更匹配的色彩记住我们可以使用 foregroundStyle修饰符设定符号色彩但我们还可以进行其他设定从今年开始我们可以设定多重色彩来为我们的符号着色通过使用调色渲染模式可让您最大程度地控制符号图层的着色您可以指定最多三个样式来控制符号的每个层次这个符号有主要和第三级的内容因此系统会使用第一和第三个色彩如果我们使用的符号只有主要和次要内容就像这个符号的线框版本那么系统只会使用那些色彩因为大部分的单一符号仅会使用两个图层就像这两个一样您可以指定两个样式而不指定三个最后一个样式便会用于所有次要以上的内容在许多案例中您只需要用到这些我们目前为止都在使用色彩但是这是前景样式修饰符它可以和任何形状样式一起使用我们可以使用次要样式在模糊背景前制造鲜明的效果甚至可以使用材质来模糊符号后方的背景若想了解更多关于前景样式和材质请观看“将丰富图形新增至您的SwiftUI app” 让我们再次回顾整个系列的渲染模式

了解并选择该使用哪一个渲染模式的最佳办法是使用SF Symbols app和其样式检查器这些用来在SwiftUI中表现设定的API 具有相同的运作方式因此可以轻松在Symbols app 和程序代码间切换您还可以通过最少量的设置来获得最佳的行为若您只有一个前景样式且未指定渲染模式系统会自动选择单色模式若您指定超过一个前景样式但未指定渲染模式系统会自动选择调色模式

Symbols app提供了大量的色彩可和不同的渲染模式一起使用这整组色彩也都可在SwiftUI中使用包含今年新内容中的数个色彩和样式这些色彩已针对它们所出现的不同设定进行优化不论是浅色和深色模式模糊背景上的特殊渲染甚至是它们所出现的特定平台我们刚刚已了解如何建立符号变更外观的一系列修饰词如何变更显示的符号变量选择不同渲染模式以及如何使用前景样式自定义您的符号着色 SF Symbols可让您轻松地将漂亮的图形添加至app 并按照您的需求自定义快来了解可以在何处采用符号让您的app更加美观谢谢您的收看希望您有个愉快的WWDC体验 [欢快的音乐]

0:45 - Creating Symbols

// System symbol image
Image(systemName: "heart")

// System symbol label
Label("Heart", systemImage: "heart")

// Custom symbol image
Image("queen.heart")

// Custom symbol label
Label("Queen of Hearts", image: "queen.heart")

2:33 - Accessibility Label

Image(systemName: "heart")
    .accessibilityLabel("Ace of Hearts")

Image(systemName: "person.circle")
    .accessibilityLabel("Profile")

Image("queen.heart")

// Localizeable.strings
"queen.heart" = "Queen of Hearts";

2:59 - Symbol in Text

Text("""
    Thalia, Paul, and
    3 others \(Image(systemName: "chevron.forward"))
""")

3:14 - Customizing Color

Label("Heart", systemImage: "heart")

Label("Heart", systemImage: "heart")
    .foregroundStyle(.red)

Label("Heart", systemImage: "heart")
    .foregroundStyle(.tint)

Label("Heart", systemImage: "heart")
    .foregroundStyle(.secondary)

3:51 - Customizing Font

Label("Heart", systemImage: "heart")
    .font(.body)

Label("Heart", systemImage: "heart")
    .font(.caption)

Label("Heart", systemImage: "heart")
    .font(.system(size: 10))

4:08 - Customizing Scale

Label("Heart", systemImage: "heart")
    .imageScale(.large)

Label("Heart", systemImage: "heart")
    .imageScale(.medium)

Label("Heart", systemImage: "heart")
    .imageScale(.small)

4:23 - Customizing Variants

TabView {
    Text("Cards").tabItem {
        Label("Cards", systemImage: "rectangle.portrait.on.rectangle.portrait")
    }
    Text("Rules").tabItem {
        Label("Rules", systemImage: "character.book.closed")
    }
    Text("Profile").tabItem {
        Label("Profile", systemImage: "person.circle")
    }
    Text("Magic").tabItem {
        Label("Magic", systemImage: "sparkles")
    }
}

5:12 - Monochrome

List {
    Label("Ace of Hearts", systemImage: "suit.heart")
    Label("Ace of Spades", systemImage: "suit.spade")
    Label("Ace of Diamonds", systemImage: "suit.diamond")
    Label("Ace of Clubs", systemImage: "suit.club")
    Label("Queen of Hearts", image: "queen.heart")
}
.symbolVariant(.fill)

6:41 - Multicolor

List {
    Label("Ace of Hearts", systemImage: "suit.heart")
    Label("Ace of Spades", systemImage: "suit.spade")
    Label("Ace of Diamonds", systemImage: "suit.diamond")
    Label("Ace of Clubs", systemImage: "suit.club")
    Label("Queen of Hearts", image: "queen.heart")
}
.symbolVariant(.fill)
.symbolRenderingMode(.multicolor)

7:10 - Hierarchical Rendering Mode

HStack {
    Button(action: {}) {
        Image(systemName: "square.3.stack.3d.top.fill")
    }
    Button(action: {}) {
        Image(systemName: "square.3.stack.3d.bottom.fill")
    }
}
.symbolRenderingMode(.hierarchical)

7:50 - Palette Rendering Mode

Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.white, .yellow, .red)

9:00 - Advanced Foreground Styles

Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.white, .red)

Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.white, .secondary)

Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.red, .regularMaterial)

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。