[iOS][SwiftUI] 複数のジェスチャーを共存させる方法

はじめに

スターバックスデジタルテクノロジー部のけいすけです。
複数のジェスチャーを同時に検知する方法を説明します。

やりたいこと

以下のレイアウトをイメージしてください。

緑の View の上に黄色の View が重なっている時、次のようなタップ操作を検知したいとします。

• 緑の View をタップした場合
  • 緑のタップを検知
• 黄色の View をタップした場合
  • 黄色と 緑の タップを検知（タップジェスチャーの共存）

共存しない例

VStack {
    Color.yellow
        .frame(width: 200, height: 200)
        .onTapGesture {
            print("yellow tapped.")
        }
}
.frame(width: 500, height: 500)
.background(.green)
.onTapGesture {
    print("green tapped.")
}

上記の例ではタップジェスチャーの共存はできません。
黄色の View をタップするとコンソールには yellow tapped. のログのみが出力されます。

このように単純に TapGesture を重ねた場合、タップの検知は子 View 内で完結してしまい親 View へ伝達されません。
Button などの UI コンポーネントでも同様の事象が発生します。

共存する例

VStack {
    Color.yellow
        .frame(width: 200, height: 200)
        .onTapGesture {
            print("yellow tapped.")
        }
}
.frame(width: 500, height: 500)
.background(.green)
.simultaneousGesture(
    TapGesture().onEnded {
        print("green tapped.")
    }
)

ジェスチャーを共存させるには simultaneousGesture() を使用します。
このメソッドは View に対してジェスチャーを追加し、View に定義されているジェスチャーと 同時に 処理します。

https://developer.apple.com/documentation/swiftui/view/simultaneousgesture(_:including:)

このコードによって黄色の View をタップすると、コンソールには yellow tapped. と green tapped. のログが両方出力され、緑の View のタップも検知していることが確認できます。

おわりに

SimultaneousGesture を利用することでジェスチャーの共存が実現できます。
今回の例ではタップジェスチャー同士の共存を取り上げましたが、DragGesture など他のジェスチャーと同時に実行することも可能です。
特定の View が操作されたことを検知したい場合などにお使いください。

リンク

• simultaneousGesture(_:including:) | Apple Documentation
• SimultaneousGesture | Apple Documentation
• Gesture | Apple Documentation

採用情報

スターバックスデジタルテクノロジー部では iOS アプリエンジニアを募集しています。
一緒にスタバのアプリを作りませんか？

https://careers.classmethod.jp/requirements/sbj-nativeapp-ios/