【SwiftUI】onTapGestureを用いてタップを検知する方法について解説！

2025年1月22日

ほりうち

こんにちは！Shoriと申します。この記事では、Swift 5.10およびXcode 15.4を使用して、SwiftUIでonTapGestureを使用してタップを検知する方法について、サンプルコードを交えながら説明しております。

初心者の方でも分かりやすいように、サンプルコードに適宜説明を入れながら解説していくので、ぜひご覧ください。

この記事を読んで分かること…
・Widgetにタップイベントを設定する方法

実行環境

・実行環境：SwiftUI+XCode
・Swift：5.10
・XCode：15.4
・サンプルコードの実行確認日：2024年12月30日（月）

onTapGestureとは？

nonisolated
func onTapGesture(
    count: Int = 1,
    perform action: @escaping () -> Void
) -> some View

toggleは変数のONとOFFを切り替えることの出来る制御部品です。

toggleを使ってみよう（.button）

今回は、先ほどのコードで指定した.toggleStyleの中身を変更して起動してみましょう。

概要

.toggleStyle(.button)

.toggleStyleには引数に、.button, .switch, Configuration, .automatic, makeBody()を取ることができます。
※ .automatic, makeBody()はこの記事で紹介するものと内容が重複するため、この記事では割愛します。

サンプルコード

import SwiftUI

struct BlogView: View {
    @State private var countTapped = 0
    
    var body: some View {
        VStack {
            Text("tapped count: \(countTapped)")
            Button{
                countTapped += 1
            } label: {
                Text("Tap Me!")
            }
            Spacer()
            Image(systemName: "arrow.clockwise")
                .onTapGesture {
                    countTapped = 0
                }
        }
        .frame(height: 300)
    }
}

#Preview {
    BlogView()
}

また、今回はtoggleの書き方も変更してみましょう。toggleは引数を3つ取ることが可能で、画像もtoggleに使うことができます。

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: @Stateを付けて変数の値の状態変更を監視します。またprivate修飾子をつけることで、他のファイルからのアクセスを制限します。Int型のcountTappedという変数を定義します。
◾️行 4: VStackを宣言します。
◾️行 5: タップした回数をTextに表示します。
◾️行 6~11: Buttonを宣言し、最初のブラケットの中で、ボタンを押した時に実行するコードを指定します。今回はボタンを押したらcountTappedに+1したいので、countTapped+=1を定義。2つ目のブラケットの中で、ボタンに表示するコンテンツを定義します。Tap Me!と表示されるTextを宣言します。
◾️行 12: Spacer()を定義して、自動的にスペースを調整します。
◾️行 13: arrow.clockwiseという名前のSystemImageを宣言します。
◾️行 14~16: onTapGesutureを宣言します。このブラケットの中でcountTapped=0を定義し、systemImageを押下したらcountTappedがリセットされるコードを書きます。
◾️行 17: 上限の高さを300に制限します。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。

出力

Tap Me!ボタンを5回タップする。tappedCountが5になっていることを確認できる。

下の矢印ボタンをタップすると、tappedCountが0に戻ることを確認できた。

onTapGesutureに.countを設定する

今回は、先ほどのコードのonTapGesutureに「何回clickしたら実行するか」を決めたいと思います。

概要

.onTapGesture(count: Int) {}

.onTapGesutureは引数にInt型のcountを持つことが可能です。これを設定すると、ダブルクリックやn回クリックで処理を実現する処理を書くことができます。

サンプルコード

import SwiftUI

struct BlogView: View {
    @State private var countTapped = 0
    
    var body: some View {
        VStack {
            Text("tapped count: \(countTapped)")
            Button{
                countTapped += 1
            } label: {
                Text("Tap Me!")
            }
            Spacer()
            Image(systemName: "arrow.clockwise")
                .onTapGesture(count: 2) { // count:2を追加
                    countTapped = 0
                }
        }
        .frame(height: 300)
    }
}

#Preview {
    BlogView()
}

先ほどのコードに1箇所だけ変更を加えます。.onTapGesutureに(count: 2)を加えてみましょう。

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: @Stateを付けて変数の値の状態変更を監視します。またprivate修飾子をつけることで、他のファイルからのアクセスを制限します。Int型のcountTappedという変数を定義します。
◾️行 4: VStackを宣言します。
◾️行 5: タップした回数をTextに表示します。
◾️行 6~11: Buttonを宣言し、最初のブラケットの中で、ボタンを押した時に実行するコードを指定します。今回はボタンを押したらcountTappedに+1したいので、countTapped+=1を定義。2つ目のブラケットの中で、ボタンに表示するコンテンツを定義します。Tap Me!と表示されるTextを宣言します。
◾️行 12: Spacer()を定義して、自動的にスペースを調整します。
◾️行 13: arrow.clockwiseという名前のSystemImageを宣言します。
◾️行 14~16: onTapGesutureを宣言します。このブラケットの中でcountTapped=0を定義し、systemImageを押下したらcountTappedがリセットされるコードを書きます。今回は引数(count: 2)を設定し、onTapGesutureのタップ回数を設定します。
◾️行 17: 上限の高さを300に制限します。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。