[UITapGestureRecognizer] UIGestureRecognizer 2탄 - Tap Gesture로 키보드 내리기 + 모달창 끄기

예전에 UIPanGestureRecognizer를 다루었던 글을 기억하는가?

[UIPanGestureRecognizer] UIGestureRecognizer 1탄 - 아래로 드래그해서 모달창 dismiss하는 방법

까먹거나 위 글을 아직 보지 않았을 분들을 위해 간단히 복습하고 넘어가자면,

UIPanGestureRecognizer는 UIGestureRecognizer를 상속받아, 사용자가 클릭을 한 상태로 설정해준 일정 거리 이상으로 움직이면 작동될 수 있도록 만들 수 있는 Continuous Gesture였다.
그래서 이 기능을 활용해서 아래로 드래그(Pan)했을 때 모달창을 dismiss하는 카카오톡 프로필 뷰를 만들었었다.

 

1️⃣ UITapGestureRecognizer를 배워보자!

오늘 다루게 될 UITapGestureRecognizer도 역시 너무도 당연하게 마찬가지로 UIGestureRecognizer를 상속받는다.

UITabGestureRecognizer는 말 그대로 사용자의 탭(= 클릭)을 인식하는 클래스이다.

여기서 의미하는 탭(Tap)이란 탭수를 인식하는 numberOfTabsRequired이나, 탭을 하고 있는 손가락 수를 인식할 수 있는 numberOfTouchesRequired 등을 함께 활용해서 인식되는 것을 의미한다.

TapGesture는 Discrete Gesture이기 때문에 제스처가 시작될 때(.Possible)와 끝날 때(.ended)의 상태를 인식한다.

또한, PanGesture일 때와 마찬가지로 location(in:) 메소드를 사용해 제스처의 위치를 얻을 수도 있는데,
이때 여러 번 탭할 경우(multiple taps)에는 첫 번째 탭한 위치를 반환, 여러 개의 터치가 있는 경우(multiple touches)에는 모든 손가락의 중심점(centroid)을 반환해 준다고 설명하고 있다.

그럼 실제로 TapGesture를 활용해서는 두 가지 활용 상황을 설명해보고자 한다.

하나는 아래 왼쪽과 같이 UITextField 이외의 부분을 누르면, 키보드를 내리는 뷰, 또 다른 하나는 모달 창(액션 시트) 이외의 부분을 누르면, 모달 창을 dismiss 시켜주는 뷰를 스토리보드와 코드로 각각 다른 방식대로 만들어보도록 하겠다.

TapGesture를 활용해서 구현할 두 가지의 화면들이다 :)

 

2️⃣ Storyboard 사용 시 : TapGesture로 키보드 내리기

키보드 내려줄 때는 스토리보드에 제스처 인식기를 직접 추가해주는 방법을 사용했다.

Tap Gesture Recognizer를 검색하고, 스토리보드에 넣어주면 아래 오른쪽 사진처럼 새로운 항목이 추가가 된다.

추가한 Tap Gesture Recognizer를 IBAction함수로 연결해서 코드를 써줬다.

화면 전체에 연결되어 있는 제스처 인식기에 사용자의 탭 액션이 들어왔을 때, 현재 편집 모드에 들어가 있는 UITextField나 UITextView를 찾아 편집 모드를 종료시키는 코드를 작성했다. 매우 간단!

// IBAction으로 UITapGestureRecognizer 연결
@IBAction func tapView(_ sender: UITapGestureRecognizer) {
    self.view.endEditing(true)
}

 

3️⃣ Code base 사용 시 : TapGesture로 모달 창 끄기

 

모달 창 끄기는 tapGesture를 코드로 추가해주는 방법을 사용했다.

새로운 ViewController를 모달로 present 할 때, completion 클로저를 부분에 해당 ViewController 배경에 해당하는 곳에 대해 UITapGestureRecognizer를 초기화하고 추가해 줬다(addGestureRecognizer).

초기화한 TapGesture에는 dismissAlertControlelr라는 objc 메서드를 연결해 줬는데, 현재 VC를 dismiss 시키는 로직을 포함했다.

// present와 동시에 GestureRecognizer를 추가
present(presentVC, animated: true) {
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(self.dismissAlertController))        
    presentVC.view.superview?.subviews[0].addGestureRecognizer(tapGesture)
}

// selector 함수 연결
@objc 
func dismissAlertController() {
    self.dismiss(animated: true, completion: nil)
}

결국은 1탄 UIPanGesture와 마찬가지로 추가하고 싶은 제스처 인식기(GestureRecognizer)를 초기화하고 -> 화면에 추가하고 -> Action 메서드와 연결해서, 실제 제스처 동작 중에서 수행하고 싶은 작업을 메서드 부분에 작성하는 것!

모든 제스처(Gesture) 사용 과정이 유사하다는 것을 알 수 있었다.