SwiftUI Scale Image Tutorial

In SwiftUI images can be scaled with the scaleEffect modifier. In this tutorial an image is displayed, which can be scaled up and down with a slider.SwiftUI requires Xcode 11 and MacOS Catalina, for which the Betas can be downloaded at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project . In the template selector, select iOS as the platform, select the Single View App template, and then click Next . Enter SwiftUIScaleImageTutorial as the Product Name, select the Use SwiftUI checkbox, and click Next . Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift . Change the code inside the ContentView struct to

struct ContentView: View {
    // 1.
    @State var scale: CGFloat = 1.0
    
    var body: some View {
        
        VStack {
            // 2.
            Slider(value: $scale, in: 1.0...10.0, step: 0.1)
                .padding(.bottom, 100)
            // 3.
            Image(systemName: "cloud.rain")
                .scaleEffect(scale)
        }
    }
}

The source code of the SwiftUIScaleImageTutorial can be downloaded at the ioscreator repository on Github .