Recognizerの使い方。ドラッグ&ドロップを検知する。Recognizerの使い方。ドラッグ&ドロップを検知する。Recognizer(以下、パンリコグナイザー)について説明する。パンリコグナイザーとは、ドラッグ&ドロップを検知する部品である。前回記事のスワイプリコグナイザーは素早く指を動かさなければ検知されないが、パンリコグナイザーはゆっくり指を動かしても検知され、元の位置からの移動量を正確に把握することができる。部品をドラッグ&ドロップする。ドラッグ&ドロップでイメージするものといえば部品をつかんで運ぶ動作だ。パンリコグナイザーを使って実装してみよう。デバイス画面にラベルを配置する(下図赤矢印)。紫枠のアトリビュートインスペクタボタンを押して設定画面を表示する。Enabledにチェックを入れる。黄緑枠のアシスタントエディタボタンを押してViewController.swiftを開く。Ctrlキーを押しながらラベルをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示する。Connectionに「Outlet」、Nameに「testLabel」を入力してConnectボタンを押す。これで、ソースコードでラベルを操作できるようになった。パンリコグナイザーをラベルに配置する(下図赤矢印)。Ctrlキーを押しながら水色枠のパンリコグナイザーをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。Connectionに「Action」、Nameに「panLabel」、Typeに「UIPanGestureRecognizer」を設定してConnectボタンを押す。これでラベルをドラッグ&ドロップしたときのイベントをソースコードで受けれるようになった。ViewController.swiftを以下のコードに変更する。「ドラッグ時の呼び出しメソッド」が指を移動するたびに呼び出されるので、引数から移動量を取得してラベルの座標に加算している。移動量は蓄積する値なので0にしてからメソッドを抜けることで次の呼び出しに備えている。//移動量を取得する。//ドラッグした部品の座標に移動量を加算する。//ラベルに現在座標を表示する。//移動量を0にする。{//移動量を取得する。sender.translationInView(view)//ドラッグした部品の座標に移動量を加算する。move.y//ラベルに現在座標を表示する。\(sender.view!.frame.origin.y)"//移動量を0にする。inView:view)}}以下は実際のプレイ動画ラベルを更新すると元の位置に戻ってしまう上記コードでは1つ不思議な事象が発生する。ラベルに移動量を表示する処理(コメントアウト箇所)を入れると、以下の動画のようにラベルが元の位置にすぐに戻ってしまうのだ。解消方法は、AutoLayoutを使って部品に位置の制約を追加し、制約の更新で部品を移動する作りにすることである。下図赤枠のAlignボタンを押して吹き出しの設定画面を表示させる。Constraints」ボタンを押す。これで、どんな画面サイズでも、アプリ起動時のラベルは必ず画面中央に配置されるようになった。下図紫枠のPinボタンを押して吹き出しの設定画面を表示させる。Constraints」ボタンを押す。これでラベルのサイズが固定された。下図紫枠のアシスタントエディタボタンを押してVeiwController.swiftを表示する。centerX)をドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。Connectionに「Outlet」、Nameに「xConstraint」を入力し、Connectボタンを押す。centerY)も同じようにして吹き出しの設定画面を表示し、Connectionに「Outlet」、Nameに「yConstraint」を入力し、Connectボタンを押す。これでラベルの位置の制約をソースコードで操作できるようになった。ViewController.swiftを以下のコードに修正する。//移動量を取得する。//ラベルの位置の制約に移動量を加算する。//画面表示を更新する。//ラベルに現在座標を表示する。//移動量を0にする。{//移動量を取得する。sender.translationInView(view)//ラベルの位置の制約に移動量を加算する。move.y//画面表示を更新する。view.layoutIfNeeded()//ラベルに現在座標を表示する。\(sender.view!.frame.origin.y)"//移動量を0にする。inView:view)}}以下は実際のプレイ動画。ラベルの表示を更新しても元の位置に戻らなくなった。Recognizerの使い方。画面端のドラッグを検知する。Recognizerの合わせ技。1ドラッグで出来るようにする。ドラッグでコンテナビューを出し入れする。地図上のピンをドラッグ&ドロップで移動して直線を引く。Recognizerの使い方。上下左右のスワイプを検知する。コメントをキャンセルメールアドレスが公開されることはありません。