自定义图片视图 #

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

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

首先，要将图像添加到项目的 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()) 方法，将图像剪裁为圆形。

第 5 步 #

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

第 6 步 #

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

第 7 步 #

将边框颜色改为 white。

这样就完成了图像视图。