SwiftUI 官方教程(四) SwiftUI教程(三) SwiftUI教程(五)

SwiftUI 官方教程(四)

4. 自定義 Image View

搞定名稱和位置 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()
    }
}

 

SwiftUI教程(三)

SwiftUI教程(五)

相關文章
相關標籤/搜索