Skip to content

自定义图片视图

名称和位置视图都设置好了,下一步就是为地标添加一个图像。

我们将会创建一个自定义视图,为图片添加遮罩、边框和阴影。

首先,要将图像添加到项目的 Assets.xcassets 目录。

第 1 步

学习前准备下载的资源文件中的 Resources 文件夹中找到turtlerock@2x.jpg;把它拖到 Assets.xcassets 目录中。Xcode 将为该图像创建一个新的 image set

接下来,将为自定义图像视图创建一个新的 SwiftUI 视图。

第 2 步

在导航栏中,选择 File > New > File,再次打开模板选择器。在 User Interface 部分,选择 SwiftUI View 并点击 Next。将文件命名为 CircleImage.swift,然后点击 Create

现在准备工作已完成。

第 3 步

通过使用 Image(_:) 初始化方法,用 Turtle Rock 图片替换文本。

第 4 步

调用 clipShape(Circle()) 方法,将图像剪裁为圆形。

提示

Circle 可以当做一个蒙版的形状,也可以通过 strokefill 绘制视图。

第 5 步

再创建一个 gray strokeCircle,然后将其作为 overlay 添加到图片上,作为图片的边框。

第 6 步

接下来,添加一个半径为 7 点的阴影。

第 7 步

将边框颜色改为 white

这样就完成了图像视图。

自定义图片视图 has loaded