向你的 SwiftUI app 添加丰富图形

向你的 SwiftUI app 添加丰富图形

了解如何通过 SwiftUI 让你的图形栩栩如生。我们将首先处理安全区域 (包括键盘安全区域)，了解如何设计美观且不会与屏幕键盘重叠的无边缘缝隙图形。我们还会探索您可以在 SwiftUI 中使用的材料和振动功能，从而制作可轻松定制的背景和控件，并介绍 drawingGroup 和全新画布等图形 API。使用这些工具，你可以比以往更轻松地在 SwiftUI 中设计完全交互式和可中断的动画和图形。

资源
相关视频

WWDC21
下载

嗨我是雅各布欢迎来到《为你的SwiftUI应用程序添加丰富的图形》我正在与几个同事一起开发一个构建渐变的应用今年颜色是我们团队的热门话题大部分的工程都已经完成现在我只需要通过添加一些丰富的图形来完成它在我们自定义应用时我们将看到几个不同的区域：安全区域包括对其进行定制化新的前景样式支持一套丰富的新材料；并使用画布进行绘图这是一种强大的新视图让我们开始吧我将向你展示应用程序中目前的内容我们有一个渐变库我可以查看这些渐变其中有我很喜欢的东西只是我不能把手指放在它上面我还可以编辑渐变… 这让我可以改变颜色停驻点
我可以添加新的渐变
我也可以在一些可视化工具中使用这些渐变… 但是一次一个步骤我们稍后再看
现在让我们聚焦在这个渐变细节视图它是功能性的但我们的实际内容很少相对于镀铬和空白空间我希望渐变真正填满这个屏幕所以让我们开始在Xcode中编辑它
这是我们的主要细节视图它也用于我们的编辑模式先从isEditing false开始稍后再来看编辑模式让我们删除这个框架让我们的渐变尽可能多地使用空间
现在渐变占据了所有的高度我们不再需要这个spacer了
我们可以进一步将控件放在这个渐变之上通过将其更改为ZStack
如果你以前没见过ZStack 它会在彼此之上列出元素而不是彼此相邻让我们将编辑控件移到底部
而且我们只需要在控件上填充而不是在我们的渐变上… 所以让我们移动这个
你可能会纳闷为什么渐变的顶部和底部还有空白即使我们删除了填充在默认情况下 SwiftUI会将你的内容放置在安全区域内避免任何会遮挡或裁切你的视图的东西例如主页指示器或正在显示的任何长条安全区域是做为从最外面的完整区域插入的范围显示视图的地方安全区域中的内容会自动布置在适当的插图中避免那些会被遮挡的区域安全区域也是 SwiftUI如何帮助你避免在键盘下绘制内容所以在我们的应用中我们的控件会自动升起远离键盘
这工作的原理也是相同的如果我们更仔细地研究因为有多个不同的安全区域最常见的是容器安全区域它由容器驱动其中显示着一个视图并包括长条和设备镀铬之类的东西此外还有一个用于避开键盘的键盘安全区域请记得键盘安全区域位于是容器安全区域内的范围之内除了键盘之外它可以作为容器安全区域保护内容的安全你可以选择退出安全区域通常你不需要这样做因为大多数内容应该在安全区域内所以没有被裁切掉到头来这还是安全的但是忽略安全区域对于背景或其他内容是有意义的如果你想要完全贴合边框的话你可以使用此代码选择退出所有安全区域或指定键盘区域来选择退出键盘安全区域让我们将ignoresSafeArea 添加到我们的线性渐变中以获得全出血效果
这个编辑按钮在我们的渐变顶部不是很明显所以让我们只忽略底部边缘的安全区域
现在为了确保我们不会遇到由于渐变导致底部文本难以辨认的相同问题让我们在它后面添加一个背景
我们稍后会再自定义背景但让我们从最简单的默认值开始这为我们提供了在暗色模式下自动更改的白色背景
而这个背景也会自动延伸到安全区域之外这个版本的背景及其行为在 iOS 15和匹配的操作系统版本中是新的来看看它是如何运作的让我们从容器视图及其安全区域开始我们有了我们的内容视图它将在安全区域内以保持清晰易读如果我们天真地向它应用的视图添加了具有相同边界的背景我们就会得到这个但如果我们将 ignoresSafeArea修饰符应用于背景视图然后它将扩展到安全区域之外同时保持主要内容的美观和安全新的背景修饰符会自动给你这个行为
让我们回到我们的背景并开始自定义它我们可以传入特定的样式可以是颜色或任何其他样式例如渐变
这在这个应用中没有意义但来看看一些柔和的颜色
我还可以传入一个形状来将此背景裁切成… 例如说圆角矩形
请注意当我使用自定义形状时背景不再延伸到安全区域之外所以形状会与你的内容边界相匹配我认为更适合我们的应用程序的是模糊我们的背景我们可以使用另个新的API 来做到这一点：材料材质是一组你可以应用的标准模糊样式
让我们让这个背景回到占据整个区域
材料非常适合我们想要展示像这样的彩色内容的地方你可以选择一组不同的材料从超薄到超厚所有这些都会自动在每个平台上显示正确的设计
我将在这里使用薄的材料
接下来我想自定义我们的文本让我们来让颜色的数量不那么突出来凸显名称是此处的主要信息
我可以通过设置次要的前景样式来做到这一点
你可能已经注意到次要内容会自动显示一种称为Vibrancy的效果它混合了它背后的颜色在SwiftUI中这种效果没有额外的 API 当你在材质上下文中通过Quaternary样式使用新的Secondary时它会自动发生当你明确地添加带有材质的背景时就会发生这种情况就像刚刚那样或者当你的内容位于系统组件中如侧边栏它会为你添加材质
而这些样式具有很多自动智能他们会自动做正确的事情在非模糊环境中使用的时候在他们不使用鲜艳效果的地方当你给它们设置颜色时它们也会自动改变它们的行为设置每个级别的颜色版本并且同样的支持适用于设置任何基本的前景样式甚至像渐变之类的东西请带有品味地使用需要注意一件事：任何给定的文本都可以应用单个前景样式但可以在其范围内应用多种颜色例如我可以使用字符串插值来嵌入内部文本…
然后应用红色的 foregroundColor… 到“颜色”这个词它将显示该颜色自动选择退出该范围的鲜艳度
更重要的是有了这些前景样式有史以来第一次你可以通过嵌入的表情符号获得正确的行为而且效果很好
这看起来很不错让我们再次运行它并尝试在编辑模式套用这些更改
效果几乎都不错这些颜色在模糊之下还不错这很棒但如果你仔细观察它做的事并不完全正确当我一直向下滚动时有一点隐藏在模糊后面的列表让我们更仔细地看看发生了什么让我们去掉铬只看相关视图你看
如果我们将这些视图水平滑动一点我们可以看到这是因为长条只是在内容之上的ZStacked 现在我们想要看到后面的所有视图这不是正确的行为
我们可以在这里更改为VStack 但少了模糊下的列表在向下滚动时我们不会显示任何颜色我们想要列表的背景及其可滚动区域延伸到栏下但不是其主要内容而这正是安全区的用途如果我们让安全区域被这个栏插入那么任何重要的内容都不会被遮挡为了自定义我们自己视图的安全区域我们可以使用一个新的修饰符 safeAreaInset 这让我们可以添加辅助内容比如我们的长条一路到主要内容我将替换我们的ZStack…
使用safeAreaInset…
使用.bottom 的边缘…
并将我们的控件放在其中让我们再次运行它来检查一下
这个视图看起来还是一样的这很好那是因为它忽略了安全区域
而在编辑模式…
我们仍然可以在栏下滚动以获得模糊效果但是当我们滚动到底部时没有任何东西被遮挡太好了接下来让我们看看我们的可视化器
让我们从已经编写好的 Shapes可视化工具开始
它显示了大量随机形状的符号每个符号都使用应用程序中的一个渐变绘制我可以点击一个符号来拉近它…
或点击背景来重新定位所有符号
如果你之前看过我们的 SwiftUI动画演示你就会知道它始终具有交互性和可中断性所以我可以继续重新排列…
甚至在发生这种情况时点击来选择和取消选择形状
如果我去看代码…
它使用一种通用技术在 SwiftUI中绘制图形有一个GeometryReader 所以我可以读取视图的大小布置所有这些图形和一个和ZStack来帮助我定位它们
在本体的最后有个你之前可能见过的修饰符 drawingGroup drawingGroup会告诉SwiftUI 组合它所包含的所有视图在单个图层中绘制这适用于像这样的图形元素但不应与文本字段和列表等 UI控件一起使用
当你想显示大量图形元素时这是一种很好的技巧就像我们在这做的那样而drawingGroup的好处之一是即使这些视图的绘制方式不同你仍可以使用 SwiftUI中的相同功能和你在应用程序中的其他地方一样
例如在这里我们对每个符号应用了一个手势用于点击它们在我们更改选择或重新定位它们时所加入的动画这些视图中包含的可访问性信息也正常地传递了… 例如每个符号上的这些可访问性操作但是为了支持所有这些功能每个视图会需要一些簿记和存储空间如果你有足够多的元素那么即使是额外的虚耗也可能太多对于这些情况我们引入了新的画布视图我们的下一个可视化器将展示一个复杂的粒子系统而这还没有写好让我们来建造它吧让我们从画布视图开始绘制它
这让我们可以创建一个每次绘制画布时运行的闭包并包含我们的绘图命令如果你熟悉UIKit或 AppKit中的drawRect 这原理非常地相似这个闭包为我们提供了一个上下文这是我们向其发送绘图命令的地方以及我们可以用来获取整个画布大小的尺寸让我们从绘制图像开始
我可以利用我在其余的 SwiftUI代码中所使用的相同图像类型来创建一个
让我们告诉上下文来绘制我们的图像
当我们在0,0处绘制它时它在这里以原点为中心不是很明显的地方由于我们有整个画布的大小这次我们转而利用它在中间绘制它
如果我将预览更改为暗色模式你会看到这件事…
我们的图像自动翻转为白色因为它使用相同的前景样式就是我们之前看到的由于我们要构建一个粒子系统让我们再画几次这个图像
记得此闭包是用于命令式代码它不是ViewBuilder 所以为了循环我可以使用常态
让我们稍稍移动每一个图像才能实际看到它们
现在我们多次绘制此图像但每一次上下文需要解析它根据当前环境等事物对其进行评估即使每次都是相同的图像我们可以通过在绘制之前自己解决图像来改进这一点
现在我们有更好的性能因为我们共享相同的解析图像但是解析后的图像还可以让我们做一些其他的事情
我们现在可以要求它的大小和基线在我们的例子中我们将利用它的尺寸依适当的量来移动每一个
接下来让我们在闪光后面添加椭圆我要把它们画在同一个范围所以让我们拉出一个框架来把它们都画进去
我将创建一个具有相同 X和Y值的CGRect 并使用我们的imageSize 作为宽度和高度…
然后在该框架中绘制我们的图像
因为每次绘制操作都是按顺序完成的为了把我们的椭圆放在图像后面我们需要先绘制它我们可以用context.fill 来绘制它…
这需要一个路径和一个阴影你可以使用标准贝塞尔曲线构建路径但这里有一个提示：你还可以使用椭圆等形状并询问它们在给定矩形中的路径
另一个参数是阴影它是我们路径的填充物这能使用与我们SwiftUI应用的其余部分相同的样式让我们使用青色
还有椭圆不过与图像之间的对比并不多让我们来解决这个问题图形上下文具有许多标准绘图属性例如不透明度、混合模式、变换等让我们在这里设置一个不透明度我们可以看看这个上下文表现得和你习惯中的可能有点不同的区域如果我只是在上下文中设置了不透明度那么它的行为就会如你所愿它会影响之后发生的所有操作
在以前如果我想对图形上下文进行更改只适用于我的一些绘图操作我必须在保存和恢复调用中将这些操作括号起来但是对于SwiftUI上下文我所要做的就是对副本进行更改
这些更改仅影响使用修改后的上下文完成的绘图在原始上下文中完成的绘图则不受影响
让我们也为我们的图像添加一些颜色
我们可以对解析的图像做的另一件事是设置阴影来控制符号的绘制方式
让我们在这里设置蓝色
看起来比我希望的要少一些有时在绘图时正确的混合模式会有大大的不同混合模式控制颜色的组合方式尤其是部分不透明度就像我们在这所看到的
来设置一个屏幕混合模式这结合了颜色使它们永远都能变得更亮那样看上去更好
还有更多可以做的绘图操作请看GraphicsContext 来查看所有可能的内容现在为了让它像模拟一样它需要可以实际移动在SwiftUI中有一些工具能随着时间的推移做出一些改变动画是最常见的它们通常只是在你做出改变时自动发生今年我们要介绍一个新的低层级工具叫做TimelineView 让你可以在想要精细控制事物随时间变化的程度时使用我可以通过将它包裹在我想改变的视图周围来使用TimelineView
我能以用时程表来配置它告诉它多久更新一次
我们有像定时器之类的时间表但我们将使用动画时间表来尽快在我们显示它们时获得更新
如果你熟悉显示链接则其工作原理非常相似如果你不熟悉那也完全没关系我们接受了一个时间线上下文而它提供了该展示什么的信息
我可以在几秒钟内抽出一个时间来利用它为我们的图像制作动画
让我们的图像在旋转振荡中移动吧所以我会根据当前时间做出一个角度
让我们通过余数让它每三秒循环一次…
然后乘以120 得到360度
我们将得到余弦的X值还是正弦？希望你还记得三角函数
现在让我们使用该值来更改我们的偏移量…
并实时预览我们的视图看看它会变怎样
很好看看当它们重叠时会怎么变得更亮？这就是我们运作中的屏幕混合模式接下来让我们添加一些交互性稍早我们研究了通过向单个视图添加手势可以实现的一些交互请记住使用画布的代价之一是其中的各个元素会组合成一张图因此我们无法例如说将手势附加到这些单独的图像上但我们仍然可以向整个视图添加手势让我们来添加增加显示的闪光数量的能力我们要为显示的数量添加一些状态
让我们从两个开始使用计数来控制我们的循环
然后我们添加一个 TapGesture来增加计数
来更新我们的预览吧
现在我们可以通过点击添加闪光
使用画布另一个重要的方面是由于它是单个图形没有任何与内容相关的信息可供辅助功能使用为了使其可被访问我们将使用标准的可访问性修饰符添加有关我们视图的信息
对于更进阶的情况有一个新的强大的 .accessibilityChildren修饰符允许你指定一个SwiftUI视图的层次结构来用于生成有关视图的辅助使用信息请参阅《SwiftUI辅助功能：超越基础》来得知有关使用它的更多信息
我们已经建立了一个相对简单使用画布的方法但它是被设计来支持更为复杂的使用所以我们得给事情加一点料我的一位同事为我编写了一些模拟代码其工作方式与我们这里的工作方式相同但是有更多元素来做更有趣的事情我有他发给我的文件我将把它粘贴到我们的视图中
这段代码与我们刚才所做的具有相同的结构我们现在有个长期存在的模型对象而我们会随时更新来持续追踪我们所有的粒子我们有相同的 TimelineView和画布来制作动画和绘制我们的内容我们正在更新模型的日期设置屏幕混合模式并告诉每个活动粒子以和刚刚我们在椭圆上相同的方式来绘制自己最后我们应用了相同的修饰符只是手势稍微复杂一些那么来看看它是什么样子
它会定期创建新的烟花爆裂我们也可以点击来添加更多爆裂它们是使用应用中的渐变颜色的椭圆制成的
在画布中绘图的另一个好处是它也适用于watchOS tvOS和macOS 在所有SwiftUI平台上皆可使用好的我们完成了我们的应用程序在此过程中我们研究了使用和修改安全区域如何使用前景样式来控制内容的绘制方式如何使用材质来获得模糊和鲜艳度我们使用画布和TimelineView 来构建复杂的动画图形我等不及想看看你在应用中构建了哪些美妙的图形 [音乐]

// Ignore all safe areas
ContentView()
    .ignoresSafeArea()

// Ignore keyboard only
ContentView()
    .ignoresSafeArea(.keyboard)

7:08 - Foreground Styles

VStack {
    Text("Primary")
        .foregroundStyle(.primary)
    Text("Secondary")
        .foregroundStyle(.secondary)
    Text("Tertiary")
        .foregroundStyle(.tertiary)
    Text("Quaternary")
        .foregroundStyle(.quaternary)
}

7:35 - Purple Foreground Styles

VStack {
    Text("Primary")
        .foregroundStyle(.primary)
    Text("Secondary")
        .foregroundStyle(.secondary)
    Text("Tertiary")
        .foregroundStyle(.tertiary)
    Text("Quaternary")
        .foregroundStyle(.quaternary)
}
.foregroundStyle(.purple)

7:41 - Blue Gradient Foreground Styles

let blueGradient = LinearGradient(
    colors: [.blue, .teal], startPoint: .leading, endPoint: .trailing)
VStack {
    Text("Primary")
        .foregroundStyle(.primary)
    Text("Secondary")
        .foregroundStyle(.secondary)
    Text("Tertiary")
        .foregroundStyle(.tertiary)
    Text("Quaternary")
        .foregroundStyle(.quaternary)
}
.foregroundStyle(blueGradient)

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

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC21