[iOS/UI] 이미지 줌으로 확대/축소하기(feat. 스크롤뷰)

안녕하세요 Foma 💻 입니다!

 

오늘 알아볼 것은 이미지를 확대하는 방법입니다.

 

바로 시작할게요~

---

Storyboard

 

레이아웃은 아래와 같이 스크롤뷰에 이미지뷰가 포함되게 해주세요.

 

---

ViewController

 

먼저 이미지뷰와 스크롤뷰를 연결해주세요.

 

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

 

초기 세팅은 아래와 같이 해주세요.

 

1. 이미지뷰의 이미지를 원하는 것으로 세팅해줍니다.

 

2. 스크롤뷰의 딜리게이트를 현재 뷰컨트롤러로 설정해주세요. (아직 오류가 날거에요.)

 

3. 스크롤뷰의 처음 줌스케일을 정해줍니다. (따로 설정하지 않으면 1.0입니다.)

 

4. 스크롤뷰의 최소 줌스케일을 정해줍니다. (줌을 해서 축소할 때 이 이하로는 줄어들지 않게 설정하는 것입니다.)

 

5. 스크롤뷰의 최대 줌스케일을 정해줍니다. (줌을 해서 확대할 때 이 이상은 확대대지 않게 설정하는 것입니다.

 

func configure() {
        imageView.image = UIImage(named: "스폰지밥.png") //1
        scrollView.delegate = self //2
        scrollView.zoomScale = 1.0 //3
        scrollView.minimumZoomScale = 1.0 //4
        scrollView.maximumZoomScale = 2.0 //5
    }

 

위에서 스크롤뷰 딜리게이트를 현재 뷰컨트롤러로 설정했으니 확장해서 해당 딜리게이트를 채택해줍니다.

 

그리고 UIScrollViewDelegate의 메서드 중 하나인 viewForZooming을 사용하여 현재 이미지뷰로 반환해줍니다.

 

//MARK:- UIScrollViewDelegate

extension ViewController:UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
         return self.imageView
     }
}

 

(viewForZooming은 스크롤뷰에서 핀치 줌이 발생했을 때 어떤 뷰를 확대/축소가 할지 정해주는 것입니다.)

 

---

실행 화면

 

아래와 같이 핀치 줌으로 확대/축소를 할 수 있는 것을 볼 수 있습니다.

 

(시뮬레이터에서 핀치 줌을 하는 방법은 Option키를 누르고 하면 됩니다.)

 

 

 

 

하지만 문제점이 한가지 있었는데 minimumZoomScale과 maximumZoomScale을 정해놓아도

 

그 이하,이상으로 축소/확대가 되고 한번 탭을 하면 최소,최대 줌스케일로 돌아갔습니다.

 

저는 아예 그 이하,이상으로 축소/확대가 안되게 하기 위해서 scrollViewDidScroll 메서드에 아래와 같이 추가해주었습니다.

 

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView.zoomScale <= 1.0 {
            scrollView.zoomScale = 1.0
        }
        
        if scrollView.zoomScale >= 2.0 {
            scrollView.zoomScale = 2.0
        }
    }

 

이렇게 하면 아무리 확대해도 줌스케일이 2.0 이상 확대되지 않고 아무리 축소해도 1.0 이하로 축소되지 않는 것을 볼 수 있습니다.

 

---

Source Code