MagnificationGesture (MagnificationGesture)
می خواهیم «بزرگ نمایی با ژست» را ساده یاد بگیریم. «ژست (Gesture)» یعنی حرکت لمسی مثل نیشگون گرفتن. با «MagnificationGesture» می توانی روی محتوا زوم کنی.
MagnificationGesture چیست؟
این ژست مقدار «مقیاس (Scale)» می دهد. سپس با .scaleEffect همان مقدار را روی نما اعمال می کنی. بنابراین، مثل بزرگ نمایی عکس در موبایل عمل می کند.
نیشگون برای زوم
در این نمونه با نیشگون، عکس بزرگ و کوچک می شود. سپس با رهاکردن، به اندازه اولیه برمی گردد.
import SwiftUI
struct MagnifyDemo: View {
@State private var scale: CGFloat = 1
var body: some View {
Image(systemName: "photo")
.resizable()
.scaledToFit()
.frame(height: 120)
.scaleEffect(scale)
.gesture(
MagnificationGesture()
.onChanged { value in
scale = value
}
.onEnded { _ in
withAnimation(.spring()) {
scale = 1
}
}
)
}
}
struct ContentView: View {
var body: some View {
MagnifyDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
نکته: مقدار value معمولاً نزدیک 1 است. کمتر از 1 یعنی کوچک نمایی و بیشتر از 1 یعنی بزرگ نمایی.
محدودکردن بازه مقیاس
گاهی زومِ بی نهایت خوب نیست. پس بازه را محدود کن؛ مثلاً بین 0.5 تا 2. سپس روی رهاکردن، به 1 برگردان.
import SwiftUI
struct MagnifyClampedDemo: View {
@State private var scale: CGFloat = 1
let minS: CGFloat = 0.5
let maxS: CGFloat = 2.0
func clamp(_ v: CGFloat) -> CGFloat {
min(max(v, minS), maxS)
}
var body: some View {
Image(systemName: "photo")
.resizable()
.scaledToFit()
.frame(height: 120)
.scaleEffect(scale)
.gesture(
MagnificationGesture()
.onChanged { value in
scale = clamp(value)
}
.onEnded { _ in
withAnimation(.easeInOut) {
scale = 1
}
}
)
}
}
struct ContentView: View {
var body: some View {
MagnifyClampedDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
گام های عملی
- یک
@Stateبرای مقیاس بساز. MagnificationGestureرا روی نما بگذار.- در
.onChanged، مقدار مقیاس را تنظیم کن. - در
.onEnded، مقیاس را به 1 برگردان.
هشدار: زوم زیاد می تواند متن را دندانه ای نشان دهد. بنابراین، فریم و کیفیت آیکون ها را در نظر بگیر.
برای «بزرگ نمایی با ژست» این صفحه را نشانه گذاری کن: بزرگ نمایی با ژست. همچنین، برای چرخش نگاه کن به RotationGesture و برای ترکیب ها به ترکیب ژست ها.
جمع بندی سریع
- مقیاس را از MagnificationGesture بگیر.
- با scaleEffect اعمال کن.
- بازه زوم را محدود کن.
- روی رهاکردن، به 1 برگردان.