[Swift3]ビュー(画像とかラベルとか)を指で移動させる

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Swift

写真加工アプリなどのように、ビュー上の部品(画像やラベルなど)を指でドラッグして移動させる仕組みを作る。

単一のビューならUIPanGestureRecognizerでも移動ができるが、本項で紹介する方法なら「複数のビューのうち1つだけを独立して動かす」ということが実現できる。

今回作るもの

「追加」ボタンを押すと画像が出現し、出現した画像をドラッグするとその場所に画像が移動する。出現した画像だけでなく、もともとあるラベルもドラッグで移動が可能。

処理の流れ

UIPanGestureRecognizerは使わず、touchesBeganやtouchesMovedメソッドなどを使って以下のような処理を行っている。

  • あらかじめ移動させたいビューに専用のタグ(tag)を設定しておく
  • touchesBegan、touchesMovedメソッドでタッチした指の場所にあるビューを拾う
  • 拾ったビューに先で設定したタグが付与されていたら、移動可能なビューとして座標の移動を行う

タグを設定するというのが肝で、これがないともともとある背景のビューまで処理の対象になってしまう。

実装する

「追加」ボタンを押した時の処理

ボタンを押すと指定した位置に画像が出現するという処理を実装する。「ユーザーの操作を受け付ける」「タグを設定する」という処理が普段と異なる箇所だ。

ラベルの設定

今回はストーリーボード上でラベルを配置した。この場合でも、タグの設定などは行える。

ラベルを選択し、アトリビュートインスペクタで「Tag」を画像に付与したタグと同じ値(ここでは1)にし、「User Interaction Enabled」にチェックを入れる。

ラベルの設定

画面をタッチした時の処理

touchesBegan、touchesMovedメソッドをオーバーライドする。

まずはタッチした指のうち最初の指のみを取得し、次に指がどのビューに触れたかをviewプロパティから取得する。
そして、触れたビューのtagプロパティを見て「動かせるビューに設定したタグ」と同じ値であれば、触れたビューの座標を動かす処理を行うという流れだ。

このままでも動く、が…

タッチした指の場所が強制的にビューの中心になってしまう

ここまでの内容ですでに「タッチしたビューを動かす」というところまでは完成している。しかし実際に動かすとわかるが、このままだと仮にビューの端をつかんでも指の位置にビューの中心が移ってしまう

改良する

このままでは格好悪いので、以下のように修正。変数の追加と、touchesEnded・touchesCancelledメソッドのオーバーライドを新たに行っている。

完成したソース

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。