[swift] 이미지 슬라이드쇼에서 이미지 줌 효과 추가하기

27 Nov 2023

swift

이미지 슬라이드쇼에 이미지 줌 효과를 추가하는 방법에 대해 알아보겠습니다. 이 기능은 사용자가 슬라이드쇼에서 특정 이미지를 확대하여 더 자세히 볼 수 있게 해줍니다.

1. UIScrollView 사용하기

먼저, 이미지를 줌하기 위해 UIScrollView를 사용해야 합니다. UIScrollView는 사용자가 화면을 스크롤하거나 확대/축소할 수 있는 컨테이너 뷰입니다.

import UIKit

class ImageZoomViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        scrollView.delegate = self
        scrollView.minimumZoomScale = 1.0
        scrollView.maximumZoomScale = 4.0

        let image = UIImage(named: "example_image")
        imageView.image = image
        imageView.contentMode = .scaleAspectFit

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleDoubleTap(_:)))
        tapGesture.numberOfTapsRequired = 2
        scrollView.addGestureRecognizer(tapGesture)
    }

    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imageView
    }

    @objc func handleDoubleTap(_ recognizer: UITapGestureRecognizer) {
        if scrollView.zoomScale == 1 {
            scrollView.zoom(to: zoomRectForScale(scale: scrollView.maximumZoomScale, center: recognizer.location(in: recognizer.view)), animated: true)
        } else {
            scrollView.setZoomScale(1, animated: true)
        }
    }

    private func zoomRectForScale(scale: CGFloat, center: CGPoint) -> CGRect {
        var zoomRect = CGRect.zero
        zoomRect.size.height = imageView.frame.size.height / scale
        zoomRect.size.width  = imageView.frame.size.width  / scale

        let newCenter = imageView.convert(center, from: scrollView)
        zoomRect.origin.x = newCenter.x - (zoomRect.size.width / 2.0)
        zoomRect.origin.y = newCenter.y - (zoomRect.size.height / 2.0)

        return zoomRect
    }
}

위의 코드에서 scrollView와 imageView는 Storyboard에서 IBOutlet으로 연결해주어야 합니다. viewDidLoad()에서 scrollView의 delegate를 설정하고, 최소 및 최대 줌 스케일을 설정합니다. 또한 이미지를 설정하고, 이미지 뷰의 contentMode를 ScaleAspectFit으로 설정합니다.

2. 줌 제스처 추가하기

줌인 및 줌아웃 제스처를 추가하기 위해 UITapGestureRecognizer를 사용합니다. double tap 이벤트를 감지하여 해당 위치를 중심으로 이미지를 확대하거나 축소합니다.

let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleDoubleTap(_:)))
tapGesture.numberOfTapsRequired = 2
scrollView.addGestureRecognizer(tapGesture)

위의 코드를 viewDidLoad()에 추가하면 됩니다. 사용자가 이미지를 더블 탭하면 handleDoubleTap() 메소드가 호출됩니다.

3. 줌 영역 계산하기

사용자가 이미지를 더블 탭하면 줌 영역을 계산하여 해당 위치를 중심으로 이미지를 확대합니다. 아래의 zoomRectForScale(scale:center:) 메소드를 사용하여 줌 영역을 계산합니다.

private func zoomRectForScale(scale: CGFloat, center: CGPoint) -> CGRect {
    var zoomRect = CGRect.zero
    zoomRect.size.height = imageView.frame.size.height / scale
    zoomRect.size.width  = imageView.frame.size.width  / scale

    let newCenter = imageView.convert(center, from: scrollView)
    zoomRect.origin.x = newCenter.x - (zoomRect.size.width / 2.0)
    zoomRect.origin.y = newCenter.y - (zoomRect.size.height / 2.0)

    return zoomRect
}

줌 스케일로 확대/축소 비율을 받고, 사용자의 탭 위치를 중심으로 줌 영역을 계산합니다.

마무리

이제 이미지 슬라이드쇼에 이미지 줌 효과를 추가하기 위한 기본적인 코드를 작성해보았습니다. 이를 바탕으로 자신만의 슬라이드쇼 앱을 구현할 수 있습니다. 자세한 내용은 UIScrollView 공식 문서를 참고하시기 바랍니다.

출처