macOS   SwiftUIプログラミング   ドラッグで図形を移動する

ホーム

Drag Gesture

ドラッグで図形を移動するには、DragGesture を使うのが良さそうです。まずは次のサンプルを土台にしてみます。
DragGesture | Apple Developer Documentation

App.swift

Xcode では、プロダクト名App.swift になります。コード内容は macOS 用に少し変更しています。

import SwiftUI

@main

struct FooApp: App {
    init() {
        // Tab（タブ）に関するメニューを削除するために次のコードを追加しました。
        NSWindow.allowsAutomaticWindowTabbing = false
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .commands(content: {
            // New Window メニューを削除するために次のコードを追加しました。
            CommandGroup(replacing: .newItem) {}
        })
    }
}
	

View.swift

Xcode では、ContentView.swift になります。コード内容は macOS 用に少し変更しています。

import SwiftUI
 
struct ContentView: View {
    @State var isDragging = false

    var drag: some Gesture {
        DragGesture()
            .onChanged { _ in self.isDragging = true }
            .onEnded { _ in self.isDragging = false }
    }

    var body: some View {
        VStack {
            Circle()
                .fill(self.isDragging ? Color.red : Color.blue)
                .frame(width: 100, height: 100, alignment: .center)
                .gesture(drag)
        }
        // macOS 用にウィンドウの大きさを設定しています。
        .frame(minWidth: 300, maxWidth: .infinity, minHeight: 300, maxHeight: .infinity)
        // macOS 用にウィンドウを閉じるとアプリケーションも終了するようにしています
        .onDisappear(){ NSApplication.shared.terminate(self)}
    }
}
	

アプリケーションバンドル

Xcode で作業する場合は、この部分は無視してください。 ターミナルで作業する場合は「アイコン」を参考にしてアプリケーションバンドルを作ってください。 アプリケーションの名前を変えるために、Info.plist の CFBundleName を書き換えます。ここでは「Drag」という名前にしました。

アイコンは次のサイトから .icns ファイルをダウンロードしました。
フリーアイコンSVG、PNG、ICO、ICNS

Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
"https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleExecutable</key>
	<string>foo</string>
	<key>CFBundleIconFile</key>
	<string>icon-macbook.icns</string>
	<key>CFBundleName</key>
	<string>Drag</string>
</dict>
</plist>
    

ビルド

Xcode で作業している場合は、▶︎（ビルドボタン）をクリックするか、⌘Rを押してください。ターミナルでビルドする場合は次のようにします。

swiftc App.swift View.swift -o foo
mv foo Foo.app/Contents/MacOS
    

実行

青い円をドラッグすると、移動はできませんが赤い色に変わります。マウスをリリース（ドロップ）すると青い色に戻ります。とりあえずドラッグとドロップのタイミングは感知できているみたいです。これを移動に変えれば良いわけですよねー。簡単にできるかな？

円を移動できるようにする

View.swift

Xcode では、ContentView.swift になります。App.swift（プロダクト名App.swift）は、前述と同じです。

import SwiftUI
 
struct ContentView: View {
    @State var isDragging = false
    @State var location = CGPoint(x: 150, y: 150)

    var drag: some Gesture {
        DragGesture()
            .onChanged { value in
                location = value.location
                self.isDragging = true
            }
            .onEnded { _ in self.isDragging = false }
    }

    var body: some View {
        VStack {
            Circle()
                .fill(self.isDragging ? Color.red : Color.blue)
                //.frame(width: 100, height: 100, alignment: .center)
                .frame(width: 100, height: 100)
                .position(location)
                .gesture(drag)
        }
        .frame(minWidth: 300, maxWidth: .infinity, minHeight: 300, maxHeight: .infinity)
        .onDisappear(){ NSApplication.shared.terminate(self)}
    }
}
    

コード説明

1. @State var location = CGPoint(x: 150, y: 150)
   location（位置）用にプロパティを追加しています。location は図形の中心点の x y 値になります
2. .onChanged { value in location = value.location ・・・}
   ドラッグ中、常に位置情報が更新されます
3. .position(location)
   Circle の position モディファイアで円の位置が決まっています

ドラッグで円を移動できるようになりました。

---

ホーム   目次