搞定名稱和位置 view 後,咱們來給地標添加圖片。html
這不須要添加不少代碼,只須要建立一個自定義 view,而後給圖片加上遮罩、邊框和陰影便可。swift
首先將圖片添加到項目的 asset catalog
中。編輯器
SwiftUI 官方教程ide
4.1 在項目的 Resources
文件夾中找到 turtlerock.png
,將它拖到 asset catalog
的編輯器中。 Xcode 會給圖片建立一個 image set
。post
接下來,建立一個新的 SwiftUI
view 來自定義 image view。ui
4.2 選擇 File
> New
> File
打開模板選擇器。在 User Interface
中,選中 SwiftUI View
,而後單擊 Next
。將文件命名爲 CircleImage.swift
,而後單擊 Create
。url
如今準備工做已完成。spa
SwiftUI教程3d
4.3 使用 Image(_:)
初始化方法將 text view 替換爲 Turtle Rock
的圖片。code
CircleImage.swift
import SwiftUI struct CircleImage: View { var body: some View { Image("turtlerock") } } struct CircleImage_Preview: PreviewProvider { static var previews: some View { CircleImage() } }
4.4 調用 .clipShape(Circle())
,將圖像裁剪成圓形。
SwiftUI教程
Circle
能夠當作一個蒙版的形狀,也能夠經過 stroke
或 fill
造成 view。
CircleImage.swift
import SwiftUI struct CircleImage: View { var body: some View { Image("turtlerock") .clipShape(Circle()) } } struct CircleImage_Preview: PreviewProvider { static var previews: some View { CircleImage() } }
4.5 建立另外一個 gray stroke
的 circle
,而後將其做爲 overlay
添加到圖片上,造成圖片的邊框。
CircleImage.swift
import SwiftUI struct CircleImage: View { var body: some View { Image("turtlerock") .clipShape(Circle()) .overlay( Circle().stroke(Color.gray, lineWidth: 4)) } } struct CircleImage_Preview: PreviewProvider { static var previews: some View { CircleImage() } }
4.6 接來下,添加一個半徑爲 10 point 的陰影。
CircleImage.swift
import SwiftUI struct CircleImage: View { var body: some View { Image("turtlerock") .clipShape(Circle()) .overlay( Circle().stroke(Color.gray, lineWidth: 4)) .shadow(radius: 10) } } struct CircleImage_Preview: PreviewProvider { static var previews: some View { CircleImage() } }
4.7 將邊框的顏色改成 white
,完成 image viewSwiftUI教程
CircleImage.swift
import SwiftUI struct CircleImage: View { var body: some View { Image("turtlerock") .clipShape(Circle()) .overlay( Circle().stroke(Color.white, lineWidth: 4)) .shadow(radius: 10) } } struct CircleImage_Preview: PreviewProvider { static var previews: some View { CircleImage() } }