拡大縮小機能のためにピッチインピッチアウトの実装

背景

WebView主体のアプリを実装しているのですが、画像を表示したときに拡大ができないことに気づいてしまったので対応です。

MagnificationGestureで実装します

iOS17から非推奨となってしまったMagnificationGestureを使います。
（iOS17リリースされてないし、まだ良いよね…？）

ちなみに公式からiOS17以降はMagnifyGesture使えと言われます。

実装

Gestureの設定（指を離したときに拡大率を元に戻す）

ピッチインピッチアウトで指を離したタイミングで拡大率がデフォルトに戻ります。

GestureTestView.swift

    // MARK: - Gesture Properties
    
    /// 最小のスケールを設定
    let minGestureScale: CGFloat = 1.0
    /// 最大のスケールを設定
    let maxGestureScale: CGFloat = 4.0
    
    /// 拡大Gestureの設定（指を離したときに拡大率を元に戻す）
    @GestureState var magnifyByDefault = 1.0
    var magnificationByDefault: some Gesture {
        MagnificationGesture()
            .updating($magnifyByDefault) { currentState, gestureState, transaction in
                // ジェスチャーの変化値を指定の範囲に制限
                let limitedValue = min(max(currentState, minGestureScale), maxGestureScale)
                
                gestureState = limitedValue
            }
    }

    // MARK: - View
    VStack {
        hogeView()
            // 拡大率を戻す場合
            .scaleEffect(magnifyByDefault, anchor: .center)
            .gesture(magnificationByDefault)
    }

Gestureの設定（指を離したときに拡大率を維持する）

ピッチインピッチアウトで指を離したタイミングで拡大率が戻らないようにします。
magnifyByを@Stateしています。

GestureTestView.swift

    // MARK: - Gesture Properties
    
    /// 拡大Gestureの設定（指を離したときに拡大率を維持する）
    @State private var magnifyBy = 1.0
    /// 最小のスケールを設定
    let minGestureScale: CGFloat = 1.0
    /// 最大のスケールを設定
    let maxGestureScale: CGFloat = 4.0
    
    /// ジェスチャー倍率設定
    var magnification: some Gesture {
        MagnificationGesture()
            .onChanged { value in
                // ジェスチャーの変化値を指定の範囲に制限
                let limitedValue = min(max(value, minGestureScale), maxGestureScale)

                // 変化量を制限したジェスチャーの変化値を代入
                magnifyBy = limitedValue
            }
    }

    // MARK: - View

    VStack {
        hogeView()
            // 拡大率を維持する場合
            .scaleEffect(magnifyBy, anchor: .center)
            .gesture(magnification)
    }

課題

• ピッチインピッチアウトが画面中央に対してになるので、指で触れている箇所に対して行いたい（Safari、Chromeみたいな感じ）。
• 拡大した状態でViewを上下左右に動かしたい。
• MagnifyGestureで実装する。

参考

MagnificationGesture
MagnifyGesture
【SwiftUI】ピンチイン・ピンチアウトでViewを拡大縮小する