SwiftUIでいこう！ - Long Press Gesture

Working with SwiftUI Gestures and @GestureState | AppCodaWorking with SwiftUI Gestures and @GestureState

まず長押しで動作するようにするための使い命令は

LongPressGesture(minimumDuration: 1.0)

を使って、1秒後に動作するようにしています。必要なところだけ抜き取ると、

 @State private var isPressed = false
 
 Image(systemName: "swift")
      .scaleEffect(isPressed ? 0.5:1.0)
      .gesture(
          LongPressGesture(minimumDuration: 1.0)
　　　　　　　　.onEnded({ _ in
                      self.isPressed.toggle()
           　　})
      )
  }

.onEnded({ _ in
　　　self.isPressed.toggle()
})

長押しが終わったあとの動作を指定しています。長押しが終わるたびに、

self.isPressed.toggle()

"isPressed"の真偽を入れ替えます。これに連動して、

.scaleEffect(isPressed ? 0.5:1.0)

が実行されて小さくなったり、大きくなったりします。

"Long Press Gesture"を実装するのですが、この動作については、一定の時間長押しするのでその押している間は何が起こっているのかわかりません。そこで、何かが起きていることを知らせることで、使い勝手がよくなるのでは？ということで、

今回は長押しした時に透明度をあげることで、"何かがおきますよ！"というのを知らせる仕組みを作ります。

押したとき何らかの動作を指定します。その仕組みを作るときに使うのが

@GestureState

アップルの公式サイトです。

GestureState | Apple Developer Documentation

"@GestureState "で変数を宣言して、".updating()"に何らかの動作を設定します。

では実際のコードを見ていきます。

@GestureState private var longPressTap = false
 

 var body: some View {
       .opacity(longPressTap ? 0.4 : 1.0)
       .gesture(
           LongPressGesture(minimumDuration: 1.0)
               .updating($longPressTap, body: { (currentState, state, transaction) in
                               state = currentState
                           })
   }

前回のコードに"@GestureState"の部分を追加します。(追加分だけ書いています)

あとはその指定する動作を決めてやります。

.opacity(longPressTap ? 0.4 : 1.0)

変数longPressTapの真偽で透明度を変えます。

そして

.updating($longPressTap, body: { (currentState, state, transaction) in
state = currentState
})

押した時にその状態を変えるようにする命令です。

全体としては、

struct ContentView: View {
   
   @State private var isPressed = false
       
   @GestureState private var longPressTap = false
   
   var body: some View {
     Image(systemName: "swift")
       .font(.system(size:100))
       .opacity(longPressTap ? 0.4 : 1.0)
       .scaleEffect(isPressed ? 0.5:1.0)
       .foregroundColor(.blue)
       .animation(.easeInOut)
       .gesture(
           LongPressGesture(minimumDuration: 1.0)
               .updating($longPressTap, body: { (currentState, state, transaction) in
                               state = currentState
                 })
               .onEnded({ _ in
                       self.isPressed.toggle()
                 })
       )
   }
}

となります。