Tap&Drag Gesture in SwiftUI

안녕하세요. 그린입니다🟢

이번 포스팅에서는 SwiftUI 환경에서 Tap과 Drag 제스쳐에 대해 간단히 학습해보겠습다🙋🏻

오늘 포스팅은 정말 정말 정말 간단해요!

너무 간단해서 시시할수도 있습니다🤭

 

자 일단 오늘 해볼것은 도지를 하늘로 솟아오르는 로켓처럼 강제로 꼭대기로 가져다 놓아볼께요🚀

여기서 해볼것은 탭과 드래그 제스쳐입니다.

우선 탭이 되었을때 이미지를 토글해줄겁니다.

그리고 강제로 도지를 끌기위해 드래그를 통해 도지의 위치를 실시간으로 변경해줄것이고 드래그 되는 동안에는 로켓으로 변경해줄겁니다.

 

그럼 먼저 시연영상을 보시죠!

 

시연영상

하늘로 날아간 도지

간단하고도 염원이 담겨있습니다🙏🏻

 

그럼 바로 복잡할것 없는 코드를 보시죠!

 

전체 소스코드

import SwiftUI

struct HangOnDogeView: View {
  @State private var dragLocation: CGPoint?
  @State private var isChangedImage: Bool = true
  private var image: String {
    isChangedImage ? "Doge" : "Rocket"
  }
  
  var body: some View {
    GeometryReader { geo in
      Image(image)
        .frame(width: 50, height: 50)
        .position(
          self.dragLocation ?? CGPoint(
            x: 100,
            y: geo.size.height - 100
          )
        )
        .gesture(
          TapGesture()
            .onEnded({
              isChangedImage.toggle()
            })
        )
        .highPriorityGesture(
          DragGesture()
            .onChanged ({
              self.dragLocation = $0.location
              isChangedImage.toggle()
            })
            .onEnded({ _ in
              isChangedImage.toggle()
            })
        )
    }
  }
}

우선 도지와 로켓은 이미지입니다.

dragLocation 변수를 통해 현재 드래그되고 있는 위치를 받아오도록 선언합니다.

isChangedImage 변수를 통해 이미지를 교체해줄 수 있습니다.

body의 구현을 보면 GeometryReader로 기기 뷰 사이즈를 측정해줍니다.

이미지를 적절히 넣고 포지션은 위에 선언된 dragLocation으로 주되 초기 값은 적당히 왼쪽하단으로 맞춰줍니다.

그러면 최초 앱 실행때는 저 위치에 가있겠네요(바닥...)

그리고 2개의 제스쳐를 구현해줍니다.

 

1. TapGesture

탭이 되었을때 어떤 행동을 해줄지 정의해줍니다.

탭 제스쳐에는 onChanged가 없습니다. 왜냐면 변경되고 있는 상태가 없으니까요.

그래서 탭이 되었다라는 완료 개념의 onEnded 메서드가 있습니다.

해당 메서드를 통해 탭이 되면 이미지를 토글하게 구현해줍니다.

요 제스쳐는 gesture라는 view의 메서드를 통해 넣어줍니다.

 

2. DragGesture

드래그될때 도지의 위치를 변경해주고 로켓으로 날아가게하기위해 onChanged 메서드를 사용합니다.

이 메서드는 1포인트라도 움직이면 계속 연속적으로 불립니다.

즉 드래그 되는 동안 계속 불리고 있기에 실시간으로 리 포지셔닝을 해줄 수 있습니다.

실시간이기에 이미지는 토글이 아닌 false로 넣어줍니다.

만약 toggle로 해주면 아래와 같은 아름다운 효과를 볼 수가 있어요😂

아주 활활 타오르는 불나방 같네요.

움짤로 저장해서 그렇지만 실제로 돌려보면 정말 싸이키 조명같아요!

다음으로 드래그가 끝나면 onEnded 메서드를 사용하여 로켓을 다시 도지로 돌려놓아주도록 이미지를 토글해줍니다.

탭보다 드래그가 우선시 되게 highPriorityGesture에 구현해줍니다.

 

이렇게 되면 원하는 구현을 이룰 수 있었습니다!

 

마무리

그냥 딱히 학습보다는 제스처를 하다보니 간단한거 재밌는거 해보고 싶어서.. 해봤는데 역시 재밌었습니다.

이번에는 간단해서 딱히 참고자료는 없었습니다!

도지 날아가즈아~~🚀🚀🚀