How to handle pinch to zoom for views
About 2 min
How to handle pinch to zoom for views 관련
SwiftUI by Example
Back to Home
How to handle pinch to zoom for views | SwiftUI by Example
How to handle pinch to zoom for views
Updated for Xcode 15
SwiftUI provides MagnifyGesture for tracking pinch to zoom for views, which can be bound to a scaleEffect() modifier so the user’s pinch gesture automatically scales up or shrinks a view.
If you want to keep their zoom level once they finish the gesture, you should track their current and total zoom level together, like this:
struct ContentView: View {
@State private var currentZoom = 0.0
@State private var totalZoom = 1.0
var body: some View {
Image("singapore")
.scaleEffect(currentZoom + totalZoom)
.gesture(
MagnifyGesture()
.onChanged { value in
currentZoom = value.magnification - 1
}
.onEnded { value in
totalZoom += currentZoom
currentZoom = 0
}
)
.accessibilityZoomAction { action in
if action.direction == .zoomIn {
totalZoom += 1
} else {
totalZoom -= 1
}
}
}
}
Tips
Subtract 1 from value.magnification is important, because 1 is its default value for a new gesture. Using the accessibilityZoomAction() modifier allows assistive technologies to control the zoom level.
On the other hand, if you want to track their gesture but reset back to 0 each time, use @GestureState like this:
struct ContentView: View {
@GestureState private var zoom = 1.0
var body: some View {
Image("singapore")
.scaleEffect(zoom)
.gesture(
MagnifyGesture()
.updating($zoom) { value, gestureState, transaction in
gestureState = value.magnification
}
)
}
}
Similar solutions…
How to override animations with transactions | SwiftUI by Example
How to override animations with transactions
Composing views to create a list row | SwiftUI by Example
Composing views to create a list row
How to use @EnvironmentObject to share data between views | SwiftUI by Example
How to use @EnvironmentObject to share data between views
How to make two views the same width or height | SwiftUI by Example
How to make two views the same width or height
How to make views scroll with a custom transition | SwiftUI by Example
How to make views scroll with a custom transition
