SwiftUIで写真Appのように、Imageをピンチイン・ピンチアウト・ダブルタップでの操作を実装してみた。

実装

Imageのピンチイン・ピンチアウトジェスチャーはMagnificationGestureを利用し、onChangedで拡大率を取得できるので、scaleEffectに渡すことでViewを拡大できる。また、ダブルタップはTapGesture(count: 2)を使って、onEndedで拡大・縮小後のスケールを同じようにscaleEffectに渡せばよい。
そして、拡大したImageはScrollView([.vertical, .horizontal])に入れ、contentSizeを拡大したImageのサイズで更新することでスクロール操作ができるようになる。

struct ContentView: View {
    @State private var aspectRatio: CGFloat = 1.0
    
    var body: some View {
        GeometryReader { proxy in
            Image("mountain")
                .resizable()
                .scaledToFit()
                .frame(width: proxy.size.width)
                // backgroundでGeometryReaderを使うことで、対象のViewのサイズを取得できる
                .background(GeometryReader { imageGeometry in
                    Color.clear
                        .onAppear {
                            aspectRatio = imageGeometry.size.width / imageGeometry.size.height
                        }
                })
                .modifier(ImageMagnificationModifier(contentSize: proxy.size, aspectRatio: aspectRatio))
                .background(.black)
                .ignoresSafeArea()
        }
    }
}

struct ImageMagnificationModifier: ViewModifier {
    private var contentSize: CGSize
    private var aspectRatio: CGFloat
    private var minScale: CGFloat = 1.0
    private var maxScale: CGFloat = 5.0
    
    @State private var currentScale: CGFloat = 1.0
    @State private var lastMagnificationValue: CGFloat = 1.0
    
    init(contentSize: CGSize, aspectRatio: CGFloat) {
        self.contentSize = contentSize
        self.aspectRatio = aspectRatio
    }
    
    var magnification: some Gesture {
        MagnificationGesture()
            .onChanged { value in
                // 前回の拡大率に対する今回の拡大率の割合
                let changeRate = value / lastMagnificationValue
                
                DispatchQueue.main.async {
                    // 前回からの拡大率の変化分を考慮した現在のスケールを計算
                    currentScale *= changeRate
                    // 最小・最大スケールの範囲内に収める
                    currentScale = min(max(minScale, currentScale), maxScale)
                }
                
                lastMagnificationValue = value
            }
            .onEnded { value in
                // ジェスチャー開始時は1.0から始まるため、ジェスチャー終了時に1.0に戻す
                lastMagnificationValue = 1.0
            }
    }
    
    var doubleTap: some Gesture {
        TapGesture(count: 2).onEnded {
            // 最小・最大スケールを切り替える
            currentScale = currentScale < maxScale ? maxScale : minScale
        }
    }
    
    func body(content: Content) -> some View {
        ScrollView([.horizontal, .vertical], showsIndicators: false) {
            content
                .scaleEffect(currentScale)
                .gesture(magnification)
                .simultaneousGesture(doubleTap)
                .frame(width: contentSize.width * currentScale,
                       height: contentSize.width / aspectRatio * currentScale,
                       alignment: .center)
        }
    }
}

問題点

上のコードでは、SwiftUIで簡単にImageのズーム操作ができるが、操作性に少し問題点がある。

• MagnificationGestureの場合、ジェスチャー位置を取得する方法が調べた限りではなさそうで、scaleEffect(_:anchor:)のanchorに渡すことができないため、ジェスチャー位置を中心に拡大することができない。

• ジェスチャーしながらドラッグすると、ズームが中断されることがある。

改善策

これらの問題点を改善するには、現状UIScrollViewを利用することが良さそう。UIScrollViewの場合、minimumZoomScaleやmaximumZoomScaleを設定すれば、ジェスチャー位置を中心に拡大でき、ズーム操作もスムーズにできる。
ただし、scrollViewの中心にimageViewを配置したり（ズーム時も）、scrollView.contentSizeの更新も煩雑な計算が必要になってしまう。
なお、こちらの改善対応はfeature/uiscrollviewブランチを参照

import SwiftUI

struct ContentView: View {
    var body: some View {
        ImageViewer(imageName: "mountain")
            .ignoresSafeArea()
    }
}

struct ImageViewer: UIViewRepresentable {
    let imageName: String
    
    func makeUIView(context: Context) -> UIImageViewerView {
        let view = UIImageViewerView(imageName: imageName)
        return view
    }
    
    func updateUIView(_ uiView: UIImageViewerView, context: Context) {}
}

import UIKit
import Combine
import CombineCocoa

public class UIImageViewerView: UIView {
    private let imageName: String
    private let scrollView: UIScrollView = UIScrollView()
    private let imageView: UIImageView = UIImageView()
    
    private var cancellables = Set<AnyCancellable>()
    
    required init(imageName: String) {
        self.imageName = imageName
        super.init(frame: .zero)
        
        scrollView.delegate = self
        scrollView.maximumZoomScale = 10.0
        scrollView.minimumZoomScale = 1.0
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.showsVerticalScrollIndicator = false
        
        imageView.image = UIImage(named: imageName)
        imageView.contentMode = .scaleAspectFit
        imageView.isUserInteractionEnabled = true
        imageView.addGestureRecognizer(tapGestureRecognizer)
        
        scrollView.addSubview(imageView)
        addSubview(scrollView)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    public override func layoutSubviews() {
        super.layoutSubviews()
        scrollView.frame = bounds
        
        adjustImageViewSize()
        updateContentSize()
        updateContentInset()
    }
    
    /// imageViewのサイズを調整する
    ///
    /// - note: scrollView.boundsをもとに拡大率を計算して、imageViewのサイズを調整する。
    private func adjustImageViewSize() {
        guard let size = imageView.image?.size else { return }
        let rate = min(scrollView.bounds.width / size.width,
                       scrollView.bounds.height / size.height)
        imageView.frame.size = CGSize(width: size.width * rate,
                                      height: size.height * rate)
    }
    
    /// scrollView.contentSizeを更新する
    ///
    /// - note: scrollView.contentSizeもimageViewのサイズに合わせることで、imageViewの範囲外はスクロールできないようにする。
    private func updateContentSize() {
        scrollView.contentSize = imageView.frame.size
    }
    
    /// scrollView.contentInsetを更新する
    ///
    /// - note: imageViewをscrollViewの中心に表示させる。
    private func updateContentInset() {
        let edgeInsets = UIEdgeInsets(
            top: max((self.frame.height - imageView.frame.height) / 2, 0),
            left: max((self.frame.width - imageView.frame.width) / 2, 0),
            bottom: 0,
            right: 0)
        scrollView.contentInset = edgeInsets
    }
    
    private var tapGestureRecognizer: UITapGestureRecognizer {
        let tapGestureRecognizer = UITapGestureRecognizer()
        tapGestureRecognizer.numberOfTapsRequired = 2
        tapGestureRecognizer
            .tapPublisher
            .sink { [weak self] recognizer in
                self?.onDoubleTap(recognizer: recognizer)
            }
            .store(in: &cancellables)
        return tapGestureRecognizer
    }
    
    private func onDoubleTap(recognizer: UITapGestureRecognizer) {
        let maximumZoomScale = scrollView.maximumZoomScale

        if maximumZoomScale != scrollView.zoomScale {
            let tapPoint = recognizer.location(in: imageView)
            let size = CGSize(
                width: scrollView.frame.size.width / maximumZoomScale,
                height: scrollView.frame.size.height / maximumZoomScale)
            let origin = CGPoint(
                x: tapPoint.x - size.width / 2,
                y: tapPoint.y - size.height / 2)
            scrollView.zoom(to: CGRect(origin: origin, size: size), animated: true)
        } else {
            scrollView.zoom(to: scrollView.frame, animated: true)
        }
    }
}

extension UIImageViewerView: UIScrollViewDelegate {
    public func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imageView
    }
    
    public func scrollViewDidZoom(_ scrollView: UIScrollView) {
        // ズーム終了時にscrollView.contentInsetを更新して、imageViewをscrollViewの中心に表示させる。
        updateContentInset()
    }
}

リポジトリ

参考