【SwiftUI】タップを検知する「TapGesture」の使い方

【SwiftUI】タップを検知する「TapGesture」の使い方
この記事ではSwiftUIを使って、Textにタップ検知をつける方法を解説します。 アプリの開発では多くのシーンでTapGuesture()を使いますので、この機会に使い方を覚えましょう。

サンプルのコード全文

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        Text("Hello, World!")
            .gesture(TapGesture(count:1)
                .onEnded(){
                   print("clicked!")
            })
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

詳しい解説

ステップ形式で今回のコードを解説します。

(1) Textを定義

最初にタップするためのTextを定義します。

(2) gesture()を追加

TextのようなViewは .gesture() というメソッドを持っています。 なので、それを追加します。

gesture()とは

gesture()は「タップする」というようなジェスチャーを追加するためのメソッドです。 ※現時点でエラーが出ていても大丈夫です

(3) TapGestureを追加する

先ほど追加した .gesture() の引数にTapGesture()を追加します。 さらに、 count に値を割り当てます。
今回はタップ(TapGesture)ですが、他にもたくさんのジェスチャーがあります。この記事の後半に他のジェスチャーを紹介しています。

countとは

TapGesture の count とは、何回タップしたときにタップ判定を下すかの回数です。

(4) タップされたときの処理を追加する

先ほど追加した TapGesture に .onEnded() というメソッドを追加します。 .onEnded() のクロージャにタップしたときに実行したい処理を書きます。
今回はコンソールに「clicked!」という文字を出します。

.onEnded()とは

onEnded()はタップが終了した時点で実行するメソッドです。

実行すると….

このように「Hello, World!」をクリックすると「clicked!」とコンソールに表示されます。 お疲れ様でした!

より綺麗な書き方

import SwiftUI

struct ContentView: View {
    let gesture = TapGesture(count:1)
        .onEnded(){
           print("clicked!")
    }
    
    
    var body: some View {
        Text("Hello, World!")
            .gesture(self.gesture)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
さきほどのと何が変わったのかというと、ジェスチャーの処理を一度変数で定義して、それをTextに追加しました。
こちらの方がより見やすいでしょう。

他にもあるGestureの種類

今回はタップしたときに反応する、TapGestureを使用しました。 他には以下のGestureが提供されています。

未分類カテゴリの最新記事