[SwiftUI] DragGesture

DragGesture()
    .updating($translation){ value, state, _ in
        print("👀state (현재 상태) ", state, " 👀value.translation.height (업데이트 된 상태)", value.translation.height)
        state = translation
    }
}

DragGesture는 드래그 이벤트 시퀀스가 변경될 때 액션을 호출하는 드래그 모션이다.

뷰에서 드래그 제스처를 인식하려면 제스처를 만들고 구성한 다음, gesture(_:including:) 모디파이어를 사용해서 뷰에 추가한다.

 

다음은 원에 드래그 제스처를 추가하고, 사용자가 드래그 제스처를 수행하는 동안 원의 색상을 변경하는 코드다.

struct DragGestureView: View {
    @State private var isDragging = false

    var drag: some Gesture {
        DragGesture()
            .onChanged { _ in self.isDragging = true }
            .onEnded { _ in self.isDragging = false }
    }

    var body: some View {
        Circle()
            .fill(self.isDragging ? Color.red : Color.blue)
            .frame(width: 100, height: 100, alignment: .center)
            .gesture(drag)
    }
}

init(minimumDistance: CGFloat, coordinateSpace: CoordinateSpace)

제스처가 성공하기까지 최소 드래그 거리와 제스처 위치의 좌표 공간을 사용해서 드래그 제스처를 생성한다.

minimumDistance는 제스처가 성공하기 전의 최소 드래그 거리, coordinateSpace는 위치 값을 수신할 좌표 공간이다.

updating(_:body:)

제스처의 값이 변경되면 제공된 제스처 상태 (state) 프로퍼티를 업데이트한다.

func updating<State>(
    _ state: GestureState<State>,
    body: @escaping (Self.Value, inout State, inout Transaction) -> Void
) -> GestureStateGesture<Self, State>

state는 뷰의 GestureState 프로퍼티에 대한 바인딩이고, body는 gesture의 값이 변경될 때 SwiftUI가 호출하는 콜백이다.

body의 클로저 타입은 (Self.Value, inout State, inout Transaction) -> Void이다.

여기서 Self.Value는 currentState 매개변수로, 제스처의 업데이트된 상태를 의미한다.

inout State는 gestureState 매개변수로, 제스처의 이전 상태를 의미한다.

inout Transaction은 transaction을 의미하고, 제스처의 컨텍스트를 의미한다.

 

이 메서드는 기존의 제스처 값이 변경되면 제스처의 상태를 업데이트한다.

또는 사용자나 시스템이 제스처를 종료하거나 취소하면 제스처 값을 초기값으로 재설정한다.

 

예를 들어 사용자가 다음과 같이 화면에 아주 짧은 시간 동안 위에서 아래로 손가락을 터치하는 액션을 취한다고 가정하자.

코드는 다음과 같이 작성했다.

DragGesture()
    .updating($translation) { currentState, gestureState, _ in
        print("👀gestureState (이전 상태)", gestureState, " 👀currentState (업데이트된 상태)", currentState.translation.height)
        gestureState = currentState.translation.height // 상태 업데이트
    }
}

 

이 때 updating(_:body:) 메서드 내부에서는 다음과 같은 일이 일어난다.

최초 state는 0.0이고, 사용자가 제스처를 취하자 상태가 업데이트되어서 currentState가 업데이트된다. 

그리고 이전 상태를 새로운 상태로 업데이트해주기 때문에 gestureState는 currentState로 업데이트된다.

이어서 또 currentState가 업데이트되므로 gestureState 또한 새로운 값으로 업데이트된다.

 

Respond to gesture callbacks

제스처 모디파이어에 추가한 콜백에 따라, 제스처의 state가 변경될 때마다 SwiftUI가 코드에 다시 보고를 한다. 제스처 모디파이어는 업데이트를 수신하기 위해 3가지 방법을 제공한다: update(_:body:), onChanged(_:), onEnded(_:)

Update transient UI state (일시적인 UI 상태 업데이트)

제스처가 변경될 때 뷰를 업데이트하려면, 뷰에 GestureState 프로퍼티를 추가하고 update(_:body:) 콜백에서 업데이트한다. SwiftUI는 제스처를 인식하는 즉시, 그리고 제스처의 값이 변경될 때마다 업데이트 콜백을 호출한다.

예를 들어 SwiftUI는 magnification 제스처가 시작되자마자 업데이트 콜백을 호출하고, 다음 magnification 값이 변경될 때마다 다시 업데이트 콜백을 호출한다. 사용자가 제스처를 종료하거나 취소할 때에는 업데이트 콜백을 호출하지 않는다. 대신, GestureState 프로퍼티가 자동으로 state 값을 초기값으로 재설정한다.

예를 들어 사용자가 길게 누르는 동안 색상이 변경되는 뷰를 만들기 위해서는 GestureState 프로퍼티를 추가하고 업데이트 콜백에서 업데이트하면 된다.

struct CounterView: View {
    @GestureState private var isDetectingLongPress = false

    var body: some View {
        let press = LongPressGesture(minimumDuration: 1)
            .updating($isDetectingLongPress) { currentState, gestureState, transaction in
                                // gestureState를 새로운 값으로 업데이트
                gestureState = currentState 
            }

        return Circle()
            .fill(isDetectingLongPress ? Color.yellow : Color.green)
            .frame(width: 100, height: 100, alignment: .center)
            .gesture(press)
    }
}

Update permanent state during a gesture (영구적인 UI 상태 업데이트)

제스처가 종료되어도 재설정되지 않는 제스처의 변경 사항을 추적하려면, onChanged(_:) 콜백을 사용한다.

예를 들어, 앱에서 길게 누르는 동작을 인식하는 횟수를 계산하려면 onChanged(_:) 콜백을 추가하고 카운터를 증가시키면 된다.

struct CounterView: View {
    @GestureState private var isDetectingLongPress = false
    @State private var totalNumberOfTaps = 0

    var body: some View {
        let press = LongPressGesture(minimumDuration: 1)
            .updating($isDetectingLongPress) { currentState, gestureState, transaction in
                gestureState = currentState
            }.onChanged { _ in
                self.totalNumberOfTaps += 1
            }

        return VStack {
            Text("\(totalNumberOfTaps)")
                .font(.largeTitle)

            Circle()
                .fill(isDetectingLongPress ? Color.yellow : Color.green)
                .frame(width: 100, height: 100, alignment: .center)
                .gesture(press)
        }
    }
}

Update permanent state when a gesture ends (제스처가 종료될 때 영구적으로 상태 업데이트)

제스처가 성공적으로 완료된 시점을 인지하고 제스처의 최종값을 받으려면, onEnded(_:) 함수를 사용하여 콜백에서 앱의 상태를 업데이트한다. SwiftUI는 제스처가 성공할 때만 onEnded(_:) 콜백을 호출한다.

예를 들어, LongPressGesture 도중에 사용자가 minimumDuration 초가 경과하기 전에 뷰 터치를 멈추거나, maximumDistance보다 더 많이 손가락을 움직이면, SwiftUI는 onEnded(_:) 콜백을 호출하지 않는다. 즉, minimumDuration 초를 넘어서 뷰 터치를 진행하고, maximumDistance를 넘어서 손가락을 움직이지 않는 경우에만 onEnded(_:) 콜백을 호출한다.

예를 들어 사용자가 long press를 완료한 후 long press 시도 횟수 계산을 중지하려면, onEnded(_:) 콜백을 추가하고 제스처 모디파이어를 조건부로 추가하면 된다.

struct CounterView: View {
    @GestureState private var isDetectingLongPress = false
    @State private var totalNumberOfTaps = 0
    @State private var doneCounting = false

    var body: some View {
        let press = LongPressGesture(minimumDuration: 1)
            .updating($isDetectingLongPress) { currentState, gestureState, transaction in
                gestureState = currentState
            }.onChanged { _ in
                self.totalNumberOfTaps += 1
            }
            .onEnded { _ in
                self.doneCounting = true
            }

        return VStack {
            Text("\(totalNumberOfTaps)")
                .font(.largeTitle)

            Circle()
                .fill(doneCounting ? Color.red : isDetectingLongPress ? Color.yellow : Color.green)
                .frame(width: 100, height: 100, alignment: .center)
                .gesture(doneCounting ? nil : press)
        }
    }
}

 

https://developer.apple.com/documentation/swiftui/draggesture

Adding interactivity with gestures | Apple Developer Documentation