2024/3/11

【Swift UI】@GestureStateの使い方！updating(_:body:)メソッド

この記事からわかること

Swift UIの@GestureStateの使い方
ドラッグ(スワイプ)したビューを移動させる方法
updating(_:body:)メソッドの使い方

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：15.0.1
iOS：17.0
Swift：5.9
macOS：Sonoma 14.1

Swift UIでのGestureの実装方法については以下の記事を参考にしてください。

@GestureStateとは？

公式リファレンス：GestureState構造体

Swift UIで使える@GestureStateはジェスチャーの状態を管理するためのプロパティラッパーです。このプロパティラッパーを付与することでジェスチャーが変更されるたびに自動的に更新された値をそのプロパティから参照することができます。

@GestureStateを付与したプロパティはGesture.updating(_:body:)メソッドでバインディングすることができるようになるのでセットで使用することが多いです。

@GestureState private var dragOffset: CGFloat = 0

updating(_:body:)メソッド

公式リファレンス：updating(_:body:)メソッド

定義
func updating<State>(
    _ state: GestureState<State>,
    body: @escaping (Self.Value, inout State, inout Transaction) -> Void
) -> GestureStateGesture<Self, State>

updating(_:body:)メソッドはジェスチャーが変更されるたびに呼び出されるクロージャーを提供し、ジェスチャーの状態を更新するために使用されます。引数stateには@GestureStateを付与したプロパティをバインディングし、 ジェスチャーの状態が変化したタイミングで引数bodyのクロージャーが呼び出され、その引数からジェスチャーの値、状態(GestureState)、およびトランザクションを参照することが可能です。

使い方

では@GestureStateを使用してViewをドラッグで移動させるように実装してみます。

ドラッグされたビューを動かすためのポイント

@GestureStateでドラッグ量を保持
updating(_:body:)でドラッグジェスチャーの変更を観測&反映
offsetでViewを移動

struct DragView: View {
    // Viewを表示させる座標値
    @State private var position = CGPoint(x: 0, y: 0)
    // ドラッグジェスチャー量
    @GestureState private var dragOffset = CGSize.zero
    
    var body: some View {
        Text("Hello")
            .frame(width: 100, height: 30)
            .background(Color.gray)
            // Viewを実際に移動させる
            .offset(x: position.x + dragOffset.width, y: position.y + dragOffset.height)
            .gesture(
                DragGesture()
                    // ドラッグジェスチャーの変更を観測
                    .updating($dragOffset, body: { (value, state, _) in
                        // state(GestureState)に移動した値を格納することで変化中も移動する
                        state = value.translation
                    })
                    // ドラッグ終了した際に呼ばれる
                    .onEnded({ value in
                        // 移動が完了した座標を格納して固定
                        self.position.x += value.translation.width
                        self.position.y += value.translation.height
                    })
            )
    }
}