[iOS] UIPanGestureRecognizer: 뷰를 드래그 하기

UIPanGestureRecognizer

UIPanGestureRecognizer는 GestureRecognizer의 서브클래스 중 하나로 사용자가 화면을 탭 하고 움직이는 동작을 인식하여 처리할 수 있게 해줍니다. UIPanGestureRecognizer의 메서드는 translation(움직임)과 velocity(속도)를 얻어올 수 있도록 합니다. 오늘은 UIPanGestureRecognizer를 통해서 아래 보이는 동그란 원을 다른 위치로 움직일 수 있게 하는 애플리케이션을 간단하게 만들어보겠습니다. 

 

 

UIPanGestureRecognizer 추가하기

스토리보드로 추가하기 

스토리 보드로 추가할 때는 항상 했던 것처럼 스토리보드의 라이브러리를 통해 추가할 수 있습니다. 

라이브러리에서 PanGestureRecognizer를 선택하고, 

 

제스처 인식기를 추가하고자 하는 뷰에 끌어놓으면 인식기가 추가됩니다. 제스처가 잘 인식되는지 확인하기 위해서 하단에 레이블을 하나 추가하고 드래그가 인식되면 상태를 보여주도록 하겠습니다. 

 

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var statusLabel: UILabel!
    @IBOutlet weak var targetCircle: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func panGestureHandler(_ sender: Any) {
        self.statusLabel.text = "Recognized"
    }
}

코드로 추가하기

코드로 추가할 때는 UIPanGestureRecognizer 인스턴스를 생성한 뒤, 원하는 뷰에 추가해줄 수 있습니다. 

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var targetCircle: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(panGestureHandler))
        self.targetCircle.addGestureRecognizer(panGestureRecognizer)
    }
    
    @objc func panGestureHandler(sender: UIPanGestureRecognizer) {
        print("pan gesture recognized")
    }
}

action 인자에는 제스처가 인식되었을 때 실행하고자 하는 동작들을 메서드로 정의해주면 되는데요, 스토리 보드에서 추가했을 때의 IBAction과 동일합니다. 위처럼 코드를 작성하고 실행해보면 다음과 같이 원하는 영역을 드래그했을 때만 제스처 인식이 동일하게 잘 동작하는 것을 확인할 수 있습니다.

 

UIPanGestureRecognizer가 알려주는 정보 1: 상태

UIPanGesutreRecognizer는 다른 GestureRecognizer들처럼 사용자의 제스처 상태를 알려줍니다. GestureRecognizer의 상태에 대한 이야기는 다른 포스트에서 더 자세히 다루도록 하겠습니다.

 

UIPanGestureRecognizer에서 우리가 주목해야 할 상태는 Began, Changed, Ended입니다. Began은 제스처 인식기가 사용자의 제스처를 인식하여 드래그가 시작했음을 의미하고, Changed는 드래그가 계속되어 위치가 변화됨을, 그리고 Ended는 사용자의 의도대로(의도하지 않은 경우도 있습니다. 알림이 뜬다던지, 전화가 온다던지..) 손가락을 화면에서 떼어서 드래깅이 종료되었음을 의미합니다. 

 

그럼 하단 레이블에 상태가 나타나도록 해볼까요?

    @IBAction func panGestureHandler(_ sender: UIPanGestureRecognizer) {
        switch sender.state {
        case .possible:
            self.statusLabel.text = "Possible"
        case .began:
            self.statusLabel.text = "Began"
        case .changed:
            self.statusLabel.text = "Changed"
        case .cancelled:
            self.statusLabel.text = "Cancelled"
        case .ended:
            self.statusLabel.text = "Ended"
        case .failed:
            self.statusLabel.text = "Failed"
        }
    }

이렇게 제스처 인식기가 동작할 때마다 각 상태를 레이블에 나타내도록 코드를 작성하고 실행하면

 

빠르게 Begin을 거쳐 Changed 가 되었다가 드래그를 중단하면 Ended 가 되는 것을 확인할 수 있습니다.

 

만약 제스처가 처음 인식되었을 때 어떤 작업을 하고 싶다면 Began 상태에 해당 로직을 작성하고, 제스처가 끝났을 때 어떤 작업을 지정하고 싶다면 Ended 상태에 로직을 작성하면 됩니다. 

 

UIPanGestureRecognizer가 알려주는 정보 2: Translation 

도입부에서 설명했던 것처럼 UIPanGestureRecognizer는 Translation 메서드를 제공합니다.

translation(in:)
Interprets the pan gesture in the coordinate system of the specified view.

Declaration
func translation(in view: UIView?) -> CGPoint

Parameters
view
The view in whose coordinate system the translation of the pan gesture should be computed. If you want to adjust a view's location to keep it under the user's finger, request the translation in that view's superview's coordinate system.

Return Value
A point identifying the new location of a view in the coordinate system of its designated superview.

공식 문서의 설명을 보면 이해하기가 쉬운데요, 인자로 전달되는 뷰의 좌표계에 따라서 처음 제스처가 인식되었을 때부터 얼마나 좌표가 이동되었는지를 반환해줍니다. 우리는 동그라미 뷰에 제스처를 달았으니 그 상위 뷰를 인자로 넘겨서 좌표를 얻게 해야 합니다. 

 

이것도 하단 레이블에 표시해서 변화를 확인할 수 있도록 해볼게요. 

@IBAction func panGestureHandler(_ sender: UIPanGestureRecognizer) {
    self.statusLabel.text = "\(sender.translation(in: self.view).x.rounded()) \(sender.translation(in: self.view).y.rounded())"
}

소수점이 나오면 보기가 너무 어려울 것 같아서 translation의 결과로 반환된 좌표의 X와 Y를 반올림해서 레이블에 표시하도록 해봤습니다. 

 

이렇게 드래그하면서 이동한 좌표가 처음 드래그를 시작한 지점으로부터 얼마나 떨어져 있는지 알 수 있습니다. 우리는 원을 이동시키고자 하니까 이 좌표를 사용해서 원을 계속 움직여주면 될 것 같네요. 이걸 코드로 작성하면 아래처럼 작성할 수 있겠습니다!

@IBAction func panGestureHandler(_ sender: UIPanGestureRecognizer) {
        let translation = sender.translation(in: self.view)
        self.targetCircle.center.x += translation.x
        self.targetCircle.center.y += translation.y
}

실행해볼까요?

 

터치를 움직이는대로 뷰가 이동할 것을 기대했지만, 실제로는 그렇지 않았습니다.. 바로 코드에서 마지막 한 줄을 작성하지 않았기 때문이죠. 우리는 setTranslation() 메서드의 호출을 마지막에 추가해주어야 합니다.

    @IBAction func panGestureHandler(_ sender: UIPanGestureRecognizer) {
        let translation = sender.translation(in: self.view)
        self.targetCircle.center.x += translation.x
        self.targetCircle.center.y += translation.y
        sender.setTranslation(CGPoint.zero, in: targetCircle)
    }

이렇게 한 줄을 추가하고 다시 실행해보면!

 

원하는 대로 잘 동작하는 것을 확인할 수 있습니다! 그럼 setTranslation이 어떤 역할을 해주는 걸까요? 애플 문서에도 명쾌한 해답이 나오지 않아서 구글링을 하던 중에 스택오버플로우의 좋은 답변을 발견했습니다.

 

https://stackoverflow.com/questions/29558622/pan-gesture-why-need-settranslation-to-zero

Pan gesture: why need setTranslation to zero?

 

답변의 핵심적인 내용은 "UIPanGestureRecognizer는 뷰가 이동했다는 것을 알지 못한다"입니다. 위에서 translation 메서드가 드래그가 처음 시작된 지점으로부터의 이동좌표를 반환한다고 설명했습니다. 하지만 우리는 뷰를 이동시켰기 때문에 드래그가 처음 시작된 지점의 좌표는 더 이상 뷰의 좌표가 아닙니다. UIPanGestureRecognizer는 이 사실을 알지 못하고 계속해서 해당 지점으로부터의 거리를 계산하기 때문에 뷰가 이상한 위치로 이동했던 것이었습니다.

 

따라서 마지막에 setTranslation 메서드를 호출해서 translation 메서드가 계산할 기준 좌표를 현재 뷰의 좌표로 변경해주는 것으로 드래그의 시작점을 계속해서 업데이트해주어야 우리가 원하는 드래그의 동작이 수행되었던 것이죠.

 

UIPanGestureRecognizer가 알려주는 정보 2: Velocity

마지막으로 velocity에 대해서 알아보도록 하겠습니다! velocity() 메서드를 실행하면, 그 반환 값으로는 속도를 얻게 됩니다. 여기서 속도는 "points per second"로 표현된다고 공식문서에 나와있네요. 초 당 움직임을 의미합니다! 속도 값은 horizontal, vertical로 분리되어서 얻을 수 있고 이를 표현하기 위해 x, y 좌표계를 사용하는 CGPoint를 반환하는 것이죠!

 

이 값을 이용해서 우리는 어떤 걸 알 수 있을까요? 바로 방향입니다!  x, y의 음/양에 따라 우리는 방향을 알 수 있게 됩니다. 그럼 테스트해보겠습니다!

        let velocity = sender.velocity(in: self.targetCircle)
        let x = velocity.x
        let y = velocity.y
        
        switch (x, y) {
        case _ where x == 0.0 && y < 0.0:
            self.statusLabel.text = "⬆️"
        case _ where x > 0.0 && y < 0.0:
            self.statusLabel.text = "↗️"
        case _ where x > 0.0 && y == 0.0:
            self.statusLabel.text = "➡️"
        case _ where x > 0.0 && y > 0.0:
            self.statusLabel.text = "↘️"
        case _ where x == 0.0 && y > 0.0:
            self.statusLabel.text = "⬇️"
        case _ where x < 0.0 && y > 0.0:
            self.statusLabel.text = "↙️"
        case _ where x < 0.0 && y == 0.0:
            self.statusLabel.text = "⬅️"
        case _ where x < 0.0 && y < 0.0:
            self.statusLabel.text = "↖️"
        default:
            self.statusLabel.text = "방향은?"
        }

총 8 방향을 정의했습니다. x 축은 오른쪽으로 이동할 때 양수, 왼쪽으로 이동할 때 음수가 되고, y축은 위로 이동할 때 음수, 아래로 이동할 때 양수가 됨을 이용하면 대각선까지 모두 8개의 방향을 정의할 수 있습니다.

 

방향이 잘 확인되네요~! 이렇게 방향을 확인하는 용도로 Velocity를 사용하면 됩니다!

 

 

전체 예제 코드 

@IBAction func panGestureHandler(_ sender: UIPanGestureRecognizer) {
        
        // 상태 확인
        switch sender.state {
        case .began:
            print("Began")
        case .changed:
            print("Changed")
        case .ended:
            print("Ended")
        default:
            break
        }
        
        // 뷰 이동
        let translation = sender.translation(in: self.view)
        self.targetCircle.center.x += translation.x
        self.targetCircle.center.y += translation.y
            
        // 방향 확인
        let velocity = sender.velocity(in: self.targetCircle)
        let x = velocity.x
        let y = velocity.y
        
        switch (x, y) {
        case _ where x == 0.0 && y < 0.0:
            self.statusLabel.text = "⬆️"
        case _ where x > 0.0 && y < 0.0:
            self.statusLabel.text = "↗️"
        case _ where x > 0.0 && y == 0.0:
            self.statusLabel.text = "➡️"
        case _ where x > 0.0 && y > 0.0:
            self.statusLabel.text = "↘️"
        case _ where x == 0.0 && y > 0.0:
            self.statusLabel.text = "⬇️"
        case _ where x < 0.0 && y > 0.0:
            self.statusLabel.text = "↙️"
        case _ where x < 0.0 && y == 0.0:
            self.statusLabel.text = "⬅️"
        case _ where x < 0.0 && y < 0.0:
            self.statusLabel.text = "↖️"
        default:
            self.statusLabel.text = "방향은?"
        }
        
        sender.setTranslation(CGPoint.zero, in: targetCircle)
    }

 

여기까지 UIPanGesture의 기본적인 사용방법들을 정리해보았습니다! 잘못된 내용이 있거나 교정이 필요한 내용이 있다면 댓글 주세요 오늘도 읽어주셔서 감사합니다🍎