Loading...

How to zoom in and zoom out a SwiftUI view?

question swiftui swift
Ram Patra Published on October 7, 2024

In a macOS or iOS app, you can easily add a zoom feature to any SwiftUI view with the scaleEffect modifier. In the below example, I am using a Slider to control the zoom level. Here’s how you can implement zooming in and out with a slider:

Example with Slider to Zoom:

import SwiftUI

struct ZoomableView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        VStack {
            Text("Use Slider to Zoom")
                .font(.largeTitle)
                .padding()
                .scaleEffect(scale) // Apply the scale effect

            Slider(value: $scale, in: 0.5...3.0, step: 0.1) {
                Text("Zoom Level")
            }
            .padding()
        }
        .frame(width: 400, height: 300)
    }
}

struct ContentView: View {
    var body: some View {
        ZoomableView()
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Explanation:

  • scaleEffect(scale): This applies the zoom to the view based on the scale value.
  • Slider(value: $scale, in: 0.5...3.0, step: 0.1): The slider allows zoom control, where the zoom level ranges between 0.5x (zoom out) to 3.0x (zoom in). You can adjust this range as needed.
  • step: 0.1: Defines how finely the slider adjusts the scale.

This setup gives you a smooth zoom experience using the slider in a macOS or iOS app. I have shown the zoom on a Text view but you can use this technique with other SwiftUI views too.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on October 7, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question swiftui swift May 29, 2022 How to open a window in SwiftUI using NSWindowController?

Although many things in SwiftUI are idiomatic and straightforward, showing your view in a new window needs a bit of coding to do. Hence, this short post.

question swiftui swift August 31, 2024 @Published in SwiftUI

In SwiftUI, the @Published property wrapper is used in combination with the ObservableObject protocol to automatically announce changes to properties of a class. This allows SwiftUI views that depend on these properties to update automatically when the data changes.

question swiftui swift September 8, 2024 How to loop through an enum in SwiftUI?

In SwiftUI, looping through an enum is not directly possible without some extra work because enums in Swift don’t inherently support iteration. However, you can achieve this by making the enum CaseIterable, which automatically provides a collection of all cases in the enum.