UIScrollView image zoom 구현하기

UIScrollView 관련해서 찾아보면 거의 가로, 세로로 스크롤 하는 방식들이 많이 나옵니다.
근데 의외로 줌 하는 방법들은 많지 않더군요.. 그래서 정리해봅니다!

사실 여러 방법들이 있는데 저는 ScrollView 에 새로 추가된 Content Layout Guide, Frame Layout Guide 등을 써서 하고싶어서 한참 삽질을 했던 것 같아요..

결론부터 말씀드리면 zoom 을 위해선 이 layout guide를 따로 쓸 필요가 없다!

이렇게 받아들이고 나면 방법도 아주 간단합니다.

1. 스크롤뷰 추가
2. 서브뷰 추가
3. 서브뷰의 top, leading trailing, bottom 레이아웃을 스크롤 뷰에 맞춰준다. (content, frame layout 이 아님!)
4. scrollView의 min, max zoom scale을 정해준다.
5. UIScrollViewDelegate 를 채택하고 viewForZooming 함수에 zoom 될 대상을 리턴해준다.

끝!

 

1. 스크롤뷰 추가

2. 서브뷰 추가

scrollView 밑에 contentView 가 될 뷰를 하나 깔아줍니다.

3. 서브뷰의 top, leading trailing, bottom 레이아웃을 스크롤 뷰에 맞춰준다. (content, frame layout 이 아님!)

4. scrollView의 min, max zoom scale을 정해준다.

class ViewController: UIViewController {
    
    @IBOutlet weak var scrollView: UIScrollView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.scrollView.minimumZoomScale = 1.0
        self.scrollView.maximumZoomScale = 5.0
    }
}

물론 스토리보드에서도 할 수 있습니다.

 

5. UIScrollViewDelegate 를 채택하고 viewForZooming 함수에 zoom 될 대상을 리턴해준다.

class PinchScrollViewController: UIViewController {
    
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        self.scrollView.delegate = self
        self.scrollView.minimumZoomScale = 1.0
        self.scrollView.maximumZoomScale = 5.0
    }
	
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return self.imageView
    }
}

 

그럼 문제없이 zoom 되는 걸 확인하실 수 있습니다.