IT アプリ開発

【SwiftUI】ジェスチャーによるイベント

2021年3月14日


ユーザーは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の座標を変えていくとドラッグが実現します。

-IT, アプリ開発
-,

© 2022 Yosshi Blog Powered by AFFINGER5