.simultaneousGesture() to handle multiple gestures on a single view (한 뷰에서 멀티 제스쳐 하기!!!)

안녕하세요~

 

오늘은 간단하게 한 뷰에서 두가지 제스쳐를 받아서 따로 처리하는 방법을 살펴 보려고 합니다.

 

동일한 뷰에서 두가지 제스쳐를 받기 위해서는 .simultaneousGesture()를 사용하면 간편하게 적용을 하실 수 있습니다.

 

우선 간단하게 어떤 뷰에서 제스쳐를 받을 때 다음과 같이 사용을 하면됩니다.

struct SimpleGestureExample: View {
    
    @State private var isDoubleTapped: Bool = false
    
    var body: some View {
        Circle()
            .fill(isDoubleTapped ? .blue : .red)
            .frame(width: 200, height: 200)
            .gesture(
                TapGesture()
                    .onEnded {
                        isDoubleTapped.toggle()
                    }
            )
    }
}

위 코드는 원을 탭 하면 TapGesture() 이벤트가 발생을 하면서 원의 색이 변경됩니다.

 

이 원에 롱 클릭 제스쳐를 받위 위해서 아래와 같이 .gesture()를 추가 했습니다.

struct SimpleGestureExample: View {
    
    @State private var isDoubleTapped: Bool = false
    @State private var isLongTapped: Bool = false
    
    var body: some View {
        Circle()
            .fill(isDoubleTapped ? .blue : .red)
            .frame(width: isLongTapped ? 100 : 200, height: isLongTapped ? 100 : 200)
            .gesture(
                LongPressGesture()
                    .onEnded { _ in
                        isLongTapped.toggle()
                    }
            )
            .gesture(
                TapGesture()
                    .onEnded {
                        isDoubleTapped.toggle()
                    }
            )
    }
}

위 코드 내용을 확인하시면 롱 클릭은 동작을하나 탭 쳐스쳐는 동작을 하지 않는 것을 볼 수 있습니다.

 

이렇게 한 뷰에 여러가지 제스쳐를 적용 하려면 .simultaneousGesture()를 사용하면 간단히 해결이 가능합니다.

 

struct SimpleGestureExample: View {
    
    @State private var isDoubleTapped: Bool = false
    @State private var isLongTapped: Bool = false
    
    var body: some View {
        Circle()
            .fill(isDoubleTapped ? .blue : .red)
            .frame(width: isLongTapped ? 100 : 200, height: isLongTapped ? 100 : 200)
            .simultaneousGesture(LongPressGesture().onEnded({ _ in
                isLongTapped.toggle()
            }))
            .simultaneousGesture(TapGesture(count: 2).onEnded({
                isDoubleTapped.toggle()
            }))
    }
}

위 내용과 같이 .simultaneousGesture() 사용하면 한 뷰에 두가지 제스쳐 사용이 가능합니다.

롱 클릭과 더블 탭이 완전히 분리되는 것을 확인 하 실 수 있습니다.

 

다음주에 다른 주제로 돌아 오겠습니다~

 

즐거운 코딩 되세요~