SwiftUI official tutorial (Four)
4. Custom Image View
After get the name and location of view, we have to add a picture to the landmark.
There is no need to add a lot of code, just create a custom view, and then add to the picture masking, borders, and shading can be.
First, add pictures to the project asset catalog
in.
SwiftUI official tutorial
4.1 project Resources
to find the folder turtlerock.png
and drag it to asset catalog
the editor. Xcode will create a picture image set
.
Next, create a new SwiftUI
view to customize the image view.
4.2 Select File
> New
> File
Open the Template Chooser. In User Interface
, select SwiftUI View
, then click Next
. Name the file CircleImage.swift
, and then click Create
.
Now preparatory work has been completed.
SwiftUI Tutorial
4.3 Image(_:)
initialization method will be replaced with a text view Turtle Rock
pictures.
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 calls .clipShape(Circle())
trim an image into a circle.
SwiftUI Tutorial
Circle
It can be used as a mask's shape, can also stroke
or fill
form 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 Create another gray stroke
's circle
, then as overlay
added to the picture, forming a picture frame.
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 then the next to add a shadow radius of 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()
}
}