ユーザーはiphoneを操作する手段として以下のようなものがあります。
・ タップやダブルタップ
・ ドラッグ
・ スワイプ
・ ピンチアウト、ピンチイン
ユーザーがこれらを行うことをSwiftUIではジェスチャー(gesture)といい、
swiftUIではこれらのジェスチャーが起きた時に実行される関数などが定義されています。
Webでいうイベントみたいな感じですね！
ここではそのgestureについて話したいと思います！
ジェスチャーのイベント関数
ユーザーがタップなどをすることをgestureという。
| 関数 | 説明 |
|---|---|
| onTapGesture | これはタップなので、ボタンやテキストなど、特定のものをタップした時に発生するので、基本的な書き方は、Text('Tap!').onTapGesture()のように記載する。 .onTapGesture(count: 2)としたらダブルタップ |
| onLongPressGesture | これはタップなので、ボタンやテキストなど、特定のものをタップした時に発生するので、基本的な書き方は、Text('Tap!').onLongPressGesture()のように記載する |
| gesture(DragGesture() | Viewをスワイプするので、View.gesture(DragGesture()という感じで記載します。ただ、Dragはした時、Dragし終わった時などいくつか処理のタイミングがある。 onChanged・・位置に変更があると実行されます、onEnded・・ドラッグ後に実行されます、updating・・？、Swipe は、Swipe途中ではなく、Swipe後に反応すれば良いので、onEnded を使って実装します。 |
| MagnificationGesture | ？ |
| RotationGesture | ？ |
上記のgestureにプラスで
updating(Gestureの値が更新されたときに発火：一時的なUIの状態を変更したいとき、@GestureStateを使用してGestureの状態を管理する)
onChange(Gestureの値が更新されたときに発火: 永続的な値を変更したいとき)
onEnded(Gesture終了時に発火)
を指定できる。
.gesture(DragGesture(minimumDistance: 5)
のminimumDistanceは最低5pxドラッグしたら処理を始めるということ。
コードの書き方
コードの書き方は以下です。
↓売上金額という文字をユーザがタップした時の処理を記載します。
Text("売上金額").onTapGesture {
// 処理を記載する
}
↓これは売上金額という文字をダブルタップ(2回タップ)したら実行します。
Text("売上金額").onTapGesture(count: 2){
// 処理を記載する
}
↓これは売上金額という文字を長く触っていた時に実行します。
Text("売上金額").onLongPressGesture(
// 処理を記載する
)
↓これはスワイプした時に実行します。スワイプは長い間指を動かす動作なので、スワイプしている時の処理、スワイプ完了時(指を離した時)の処理の2つで記載可能。
通常はスワイプは文字だったり、ボタンに対してするものではないのでviewに対してgesture()でスワイプ機能を実装しています。
ZStack(alignment: .topLeading) {
}
.gesture(DragGesture(minimumDistance: 5)
.onChanged{ value in
// スワイプしている間の処理
}
.onEnded { value in
// スワイプが完了した時の処理
}
)
valueはスワイプ情報が格納されています。
ジェスチャーオブジェクトから取得できる情報
DragGesture.Value プロパティとして以下のものがあります
var location: CGPoint
現在の場所
var predictedEndLocation: CGPoint
現在の速度からの今止まった場合の最終位置の予測
var predictedEndTranslation: CGSize
現在の速度からの今止まった場合の最終移動の予測
var startLocation: CGPoint
gestureの開始位置
var time: Date
現在のドラッグイベントに関連付けられた時間
var translation: CGSize
ドラッグの開始から現在までの総移動合計
DragGesture.Value のインスタンスを生成して、ドラッグの変化に応じてViewの座標を変えていくとドラッグが実現します。