Swipe Gesture

스와이프 제스처(Swipe Gesture)

• 화면에서 수평 또는 수직 swipe동작을 감지하고, 이를 사용하여 콘텐츠를 탐색(navigation)
• swipe: 손가락으로 화면을 상하좌우로 미는 동작

 

1. 레이아웃 구성 및 아웃렛 변수 추가

상하좌우 네 가지 방향으로 swipe gesture를 보여주기 위해 4개의 image View를 추가한다.

4개의 image View에 대한 아웃렛 변수를 추가한다.

 

2. 변수 생성 및 초기 이미지 설정

상황에 따라 보일 이미지들의 이름을 변수에 저장해 둔다.

viewDidLoad()에서 뷰가 나타날 때 보일 초기 이미지를 설정한다.

 

3. 한 손 Swipe Gesture 설정

setSwipeGesture() 함수를 생성해 viewDidLoad()에서 호출한다.

상하좌우 각 방향에 대한 swipeGestureRecognizer를 생성한 후, 방향을 지정하고 view에 gesture를 추가한다. 

swipeGestureRecognizer의 target은 self로 하고, 해당 gestrure가 실행되었을 때 동작할 action은 respondToSwipeGesture() 함수에 정의한다.

 

respondToSwipeGesture() 함수에서는 모든 이미지 뷰를 다시 초기 이미지로 설정한 후, 현재 발생한 gesture의 방향에 따라 해당 방향의 이미지 뷰의 색을 빨간색 화살표로 바꿔서 표시한다.

 

4. Multi Swipe Gesture 설정

한 손 Swipe Gesture와 유사하게 구현된다.

각 방향에 대한 swipeGestureRecognizer를 생성할 때, numberOfTouchesRequired를 2로 설정한다.  (두 손 Swipe Gesture를 구현하기 때문에)

 

respondToSwipeGestureMulti 함수도 한 손 Swipe Gesture와  동일하게 구현되며, 두 손으로 swipe를 하면 해당 방향의 image View가 초록색 화살표가 표시된다.

 

5. 시뮬레이터 확인

한 손으로 swipe를 할 경우 해당 방향의 화살표가 빨간색으로 표시되며, 두 손으로 swipe 하면 초록색으로 표시된다.

option + shift 키를 눌러 2개의 손가락으로 한 방향으로 swipe 하는 액션을 실행한다.