DragAndDrop_SwiftUI

こんにちはEveryDaySoft代表の永田です。

今回はこちらのプログラムについて解説します。最近、5言語で検討する場合は書いてる時間は全くなかったので、コピペして動きを把握しましたが、これは読めてる場合にはおすすめします。打鍵できれば、自分の考えとタイピングがリンクするので、集中しやすくなります。なので、打鍵で記事を書きました。

ソースコード

https://github.com/daisukenagata/DragAndDrop_SwiftUI

挙動

https://twitter.com/i/status/1464536867957661702

11111

—–

—–

—–

11—–

—–

他に

.onDragの箇所が実行されると、PrivateFrameworksのログがでます。

が、

それ以外は正常に動作します。

コードの解説

GridDragAndDropViewの構造体は、青色のグリッド表現と画像を表示しているTable箇所を実装しています。

Color.clearを使い余白を表現しています。Spacerは大雑把な設定になってしまうので、Colorを使用する方が使い勝手が良いです。

ForEachのループの中で、並行設定するHStackを記述し5列マスを表示してから、改行を5行繰り返しています。

Listの箇所は、番号と画像を表示しているプログラムになります。GridImageData()は画像のビジネスロジックを持つオブジェクトです。

HStackの中で番号と画像の実装することにより、一つの行で実装してます。

onDragの中では、Drag動作をする場合に実行されます。アプリケーションの持つURLを渡します。

受け取り先は、、onDropのプログラムです。

ForEachのループ中でGridDragAndDropViewを実行しています。

ScrollViewの中にあるshowsIndicatorsはスクロール時の端にあるスクロール域を表示するか設定します。delegate.selectedImagesのデータ構造をForEatchでループしています。LazyHGridは横方向のグリッドを設定するのですが、ScrollViewとLazyHGridの組み合わせないと.onDropというDragしたListのデータ(番号と画像部分)がマスの中にDropできなかったのです。

一つ、一つの青色のコマの中に、番号と画像部分を実装しています。開始位置のX軸が0の場合は、マスの中で一番左寄りになります。なので、.offsetというプログラムで余白を調整しています。SwiftUIで難しいなと思うのは、全デバイスで余白を調整する場合に比率で実装するケースもあるということです。

onChangeメソッドはmosaの勉強会でメソッド紹介があったので、実装しました。指定した値が変わった場合に発行します。今回はdelegate.selectedImagesが選択されたら発行し値をcount変数に渡しています。countはonDropの箇所で三項演算子で複数Dropすると横スクロールする挙動を制御しています。

.onDrop(of: [String(UTType.url.identifier)], delegate: count == 0 ? delegate : GridImageData())

GridImageData()ではインスタンスの差異でnilのような挙動になるわけです。1行でめちゃくちゃ簡単な処理です。

Image(image.image)は画像を表示するプログラムです。.resizable()を書くとサイズを指定できます。.frame(~~)でサイズを調整しています。

.cornerRadius(5)で画像の丸みを設定

.onTapGesture {}はタップされた場合の挙動です。

非同期でdelegate.selectedImagesの画像データが選択したデータと合っていれば、マスの中から画像を消す処理をしています。

delegateを設定してあるGridImageDataは、DropDelegateのインターフェースを設定してあるので、delegateにしました(適当)。

performDrop関数はDropした場合に必ず実行されます。

idに選択した行の数字とNSItemProviderで設定したurlを設定しています。実行した場合に、GridDragAndDropDesgin箇所が実行されマスの中に画像がセットされる図式です。

プログラミングは絶対の法則で発生する事象です。とても論理的です。なので、習慣にすることをおすすめします。少ない負荷から大きい負荷までをこなすようにしながら毎日実施すると自然とできるようになってきます。覚える必要はなく、何かを行う場合に知っているという状態になっていることを意識してください。知っているという感覚があると(感覚が合っている)、あまり考えなくとも出来ます。知っていなければ、知っていることを増やす状態です。それが良いのかは自分で決めてください。

貴重なお時間お読み下さいまして、誠にありがとうございます。