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.

Take your presentation to the next level.

Put your face and name on your screen.

Your to-dos on your menu bar.

Fill forms using your right-click menu.

Ram Patra Published on October 7, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question swiftui macos September 3, 2024 How to open and close windows programmatically in SwiftUI?

To open or close a window programmatically from outside that window using environment variables, you need to leverage the new openWindow (macOS 13+) and dismissWindow (macOS 14+) environment variables. This environment variables allow you to programmatically open and close a window by its identifier.

question swiftui macos June 7, 2025 How to change the accent colour of a macOS app in SwiftUI?

To change the accent color of a SwiftUI macOS app, you can do it in any of the following ways:

Like my work?

Please, feel free to reach out. I would be more than happy to chat.