[iOS/swift] 갤러리 앱v3 만들기 - 핀치 제스처(Pinch Gesture) 사진 확대 축소 기능 추가

Xcode(버전11.3)를 이용하여 갤러리 앱v3을 만든다:D

이전에 만들었던 갤러리 앱v2에 핀치 제스처(Pinch Gesture)를 사용한 사진 확대 축소 기능을 추가한다.

아래 링크는 갤러리 앱v2 이다.

[iOS/swift] 갤러리 앱v2 만들기 - 페이지 컨트롤(Page Control), 스와이프 제스쳐(Swipe Gesture)

 

 

 

- 스토리보드 화면구성

갤러리 앱v3 스토리보드는 ImageView, Page Control을 추가한다.

사용할 이미지는 프로젝트에 images 폴더를 만들어서 추가했다.

 

 

 

- 아웃렛 변수, 액션 함수 추가

ImageView -> 'imgView' (아웃렛 변수)

Page Control -> 'pageControl' (아웃렛 변수)

Page Control -> 'pageChanged' (액션 함수)

 

 

 

전체 소스 보기

//
//  ViewController.swift
//  day200108_PinchGestureGallery
//
//  Created by 무니 on 2020/01/08.
//  Copyright © 2020 com.mooni. All rights reserved.
//

import UIKit

var images = ["01.jpeg", "02.jpeg", "03.jpeg", "04.jpeg", "05.jpeg"]

class ViewController: UIViewController {
    
    let numOfTouchs = 2

    @IBOutlet var imgView: UIImageView!
    @IBOutlet var pageControl: UIPageControl!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        pageControl.numberOfPages = images.count
        pageControl.currentPage = 0
        // 페이지 표시 색상
        pageControl.pageIndicatorTintColor = UIColor.lightGray
        // 현재 페이지 표시 색상
        pageControl.currentPageIndicatorTintColor = UIColor.black
        imgView.image = UIImage(named: images[0])

        // 한 손가락 스와이프 제스쳐 등록(좌, 우)
        let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.respondToSwipeGesture(_:)))
        swipeLeft.direction = UISwipeGestureRecognizer.Direction.left
        self.view.addGestureRecognizer(swipeLeft)

        let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.respondToSwipeGesture(_:)))
        swipeRight.direction = UISwipeGestureRecognizer.Direction.right
        self.view.addGestureRecognizer(swipeRight)

        // 두 손가락 스와이프 제스쳐 등록(좌, 우)
        let swipeLeftMulti = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.respondToSwipeGestureMulti(_:)))
        swipeLeftMulti.direction = UISwipeGestureRecognizer.Direction.left
        swipeLeftMulti.numberOfTouchesRequired = numOfTouchs
        self.view.addGestureRecognizer(swipeLeftMulti)

        let swipeRightMulti = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.respondToSwipeGestureMulti(_:)))
        swipeRightMulti.direction = UISwipeGestureRecognizer.Direction.right
        swipeRightMulti.numberOfTouchesRequired = numOfTouchs
        self.view.addGestureRecognizer(swipeRightMulti)
        
        // UIPinchGestureRecognizer 클래스 상수 pinch 선언
        let pinch = UIPinchGestureRecognizer(target: self, action: #selector(ViewController.doPinch(_:)))
        self.view.addGestureRecognizer(pinch)
    }

    @IBAction func pageChanged(_ sender: UIPageControl) {
        // print("page Changed")
        imgView.image = UIImage(named: images[pageControl.currentPage])
    }
    
    // 한 손가락 스와이프 제스쳐를 행했을 때 실행할 액션 메서드
    @objc func respondToSwipeGesture(_ gesture: UIGestureRecognizer) {
        // 만일 제스쳐가 있다면
        if let swipeGesture = gesture as? UISwipeGestureRecognizer{

            // 발생한 이벤트가 각 방향의 스와이프 이벤트라면
            // pageControl이 가르키는 현재 페이지에 해당하는 이미지를 imageView에 할당
            switch swipeGesture.direction {
                case UISwipeGestureRecognizer.Direction.left :
                   pageControl.currentPage -= 1
                   imgView.image = UIImage(named: images[pageControl.currentPage])
                case UISwipeGestureRecognizer.Direction.right :
                   pageControl.currentPage += 1
                   imgView.image = UIImage(named: images[pageControl.currentPage])
                default:
                 break
            }
        }
    }
       
       // 두 손가락 스와이프 제스쳐를 행했을 때 실행할 액션 메서드
    @objc func respondToSwipeGestureMulti(_ gesture: UIGestureRecognizer) {
        if let swipeGesture = gesture as? UISwipeGestureRecognizer {
            switch swipeGesture.direction {
                case UISwipeGestureRecognizer.Direction.left:
                   pageControl.currentPage -= 1
                   imgView.image = UIImage(named: images[pageControl.currentPage])
                case UISwipeGestureRecognizer.Direction.right:
                   pageControl.currentPage += 1
                   imgView.image = UIImage(named: images[pageControl.currentPage])
                default:
                  break
            }
        }
    }
    
    @objc func doPinch(_ pinch: UIPinchGestureRecognizer) {
        // 이미지를 스케일에 맞게 변환
        imgView.transform = imgView.transform.scaledBy(x: pinch.scale, y: pinch.scale)
        // 다음 변환을 위해 핀치의 스케일 속성을 1로 설정
        pinch.scale = 1
    }
    
}

 

 

 

시뮬레이터 결과 화면

사진은 바꿨다:)