티스토리 뷰

iOS

iOS ) Gesture Recognizer - Swipe

Zedd0202 2017. 12. 19. 14:42
반응형

오...이제 Swipe!!

Swipe는 다들 아시죠? 우리가 뒤로가기 할때나 그럴때 언제나 Swipe Gesture를 사용하고 있답니다.  

자..그러면 한번 써볼까요?

역시나!!! Handling Swipe Gestures를 참고하도록 할게요. 


Gesture Recognizer - Swipe



Swipe Gesture를 모르는 분들은 없을거라고 생각합니다.


이것이 바로 Swipe...

Swipe Gesture의 정의를 살펴볼까요?

"화면에서 수평 또는 수직 swipe동작을 감지하고, 이를 사용하여 컨텐츠를 탐색(navigation)합니다"

라고 하네요. 설명을 좀 더 봅시다.

UISwipeGestureRecognizer객체는 화면에서 사용자의 가로(horizontally) 또는 세로(vertically) 손가락 움직임을 추적합니다. 

Gesture는 사용자의 손가락이 특정 방향으로 움직이고, 주 이동방향에서 크게 벗어나지 않도록 요구합니다. 

Swipe Gesture는 개별적이므로 동작actionGesture가 성공적으로 끝난 후에만 호출됩니다. 결과적으로 Swipe는 Gesture결과에만 관심이 있고, 사용자의 손가락 움직임을 추적하지 않을 때 가장 적합합니다. 

Note 

Swipe는 분리되어 있기 때문에, flicks 또는 빨리감기 동작에만 사용해야합니다. interactive transitions과 같은 interactive gestures는 Swipe가 아닙니다.

 gestures사용방법에 대한 자세한 내용은 HIG > iOS > User Interaction > Gestures를 참고하십시오.


자..빨리감기 동작은 알겠는데..flicks이 뭘까요?


이것 같네요. 

 HIG > iOS > User Interaction > Gestures에 Swipe는 뭐라고 나와있을까요?


한 손가락으로 수행할 경우, 이전화면으로 돌아가거나, split view controller에서 숨겨진  View를 표시하거나, table-view row에서 삭제 버튼을 표시하거나, peek action을 표시합니다. iPad에서 네 손가락으로 수행할 때는 app들을 전환합니다. 

음..그렇군요. HIG가 하라는대로 해야겠죠?ㅎㅎ... Gesture에 대한 HIG를 번역하긴했는데..참고하고싶으신 분들은 <Human Interface Guidelines > Gestures>를 봐주세요 :)

자..그럼 그냥 간단한 예제를 준비했는데요. 이게 HIG에 맞는지는 잘 모르겠습니다..




간단하게 예제를 만드느라 이렇게 했는데, 탭바의 View가 TableView라면 이런 Swipe Action은 따로 더 추가하지 않는 것이 좋을 것 같아요. TableView Action과 헷갈릴 수 있으니까요.

프로젝트로 Single View Application으로 해서 탭바 추가해도 되긴 하는데, 



Tabbed App을 선택하시면 조금 더 편하게 할 수 있습니다. 

그리고 2개의 View에 Swipe Gesture Recognizer를 추가해주세요. IBOutlet과 IBAction도 빼놓지 마세요 :) FirstViewController, SecondViewController 둘 다에요!

그럼 먼저 FirstViewController의 Swipe Gesture IBAction을 먼저 봅시다. 


  1. @IBAction func swipeAction(_ sender: Any) {

            //code

    }


자..여기서 어떻게 해야할지 생각해봅시다.

그 전에 Swipe의 "방향"에 대해서 생각해봅시다

Swipe는 단순히 좌, 우로 Swipe하는 거 말고도 Up, Down을 포함한 Gesture에요. 

그럼 Up Gesture는 뭘까요? 

너무 당연하죠? Down은 손가락을 밑으로 Swipe하는 걸거에요.

그럼 Left는? 손가락을 "왼쪽"으로 하는거고, Right는 손가락을 "오른쪽"으로 Swipe하는거에요. 

너무 당연한데 굳이 말씀드리는 이유는..헷갈릴까봐 ㅎ

그러니까 하고싶은 말은 우리는 왼쪽에있는 FirstView에서 Swipe해서 오른쪽의 SecondView로 갈거에요.

오른쪽으로 갈꺼니까!!!!!!! 오른쪽 이게 아니라, 손가락의 방향이 "왼쪽"을 향해서 Swipe해야 오른쪽으로 가겠죠?

그러니까!!


  1. @IBAction func swipeAction(_ sender: Any) {

         

    }


여기서 할 일은 

만약 내가 "왼쪽"으로 Swipe하면, SecondView를 보여줘.

이게되겠죠? 



  1. @IBAction func swipeAction(_ sender: Any) {

            if swipeRecognizer.direction == .left{

                tabBarController?.selectedIndex = 1

            }

    }

Perform segue로 하는 방법도 있겠지만, 간단하게 탭바의 selectedIndex를 바꿔주었어요.

swipeRecognizer는 아까 우리가 만들어주었던 Swipe Gesture Recognizer의 IBOutlet입니다.

자..일단 실행해볼까요? 

그럼 우리 생각대로 SecondView가 나와야할 것 같지만 아무런 반응도 하지 않습니다.

그 이유는!!!


Swipe Gesture Recognizer의 direction은 default가 right입니다!!! 그러니까 left는 특정한 작업을 해주지 않으면 먹지 않습니다. 

viewDidLoad로 가셔서,



  1.  override func viewDidLoad() {

            super.viewDidLoad()

            swipeRecognizer.direction = .left

    }


위 코드를 추가해주세요 :)

그러고 실행하면 이제, SecondView로 잘 넘어가는 것을 볼 수 있습니다.

이 뜻은 다시말하면, 오른쪽이 아닌 다른 방향의 Swipe Gesture를 수행할경우, ㅇ이렇게 꼭 지정을 해줘야 한다는 것이죠.


자..아무튼 이제 SecondViewController로 가봅시다. 

Swipe Gesture Recognizer의 direction은 default가 right이라고 그랬죠? 그럼 여기서는 따로 위처럼 방향을 set해줄 필요는 없겠네요. 


  1.  @IBAction func swipeAction(_ sender: Any) {

            if swipeRecognizer.direction == .right{

                tabBarController?.selectedIndex = 0

            }

     }


이렇게만해주면!!! 된답니다. 간단하죠? 


  1. override func viewDidLoad() {

            super.viewDidLoad()

            let swipeRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(swipeAction(_:)))

            swipeRecognizer.direction = .left

            self.view.addGestureRecognizer(swipeRecognizer)

        }


    @objc func swipeAction(_ sender :UISwipeGestureRecognizer){

            if sender.direction == .left{

                tabBarController?.selectedIndex = 1

            }

      }


코드로 Swipe Gesture Recognizer는 이런식으로 하시면 됩니다. 


Swipe도 별거없죠? 

그리고 주의하셔야 할것!


여기서도 말하듯이,  동일한 동작 (예 : UITableView swipe delete)이 발생하면 여러 방향이 지정 될 수 있습니다. 라고 하죠? 주의합시다. 

도움이 되었으면 좋겠네요.


반응형