[iOS] UIPanGestureRecognizer 알아보기 (드로어 구조 만들기)

안녕하세요! 오늘은 UIPanGestureRecognizer에 대해 알아보도록 하겠습니다.

 

PanGesture

먼저 PanGesture란, 

애플 공식 문서

애플 공식 문서에 나와있듯이 화면에서 한손가락 또는 두 손가락 이상으로 스크린위에서 움직일 때 나타납니다. 팬한다는 것은 쉽게 말하면 드래그 하는 것과 같아요. 

손가락으로 쭈욱 드래그

그림을 보면 어떤 액션인지 더 이해가 가죠?

 

그래서 이런 panGesture는 손가락이 드래그 되면서 UIView와 같은 것을 이동시키거나, panGesture에 따라 어떤 액션을 정의하고 싶을 때! 사용합니다.

UIPanGestureRecognizer는 UIGestureRecognizer를 상속 받고 이 외에 여러 gestureRecognizer 종류가 있으니 한번 살펴보세요.

👉UIGestureRecognizer 공식 문서로 이동

 

PanGesture 적용 예시

 

제가 최근에 진행했던 'Weathy' 라는 맞춤 날씨 서비스 프로젝트에서 캘린더뷰를 UIPanGestureRecognizer를 이용해 만들었습니다.

 

위로 드래그하면 접히고 아래로 드래그하면 열리는 드로어 구조!

위 뷰 구조를 간단히 설명 드리자면,

- 바닥에 깔려 있는 뷰컨트롤러에 달력이 그려지는 뷰컨트롤러를 child로 삽입했어요.

- 그리고 UIPanGestureRecognizer를 이용해 드래그 되는 위치에 따라 child로 삽입된 뷰컨트롤러.view의 frame을 계속 업데이트 해주었답니다.

 

코드와 함께 설명

1. UIPanGestureRecognizer 생성 후 달아주기

먼저 UIPanGestureRecognizer 객체를 만들어서 PanGesture가 나타날 뷰에 달아주는 함수를 viewDidLoad에서 호출해주었어요.

그럼 이제 action의 selector로 넘겨준 panGestureHandler라는 함수가 calendarDrawerView에 PanGesture가 나타날때마다 실행됩니다.

 

2. PanGesture가 나타날때 어떤 액션을 할 지 정의

매개변수로 UIPanGestureRecognizer를 받는 @objc 함수를 만들어주세요.

recognizer로 받아온 UIPanGestureRecognizer의 translation이라는 메소드와 velocity라는 메소드를 이용할거예요.

 

translation은 PanGesture의 위치를

velocity는 PanGesture의 속도를 트랙킹하는 메소드입니다.

둘 다 CGPoint를 반환해요.

 

translation에서 아래로 드래그 하면 y값이 양수 위로면 음수 이런식이에요.

velocity도 마찬가지입니다. 방향에 따른 x,y 값의 변화는 한 번 print 찍어보면서 파악하는게 좋을 거 같아요!

 

 

위 코드에서 움직이는 중 주석이 달려있는 else절 부분이 손가락 움직임에 따라 뷰가 따라다니는 부분입니다.

 

원래 뷰의 높이를 height에 저장하고 거기에 translation.y를 더해주어 위로 가면 높이가 줄어들고 아래로 가면 높이가 늘어나도록 했어요!

이때 else절 가장 마지막에 CGPoint.zero로 setTranslation 하는 부분이 있는데,

이 부분이 panGesture에서 가장 중요!!!합니다.

 

저는 제 손가락이 가는대로 따라오는 뷰를 만들고 싶었기 때문에

꼭 panGestureHandler가 호출될 때마다 translation을 초기화해주어야 했어요.

이 과정이 없으면 panGestureRecognizer는 최초에 제스처가 시작된 포인트를 기억하기 때문에 매 호출마다 원점으로 초기화시켜줘야합니다.

 

저와 비슷한 상황의 코드를 짜시는 분들은 setTranslation(CGPoint.zero, in: someView) 없이 실행을 해보시고 

다시 저 문장을 넣고 실행을 해보면 바로 이해가 되실거예요!

 

그리고 저는 recognizer의 state 프로퍼티를 이용해 제스처가 끝난 경우에 뷰가 아예 열리거나 닫히게 했고 아닌 경우는 모두 움직이는 경우로 처리했어요.

 

gestureRecognizer에 제스처를 트랙킹하여 은근히 많은 정보를 담고 있기 때문에 애플 공식 문서를 읽어보면서 어떤 메소드와 프로퍼티가 있는지 살펴보는걸 추천드립니다 :)

 

더 궁금한 점, 틀린 점이 있다면 댓글로 알려주세요!

 

 

 

 

 

참고

developer.apple.com/documentation/uikit/uipangesturerecognizer

Apple Developer Documentation

zeddios.tistory.com/356

iOS ) Gesture Recognizer - Pan