前言
更新还在继续... 这是我继续参加 第四期创作者训练营 的文章,继续不断总结自己的学习经历。点击查看活动链接。
今日学习鸡汤: 无谓所无味,有苦说不出,反正就是懒了...
本章节我们学习如何使用Apple平台不同大小、比例和多色的系统图标。
正文
我们进入我们的工程项目点击Xcode顶部导航的 File > New > File from Template 选择 iOS > SwiftUI 模版创建新的SwiftUI文件
快捷键 Command + N,我们新建文件名为 SFSymbolsBootcamp.swift
Apple 提供了一组超过 2,400 个可配置符号,您可以在应用程序中使用它们。它们与 macOS、iOS、iPadOS、watchOS 和 tvOS 的系统字体 San Francisco 无缝协作。
SF Symbols
SF 符号具有很强的适应性,可以配置为多种重量和尺寸。使用它们就像复制然后粘贴到您的项目中一样简单。要使用这些,请确保您的设备上安装了 SF Symbols app 应用程序。
兼容性
SF Symbols 与 iOS 13 及更高版本、macOS 11 及更高版本、watchOS 6 及更高版本以及 tvOS 13 及更高版本兼容。
粗细程度(重量程度)
SF 符号有各种重量和比例。这使您可以创建易于调整的设计。一些粗细选项包括细、细、粗、重等。下图显示了可用的粗细。
使用 SF Symbols
在 SwiftUI 中,您可以使用 SF Symbols 的名称轻松生成图标。此外,您还可以自定义尺寸(小、中、大)、更改粗细以及更改图标颜色。您还可以使用字体修改器编辑图标。
Image(systemName: "figure.step.training.circle")
.resizable()
.aspectRatio(contentMode: .fill)
.font(.title)
.foregroundStyle(.blue)
.frame(width: 300, height: 200)
注意图中代码...
改变尺寸或者缩放比例
您可以将 imageScale 修改器添加到 SF 符号,将其视为图像。 imageScale 修饰符采用以下值之一 - 大、中、小。
VStack(spacing: 30) {
/* 大号 */
Image(systemName: "gear")
.imageScale(.large)
/* 中号 */
Image(systemName: "gear")
.imageScale(.medium)
/* 小号 */
Image(systemName: "gear")
.imageScale(.small)
}
多色图标
您可以使用多色 SF 符号。在应用程序中,它们出现在“多色”类别中。或者,您可以单击工具栏中的颜色图标。
渲染模式修饰符对于显示所有颜色是必需的。
Image(systemName: "paperplane.circle.fill")
.renderingMode(.original)
注意:如果您在图标上使用字体属性,您将无法使用多色选项。
好的!
关于图标的内容就这些,一起进步,下章再见👋