SwiftUI official tutorial (Four) SwiftUI tutorial (Three) SwiftUI tutorial (V)

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

 

SwiftUI教程（三）

SwiftUI教程（五）