[iOS] UITapGestureRecognizer: 화면 탭 동작 인식하기

UITapGestureRecognizer 

오늘은 GestureRecognizer의 서브클래스 중 하나인 UITapGesture를 사용해서 탭 동작을 인식하는 작업을 해보겠습니다. 오늘의 목표는 아래 애플리케이션에 UITapGestureRecognizer를 추가해서 어떤 요소가 탭 되었는지 표시해주는 것입니다.

스토리보드로 추가하기

TapGestureRecognizer는 스토리보드로 추가할 수도 있고, 코드로 추가할 수도 있습니다. 먼저 간편하게 스토리보드로 작업을 해보겠습니다.

라이브러리에서 Tap Gesture Recognizer를 선택해서 추가해줍니다.

정상적으로 추가가 되었다면 왼쪽에 Tap Gesture Recognizer가 추가됩니다.

오른쪽 인스펙터를 보면 Taps와 Touches의 정도를 조절할 수 있습니다. Taps는 뷰가 몇 번 터치 되어야 제스처가 인식할지를 정하고, Touches는 몇 개의 손가락으로 터치해야 인식하게 할지를 정합니다.

 

이제 본격적으로 사용하기 위해서 IBAction을 추가해주겠습니다. 

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func viewDidTap(_ sender: UITapGestureRecognizer) {
        print("touched")
    }
}

Tap Gesture Recognizer가 추가된 뷰에 정해진 조건에 따라 제스처가 인식되면, IBAction 메서드가 호출됩니다. 제스처가 잘 인식되는지 확인해보기 위해서 제스처가 인식될 때마다 하단 UILabel에 터치가 되었음을 알리는 텍스트를 보이도록 해보겠습니다.

잘 동작합니다! 이제 이 애플리케이션의 목표대로 화면의 뷰 중 어떤 뷰가 선택되었는지를 알아내야하는데요, 각 레이블에 모두 탭 제스처를 추가해주는 방법도 있지만 hitTest 메서드를 소개할 겸 hitTest()를 이용해보도록 하겠습니다.

 

hitTest(_:with:)

💡 Returns the farthest descendant of the receiver in the view hierarchy (including itself) that contains a specified point.

 

hitTest 메서드는 어떤 좌표가 전달되었을 때 해당 좌표를 포함하는 최상단(사용자와 가장 가까운)에 위치한 뷰를 반환하는 메서드입니다. UITapGesture는 location 프로퍼티를 통해 이벤트가 발생했을 때의 좌표가 전달되기 때문에, 이 좌표를 hitTest 해서 그 결과를 이용하도록 하겠습니다.

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var resultLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func viewDidTap(_ sender: UITapGestureRecognizer) {
        resultLabel.text = (self.view.hitTest(sender.location(in: self.view), with: nil) as? UILabel)?.text ?? "NONE"
        resultLabel.sizeToFit()
    }
}

IBAction에서 전달되는 좌표를 기준으로 hitTest를 수행하고, 반환된 뷰가 UIView라면 텍스트를 하단의 UILabel의 텍스트로 설정해주도록 코드를 작성했습니다. 그럼 이제 테스트해볼까요?

 

잘 동작하네요! 이렇게 스토리보드를 통해 Tap Gesture Recognizer를 원하는 뷰에 추가하고 IBAction을 정의해 원하는 로직을 수행할 수 있습니다.

코드로 추가하기

스토리보드에서 추가했던 Tap Gesture Recognizer를 삭제하고 다시 작성해보겠습니다. TapGestureRecognizer를 사용하기위해서는 UIGestureRecognizerDelegate를 채택해야합니다. 제스처에 대한 처리를 뷰 컨트롤러에서 위임받아 정의하기 위해서입니다.

extension ViewController: UIGestureRecognizerDelegate {
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
        return true
    }
}

class ViewController: UIViewController {
    @IBOutlet weak var resultLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let tapGestureRecognizer = UITapGestureRecognizer()
        tapGestureRecognizer.delegate = self
        self.view.addGestureRecognizer(tapGestureRecognizer)
    }
}

그리고 viewDidLoad에 Tap Gesture Recognizer를 추가해주는 작업을 설정합니다.

 

이제 프로토콜을 UITapGestureRecognizer의 gestureRecognizer 메서드에 정의해주면 됩니다. 스토리보드에서 정의했던 IBAction의 로직을 그대로 옮겨오면 되겠죠? 이번에는 sender라는 인자가 없지만 touch 인자를 통해 location을 알아낼 수 있습니다.

extension ViewController: UIGestureRecognizerDelegate {
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
        resultLabel.text = (self.view.hitTest(touch.location(in: self.view), with: nil) as? UILabel)?.text ?? "NONE"
        resultLabel.sizeToFit()
        return true
    }
}

그럼 같은 결과가 나오는지 테스트해보죠!

스토리보드로 추가했을 때와 마찬가지로 잘 동작하는 것을 확인할 수 있습니다.

 

이번 포스트에서는 탭 이벤트를 인식하는 UITapGestureRecognizer를 스토리보드로, 코드로 추가해보았습니다. 탭은 애플리케이션을 사용하면서 사용자가 가장 많이 하는 동작이니 어디서든 유용하게 사용할 수 있을 것 같습니다!