SwiftUI 官方教程（四）

4. 自定義 Image View

搞定名稱和位置 view 后，我們來給地標添加圖片。

這不需要添加很多代碼，只需要創建一個自定義 view，然后給圖片加上遮罩、邊框和陰影即可。

首先將圖片添加到項目的 asset catalog 中。

SwiftUI 官方教程

4.1 在項目的 Resources 文件夾中找到 turtlerock.png ，將它拖到 asset catalog 的編輯器中。 Xcode 會給圖片創建一個 image set 。

接下來，創建一個新的 SwiftUI view 來自定義 image view。

4.2 選擇 File > New > File 打開模板選擇器。在 User Interface 中，選中 SwiftUI View ，然后單擊 Next 。將文件命名為 CircleImage.swift ，然后單擊 Create 。

現在准備工作已完成。

SwiftUI教程

 

4.3 使用 Image(_:) 初始化方法將 text view 替換為 Turtle Rock 的圖片。

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()
    }
}

 

SwiftUI教程（三）

SwiftUI教程（五）