Освоение Pinch-to-Zoom в SwiftUI: подробное руководство

Увеличение масштаба – популярный жест, позволяющий пользователям увеличивать и уменьшать масштаб контента на устройствах с сенсорным экраном. В SwiftUI, современной декларативной структуре Apple для создания пользовательских интерфейсов, реализация функции масштабирования выполняется очень просто. В этой статье мы рассмотрим несколько методов масштабирования в SwiftUI, сопровождаемые примерами кода.

Метод 1: использование модификатора MagnificationGesture
Один из способов реализовать масштабирование в SwiftUI — использовать модификатор MagnificationGesture. Этот модификатор обеспечивает встроенную поддержку жестов сжатия и позволяет нам соответствующим образом масштабировать наш контент. Вот пример того, как его использовать:

@State private var scale: CGFloat = 1.0
var body: some View {
    Image("exampleImage")
        .scaleEffect(scale)
        .gesture(
            MagnificationGesture()
                .onChanged { value in
                    self.scale = value.magnitude
                }
        )
}

Метод 2: объединение DragGesture и MagnificationGesture
Другой подход предполагает объединение модификаторов DragGesture и MagnificationGesture. Эта комбинация позволяет пользователям не только масштабировать, но и перемещаться по содержимому. Вот пример:

@State private var scale: CGFloat = 1.0
@State private var offset = CGSize.zero
var body: some View {
    Image("exampleImage")
        .scaleEffect(scale)
        .offset(offset)
        .gesture(
            SimultaneousGesture(
                DragGesture()
                    .onChanged { value in
                        self.offset = value.translation
                    },
                MagnificationGesture()
                    .onChanged { value in
                        self.scale = value.magnitude
                    }
                )
            )
}

Метод 3: использование ScrollView и GeometryReader
Если вы хотите реализовать функцию масштабирования в прокручиваемом представлении, вы можете использовать ScrollView и GeometryReader в SwiftUI. Вот пример:

@State private var zoomScale: CGFloat = 1.0
var body: some View {
    ScrollView(.vertical) {
        GeometryReader { geometry in
            Image("exampleImage")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaleEffect(zoomScale)
                .frame(width: geometry.size.width, height: geometry.size.height)
                .gesture(
                    MagnificationGesture()
                        .onChanged { value in
                            self.zoomScale = value.magnitude
                        }
                )
        }
    }
}

Функция масштабирования — важный аспект современных пользовательских интерфейсов. В этой статье мы рассмотрели три различных метода реализации масштабирования в SwiftUI. Используя модификатор MagnificationGesture, комбинируя DragGesture и MagnificationGesture или включая ScrollView и GeometryReader, вы можете предоставить пользователям плавное и интуитивно понятное масштабирование. Поэкспериментируйте с этими методами и адаптируйте их к вашим конкретным требованиям, чтобы улучшить взаимодействие с пользователем вашего приложения SwiftUI.