2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SwiftUI DragGesture & MagnificationGesture の話

Last updated at Posted at 2020-01-07

過去のコードを修正します

理由

  • 数日前にSwiftUIでDragやPinchを利用したくて 私の過去のこれを利用したらPinchができない? なので修正しました 過去には作動したと思いますが現在ではDragしか作動しません 2022/2/8

SwiftのDragやPinchの挙動をSwiftUIで実現します

目的

  • Swiftの? 「UIPanGestureRecognizer」や「UIPinchGestureRecognizer」の挙動でアイコンとかを移動させたりZoomしたりの作成

忙しい人はContentView.swiftをすり替えてください

必要な条件

  • 新規作成で命名はお好みです
  • SwiftUIにチェックを入れること
  • 画像はシステム画像を使用しています

ContentView.swift

ContentView.swift
//
//  DragAppleLogo🌙.swift
//  SwiftUITest
//
//  Created by 福田 敏一 on 2022/2/11.
//  Copyright © 2019 株式会社パパスサン. All rights reserved.
//
// ❇️ ℹ️ 🚨 🎀 📅 ☼ ☕︎ 👀 💼 👑 📢 🧨 💎 🎡 🏕 🏖 🚗 🖲 🎁 📌 ⛑ ✚ 😍 ♻️ 💠 🔆 🅿️ 🔰 ✅ 🌏 🌙 💌 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣

import SwiftUI

struct DragGesture🌙: View {

    @State private var offset: CGSize = .zero
    @State private var newOffset: CGSize = .zero

    @State private var scale: CGFloat = 1.0
    //@State private var finalscale: CGFloat = 1.0//🌙🌙🌙・不要

    var body: some View {

        let dragGesture = DragGesture(minimumDistance: 0.0, coordinateSpace: .local)
            .onChanged({ value in
                self.offset.width = value.translation.width + self.newOffset.width
                self.offset.height = value.translation.height + self.newOffset.height
            }).onEnded({ value in
                self.offset.width = value.translation.width + self.newOffset.width
                self.offset.height = value.translation.height + self.newOffset.height
                self.newOffset.width = self.offset.width
                self.newOffset.height = self.offset.height
            })
        //let magnificationGesture = MagnificationGesture(minimumScaleDelta: 0.0)//🌙🌙🌙・不要

         return GeometryReader { geometry in
            Image(systemName: "trash")
                .resizable()
                .scaleEffect(self.scale)
                .frame(width: 200.0, height: 200.0)
            .gesture(MagnificationGesture(minimumScaleDelta: 0.0)
            .onChanged { value in
                //let newScale = self.scale * value//🌙🌙🌙・不要
                //self.scale = newScale//🌙🌙🌙・不要
                self.scale = value//🌙🌙🌙・上記をこれに変更
            }.onEnded { value in
print("通過・value -> \(value)")
                })
        }.offset(x: offset.width, y: offset.height).simultaneousGesture(dragGesture)
         //.scaleEffect(self.scale).simultaneousGesture(magnificationGesture)//🌙🌙🌙・不要
    }

}

struct DragGesture🌙_Previews: PreviewProvider {
    static var previews: some View {
        DragGesture🌙()
    }
}

/*🌙🌙🌙・過去のコード
 //
 //  ContentView.swift
 //  SwiftUIGestureView
 //
 //  Created by 福田 敏一 on 2020/01/07.
 //  Copyright © 2020 株式会社パパスサン. All rights reserved.
 //

 import SwiftUI

 struct ContentView: View {

     @State private var offset: CGSize = .zero
     @State private var newOffset: CGSize = .zero

     @State private var scale: CGFloat = 1.0

     var body: some View {

         let dragGesture = DragGesture(minimumDistance: 0.0, coordinateSpace: .local)
             .onChanged({ value in
                 self.offset.width = value.translation.width + self.newOffset.width
                 self.offset.height = value.translation.height + self.newOffset.height
             }).onEnded({ value in
                 self.offset.width = value.translation.width + self.newOffset.width
                 self.offset.height = value.translation.height + self.newOffset.height
                 self.newOffset.width = self.offset.width
                 self.newOffset.height = self.offset.height
             })
         let magnificationGesture = MagnificationGesture(minimumScaleDelta: 0.0)

          return GeometryReader { geometry in
             Image(systemName: "trash")
                 .resizable()
                 .frame(width: 200.0, height: 200.0)
             .gesture(MagnificationGesture(minimumScaleDelta: 0.0)
             .onChanged { value in
                 let newScale = self.scale * value
                 self.scale = newScale
             }.onEnded { value in
 print("通過・value -> \(value)")
                 })
         }.offset(x: offset.width, y: offset.height).simultaneousGesture(dragGesture)
          .scaleEffect(self.scale).simultaneousGesture(magnificationGesture)
     }

 }

 struct ContentView_Previews: PreviewProvider {
     static var previews: some View {
         ContentView()
     }
 }
 */


//
//  ContentView.swift
//  SwiftUIGestureView
//
//  Created by 福田 敏一 on 2020/01/07.
//  Copyright © 2020 株式会社パパスサン. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    
    @State private var offset: CGSize = .zero
    @State private var newOffset: CGSize = .zero
    
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        
        let dragGesture = DragGesture(minimumDistance: 0.0, coordinateSpace: .local)
            .onChanged({ value in
                self.offset.width = value.translation.width + self.newOffset.width
                self.offset.height = value.translation.height + self.newOffset.height
            }).onEnded({ value in
                self.offset.width = value.translation.width + self.newOffset.width
                self.offset.height = value.translation.height + self.newOffset.height
                self.newOffset.width = self.offset.width
                self.newOffset.height = self.offset.height
            })
        let magnificationGesture = MagnificationGesture(minimumScaleDelta: 0.0)

         return GeometryReader { geometry in
            Image(systemName: "trash")
                .resizable()
                .frame(width: 200.0, height: 200.0)
            .gesture(MagnificationGesture(minimumScaleDelta: 0.0)
            .onChanged { value in
                let newScale = self.scale * value
                self.scale = newScale
            }.onEnded { value in
print("通過・value -> \(value)")
                })
        }.offset(x: offset.width, y: offset.height).simultaneousGesture(dragGesture)
         .scaleEffect(self.scale).simultaneousGesture(magnificationGesture)
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

私の感想なんですが?

やはりSwiftUIは新規の言語なんですね? 苦労しますね?
挙動は私の思う通りになりますが? 私の環境だけでしょうか? 不思議な箇所を発見しました、それは「print("通過・value -> (value)")」の部分です
起動してPinchをしてから「Simulator」の上下ではなく両サイドの画面以外の黒いフチをタップする場合と画面のゴミ箱のアイコンとそれ以外を画面内部をタップするとprint文が実行されますね? 私はpinchが終わった後にprint文が実行されると思い? print文のコードを書きましたが実行されません? 酷いのは両サイドをタップすると予想以外のvalueの値が表示されます、まっ、pinchで「.onEnded」を利用する場合はpinchでアイコンのサイズを変更したのに指を離した瞬間に変化したら意味がないのでしょう? pinchが終わってからアイコンをタップして元のサイズに戻すとか? 多分、それが正解な挙動でしょうね? 結局、私の理解が低い結果でした、誠に勉強になりました、でも、実機では実機の両サイドのタップでは変な挙動はありませんよ?

ここまで

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?