LongPressGestureの使い方

LongPressGestureは、画面を一定時間「長押し」したことを検出するためのGestureです。

例えば、

  • ボタンを長押しして処理を実行する
  • 長押ししている間だけ表示を変える
  • 長押しが完了したら処理を実行する

といった操作を実装できます。

基本的な書き方は次のようになります。

LongPressGesture()

これを.gesuture()を使ってViewに設定します。

Text("長押ししてください")
    .gesture(
        LongPressGesture()
    )

ただし、これだけでは長押しした時の処理がありません。

そこで、

minimumDuration
.onChanged
.onEnded

などを組み合わせて使用します。

  1. minimumDurationとは
    minimumDurationは、何秒間押し続けたら長押しとして認識するかを指定する値です。例えば、2秒間の長押しを検出したい場合は次のように書きます。
    LongPressGesture(minimumDuration: 2.0)
    サンプルコードを見てみましょう。

    struct ContentView: View {

    @State private var massage = "長押ししてください"

    var body: some View {

    Text("message)
    .padding
    .gesture(

    LongPressGesture(minimumuration: 2.0)
    .onEnded { _ in
    message = "長押ししました!"
    }
    )
    }
    }
    この場合、Textを約2秒押し続けると、長押ししました!
    と表示されます。つまり、
    minimumDuration: 2.0
    は、「最低2秒押し続けたらLongPressGestureを成立させる」
    という意味になります。
  2. .onChangedの使い方
    .onChangedは、Gestureの値に変化があった時に処理を実行します。
    .onChanged { value in

    }
    LongpressGestureでは、長押しが認識されたタイミングで利用できます。
    struct ContentView: View {
    @State private var message = "長押ししてください"

    var body: some View {
    Text(message)
    .padding()
    .gesture(
    LongPressGesture(minimumDuration: 1.0)
    .onChanged { value in
    message = "長押しを認識しました!
                   }
    )
    }
    }
    ここで注意したいのは、.onChangedが指を押している間ずっと連続して呼ばれるわけではないという点です。
    LongPressGestureの値はBool型です。
    長押しが成立すると値がtrueになり、その変化を.onChangedで受け取ることができます。
    .onChanged { value in
    print(value)
    }
    長押しが成立すると、
    true
    となります。
  3. .onEndedの使い方
    .onChangedはGestureが完了した時に処理を実行します。
    .onEnded { value in

    }
    例えば、次のように使用できます。
    struct ContentView: View {
    @State private var message = "長押ししてください"

    var body: some View {
    Text(message)
    .padding()
    .gesture(
    LongPressGesture(minimumDuration: 1.0)
    .onEnded { value in
    message = "長押し完了!"
    }
    )
    }
    }
    指定したい時間以上長押しすると、.onEndedの処理が実行されます。
    onChangedとonEnedeを組み合わせることもできます。
    LongPressGesture(minimumDuration: 1.0)
    .onChanged { value in
    print("長押しを認識")
    }
    .onEnded { value in
    print("長押し完了")
    }
    このようにGestureの状態に応じて処理を分けることができます。
  4. .onLongPressGesture()を使う方法
    SwiftUIには、LongPressGestureを簡単に利用するための
    .onLongPressGesture()
    も用意されています。
    単純に「長押しされたら処理を実行したい」という場合はこちらの方が簡単です。
    struct ContentView: View {
    @State private var count = 0

    var body: some View {
    VStack {
    Text("\(count)")
    .font(.largeTitle)

    Text("長押ししてください")
    .padding()
    .onLongPressGesture {
    count += 1
    }
    }
    }
    }
    長押しが成立するたびに、
    count += 1
    が実行されます。
  5. minimumDurationも指定できる
    .onLongPressGesture()でも長押し時間を指定できます。
    .onLongPressGesture(minimumDuration: 2.0) {
    count += 1
    }
    例えば、
    Text("2秒長押し")
    .onLongPressGesture(minimumDuration: 2.0) {
    print("2秒長押ししました")
    }
    とすると、約2秒間押し続けた時に処理が実行されます。
  6. LongPressGestureとonLongPressGestureの違い
    2つは似ていますが、用途が少し異なります。
書き方特徴
LongPressGesture()Gestureとして細かく制御できる
minimumDuration長押しとして認識するまでの最低時間を指定
.onChangedGestureの値が変化した時の処理
.onEndedGestureが成立して完了しとときの処理
.onLongPressGesture()長押し処理を簡単に実装できる

単純に、

「長押ししたら何かを実行する」

だけなら、

.onLongPressGesture {
    // 処理
}

がわかりやすいでしょう。

一方で、Gestureとして扱い、状態変化などを利用したい場合は、

.gesture(
   LongPressGesture()
        .onChanged { value in
             // 処理
     }
        .onEnded {  value in
        }
  )

という書き方が便利です。

まとめ

LongPressGestureは、SwiftUIで長押し操作を検出するためのGestureです。

基本形は、

LongPressGesture()

です。

長押しとして認識するまでの時間を変更したい場合は、
LongPressGesture(minimumDuration: 2.0)

のようにminimumDurationを指定します。

Gestureの変化や完了を利用したい場合は、

LongPressGesture { value in
       // Gestureの値が変化した時
  }
   .onEnded { value in
        // Gestureが完了したとき
       }

と書きます。

一方、単純な長押し処理であれば、

.onLongPressGesture {
      // 長押しした時の処理
}

を使うことで、より短いコードで実装できます。

まずは、.onLongPressGesture()で基本的な長押し操作を試し、その後LongPressGesture、minimumDuration、.onChanged、.onEndedへ進むと理解しやすいでしょう。

コメント

タイトルとURLをコピーしました