[ios] ios 16: 스와이프 제스처

iOS는 다양한 제스쳐를 지원하는데, 그 중 가장 일반적으로 많이 사용되는 스와이프 제스처를 다루는 방법을 한번 알아보려고 한다.

 

이번 포스팅에서는 4개의 이미지 뷰를 놓고, 스와이프 제스처 이벤트를 처리하여 이미지를 바꿔보는 간단한 예제를 진행하려고 한다.

 

우선은 싱글 터치 제스처를 다루도록 코드를 작성하고, 이후에 멀티 터치 또한 인식하여 처리할 수 있도록 수정할 것이다.

 

바로 시작해보자.

---

우선 앱의 구성은 아래와 같이 위, 아래, 좌, 우 방향으로 이미지 뷰를 놓고 각 이미지 뷰에는 화살표 이미지를 셋팅한다.

---

싱글 제스처는 굉장히 간단하게 처리할 수 있다.

 

우선, 각 이미지 뷰에 초기 이미지를 셋팅하고, 빨간색 화살표 이미지와 검은색 화살표 이미지를 가지도록 UIImage 배열을 선언하여 초기화한다. 

 

import UIKit

class ViewController: UIViewController {

    @IBOutlet var imgViewUp: UIImageView!
    
    @IBOutlet var imgViewLeft: UIImageView!
    @IBOutlet var imgViewRight: UIImageView!
    @IBOutlet var imgViewDown: UIImageView!
    
    var imgUp = [UIImage]()
    var imgDown = [UIImage]()
    var imgLeft = [UIImage]()
    var imgRight = [UIImage]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        imgUp.append(UIImage(named: "arrow-up-black.png")!)
        imgUp.append(UIImage(named: "arrow-up-red.png")!)
        imgDown.append(UIImage(named: "arrow-down-black.png")!)
        imgDown.append(UIImage(named: "arrow-down-red.png")!)
        imgLeft.append(UIImage(named: "arrow-left-black.png")!)
        imgLeft.append(UIImage(named: "arrow-left-red.png")!)
        imgRight.append(UIImage(named: "arrow-right-black.png")!)
        imgRight.append(UIImage(named: "arrow-right-red.png")!)

        imgViewUp.image = imgUp[0]
        imgViewDown.image = imgDown[0]
        imgViewLeft.image = imgLeft[0]
        imgViewRight.image = imgRight[0]
	}


}

 

다음으로 제스처의 경우 UISwipeGestureRecognizer 객체를 생성하여 처리해야 하므로, 아래와 같이 객체 선언와 각 제스처 객체의 방향을 지정하여 view의 gestureRecognizer에 등록해준다.

 

다음으로 각 제스처를 받을 때 마다 호출할 objc 메서드를 아래와 같이 작성하면 싱글 제스처를 다루는 코드는 마무리가 된다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet var imgViewUp: UIImageView!
    
    @IBOutlet var imgViewLeft: UIImageView!
    @IBOutlet var imgViewRight: UIImageView!
    @IBOutlet var imgViewDown: UIImageView!
    
    var imgUp = [UIImage]()
    var imgDown = [UIImage]()
    var imgLeft = [UIImage]()
    var imgRight = [UIImage]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        imgUp.append(UIImage(named: "arrow-up-black.png")!)
        imgUp.append(UIImage(named: "arrow-up-red.png")!)
        imgDown.append(UIImage(named: "arrow-down-black.png")!)
        imgDown.append(UIImage(named: "arrow-down-red.png")!)
        imgLeft.append(UIImage(named: "arrow-left-black.png")!)
        imgLeft.append(UIImage(named: "arrow-left-red.png")!)
        imgRight.append(UIImage(named: "arrow-right-black.png")!)
        imgRight.append(UIImage(named: "arrow-right-red.png")!)

        imgViewUp.image = imgUp[0]
        imgViewDown.image = imgDown[0]
        imgViewLeft.image = imgLeft[0]
        imgViewRight.image = imgRight[0]
        
        // UISwipeGestureRecognizer 선언, Action은 스와이프 제스쳐를 인식했을 때 실행할 메서드
        let swipeUp = UISwipeGestureRecognizer(target: self, action: #selector
                                               (ViewController.respondToSwipeGesture(_:)))
        // 스와이프 제스쳐 방향 설정
        swipeUp.direction = UISwipeGestureRecognizer.Direction.up
        
        // 위쪽 방향으로 설정한 스와이프 제스쳐 등록
        self.view.addGestureRecognizer(swipeUp)
        
        let swipeDown = UISwipeGestureRecognizer(target: self, action: #selector
                                               (ViewController.respondToSwipeGesture(_:)))
        swipeDown.direction = UISwipeGestureRecognizer.Direction.down
        self.view.addGestureRecognizer(swipeDown)
        
        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)
    }
    
    @objc func respondToSwipeGesture(_ gesture: UIGestureRecognizer) {
        // 만약 제스쳐가 있다면
        if let swipeGesture = gesture as? UISwipeGestureRecognizer {
            imgViewUp.image = imgUp[0]
            imgViewDown.image = imgDown[0]
            imgViewLeft.image = imgLeft[0]
            imgViewRight.image = imgRight[0]
            
            switch swipeGesture.direction {
            case UISwipeGestureRecognizer.Direction.up:
                imgViewUp.image = imgUp[1]
            case UISwipeGestureRecognizer.Direction.down:
                imgViewDown.image = imgDown[1]
            case UISwipeGestureRecognizer.Direction.left:
                imgViewLeft.image = imgLeft[1]
            case UISwipeGestureRecognizer.Direction.right:
                imgViewRight.image = imgRight[1]
            default:
                break
            }
        }
    }


}

---

 

하나의 제스처를 한번에 다루는 예제는 굉장히 쉽다.

 

다음으로 넘어가서 두개 이상의 제스처를 동시에 다루는 멀티 제스처에 대한 예제를 살펴보자.

 

코드는 싱글 제스처 코드에서 이어서 작성한다.

---

우선, 화살표 이미지를 담고 있는 배열에 초록색 화살표를 추가하고 멀티터치를 인식하기 위한 numOfTouchs 상수를 추가한다.

let numOfTouchs = 2
    
...
...
...
        
imgUp.append(UIImage(named: "arrow-up-black.png")!)
imgUp.append(UIImage(named: "arrow-up-red.png")!)
imgUp.append(UIImage(named: "arrow-up-green.png")!)

imgDown.append(UIImage(named: "arrow-down-black.png")!)
imgDown.append(UIImage(named: "arrow-down-red.png")!)
imgDown.append(UIImage(named: "arrow-down-green.png")!)

imgLeft.append(UIImage(named: "arrow-left-black.png")!)
imgLeft.append(UIImage(named: "arrow-left-red.png")!)
imgLeft.append(UIImage(named: "arrow-left-green.png")!)

imgRight.append(UIImage(named: "arrow-right-black.png")!)
imgRight.append(UIImage(named: "arrow-right-red.png")!)
imgRight.append(UIImage(named: "arrow-right-green.png")!)

...
...
...

 

다음으로 멀티 터치 스와이프와 싱글 터치 스와이프 제스처를 구분해야 하므로 UISwipeGestureRecognizer 객체를 4개 더 선언해주는데, 이때는 반드시numberOfTouchesRequired 프로퍼티를 numOfTouchs인 2로 설정해줘야 한다.

 

let swipeUpMulti = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.respondToSwipeGestureMulti(_:)))
swipeUpMulti.direction = UISwipeGestureRecognizer.Direction.up
swipeUpMulti.numberOfTouchesRequired = numOfTouchs
self.view.addGestureRecognizer(swipeUpMulti)

let swipeDownMulti = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.respondToSwipeGestureMulti(_:)))
swipeDownMulti.direction = UISwipeGestureRecognizer.Direction.down
swipeDownMulti.numberOfTouchesRequired = numOfTouchs
self.view.addGestureRecognizer(swipeDownMulti)

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)

이제 마지막으로 멀티 터치 스와이프 동작을 받았을 때, 화살표 이미지를 바꿔줄 @objc 메서드를 추가해주면 끝이 난다.

 

전체 코드는 아래와 같다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet var imgViewUp: UIImageView!
    
    @IBOutlet var imgViewLeft: UIImageView!
    @IBOutlet var imgViewRight: UIImageView!
    @IBOutlet var imgViewDown: UIImageView!
    
    let numOfTouchs = 2
    
    var imgUp = [UIImage]()
    var imgDown = [UIImage]()
    var imgLeft = [UIImage]()
    var imgRight = [UIImage]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        imgUp.append(UIImage(named: "arrow-up-black.png")!)
        imgUp.append(UIImage(named: "arrow-up-red.png")!)
        imgUp.append(UIImage(named: "arrow-up-green.png")!)
        
        imgDown.append(UIImage(named: "arrow-down-black.png")!)
        imgDown.append(UIImage(named: "arrow-down-red.png")!)
        imgDown.append(UIImage(named: "arrow-down-green.png")!)
        
        imgLeft.append(UIImage(named: "arrow-left-black.png")!)
        imgLeft.append(UIImage(named: "arrow-left-red.png")!)
        imgLeft.append(UIImage(named: "arrow-left-green.png")!)
        
        imgRight.append(UIImage(named: "arrow-right-black.png")!)
        imgRight.append(UIImage(named: "arrow-right-red.png")!)
        imgRight.append(UIImage(named: "arrow-right-green.png")!)
        
        imgViewUp.image = imgUp[0]
        imgViewDown.image = imgDown[0]
        imgViewLeft.image = imgLeft[0]
        imgViewRight.image = imgRight[0]
        
        // UISwipeGestureRecognizer 선언, Action은 스와이프 제스쳐를 인식했을 때 실행할 메서드
        let swipeUp = UISwipeGestureRecognizer(target: self, action: #selector
                                               (ViewController.respondToSwipeGesture(_:)))
        // 스와이프 제스쳐 방향 설정
        swipeUp.direction = UISwipeGestureRecognizer.Direction.up
        
        // 위쪽 방향으로 설정한 스와이프 제스쳐 등록
        self.view.addGestureRecognizer(swipeUp)
        
        let swipeDown = UISwipeGestureRecognizer(target: self, action: #selector
                                               (ViewController.respondToSwipeGesture(_:)))

        swipeDown.direction = UISwipeGestureRecognizer.Direction.down
        self.view.addGestureRecognizer(swipeDown)
        
        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 swipeUpMulti = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.respondToSwipeGestureMulti(_:)))
        swipeUpMulti.direction = UISwipeGestureRecognizer.Direction.up
        swipeUpMulti.numberOfTouchesRequired = numOfTouchs
        self.view.addGestureRecognizer(swipeUpMulti)
        
        let swipeDownMulti = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.respondToSwipeGestureMulti(_:)))
        swipeDownMulti.direction = UISwipeGestureRecognizer.Direction.down
        swipeDownMulti.numberOfTouchesRequired = numOfTouchs
        self.view.addGestureRecognizer(swipeDownMulti)
        
        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)
}
    
    @objc func respondToSwipeGesture(_ gesture: UIGestureRecognizer) {
        // 만약 제스쳐가 있다면
        if let swipeGesture = gesture as? UISwipeGestureRecognizer {
            imgViewUp.image = imgUp[0]
            imgViewDown.image = imgDown[0]
            imgViewLeft.image = imgLeft[0]
            imgViewRight.image = imgRight[0]
            
            switch swipeGesture.direction {
            case UISwipeGestureRecognizer.Direction.up:
                imgViewUp.image = imgUp[1]
            case UISwipeGestureRecognizer.Direction.down:
                imgViewDown.image = imgDown[1]
            case UISwipeGestureRecognizer.Direction.left:
                imgViewLeft.image = imgLeft[1]
            case UISwipeGestureRecognizer.Direction.right:
                imgViewRight.image = imgRight[1]
            default:
                break
            }
        }
    }
    
    @objc func respondToSwipeGestureMulti(_ gesture: UIGestureRecognizer) {
            if let swipeGesture = gesture as? UISwipeGestureRecognizer {
                imgViewUp.image = imgUp[0]
                imgViewDown.image = imgDown[0]
                imgViewLeft.image = imgLeft[0]
                imgViewRight.image = imgRight[0]
                
                switch swipeGesture.direction {
                case UISwipeGestureRecognizer.Direction.up:
                    imgViewUp.image = imgUp[2]
                case UISwipeGestureRecognizer.Direction.down:
                    imgViewDown.image = imgDown[2]
                case UISwipeGestureRecognizer.Direction.left:
                    imgViewLeft.image = imgLeft[2]
                case UISwipeGestureRecognizer.Direction.right:
                    imgViewRight.image = imgRight[2]
                default:
                    break
                }
            }
        }

}

 

결과를 올리고 싶지만, 시뮬레이터는 멀티 터치를 지원하지 않기 때문에... 따로 올리지는 못한다.

 

 

 

끝!