【Swift】Swipe Gesture Recognizerの使い方。上下左右のスワイプを検知する。(Swift 2.1、XCode 7.2)

2020年6月16日

Swipe Gesture Recognizerとは

本記事ではSwiftで使える部品のSwipe Gesture Recognizer(スワイプリコグナイザー)の使い方について説明する。

Swipe Gesture Recognizer

 

スワイプリコグナイザーとは、スワイプを検知する部品である。スワイプとは、画面に触れた指を上下左右いずれかの方向に素早く動かす動作のことをいう。

スワイプと似た言葉に「フリック」がある。「フリック」は画面内の部品に指を置いて上下左右いずれかの方向に弾く動作のことをいい、キーボード入力やスイッチ操作などの表現で使われる。
フリック入力の例

 

「スワイプ」は画面内の特定範囲に指を置いて上下左右いずれかの方向に弾く動作のことをいい、ページめくりやスクロールなどの表現で使われる。
スワイプの例

 

Swiftではフリックもスワイプもスワイプリコグナイザーで実装するので、本サイトでは特に使い分ける必要がない限りスワイプと表現する。

 

スワイプリコグナイザーを使ってみる

実際にスワイプリコグナイザーを使ってみよう。ラベルをスワイプすると、方向がラベルに表示されるものを実装する。

デバイス画面にラベルを配置する(下図赤矢印)。黄緑枠のアシスタントエディタボタンを押してViewController.swiftを表示する。

Ctrlキーを押しながらラベルをソースコードまで運んで吹き出しの設定画面を表示させる(青矢印)。Connectionに「Outlet」、Nameに「testLabel」を入力しConnectボタンを押す。これでラベルをソースコードで操作できるようになった。

紫枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Colorに白、Backgroundに青、User Interaction Enabledにチェックを入れる。

デバイス画面にラベルを追加する

 

スワイプリコグナイザーはスワイプする方向(上下左右)によってリコグナイザーを分ける必要があるので、仮に、上下左右の4方向のスワイプを検知したい場合は4つのスワイプリコグナイザーを登録しなければならない。

ストーリーボードで4回も登録するのが面倒なので、今回はソースコードでスワイプリリコグナイザーを登録する。

ViewController.swiftを以下のコードに変更する。4個のスワイプリコグナイザーの呼び出しメソッドは全て同じで、引数をもとにスワイプ方向を判別し、ラベルに表示している。

 

以下は実際のプレイ動画。動画を見ると分かるように、指をゆっくり移動させるとスワイプリコグナイザーに検知されなくなる。

スワイプで部品を動かす

せっかくなので、スワイプの感じを出すためにスワイプした方向にラベルが移動するものを作ってみよう。

デバイス画面のラベルを選択したあとに、下図赤枠のAlignボタンを押して吹き出しの設定画面を表示させる。黄緑枠のHorizontally in ContainerとVertically in Containerにチェックを入れ、両方とも値を「0」にして「Add 2 Constraints」ボタンを押す。これでアプリ起動時にラベルが必ず画面中央に配置されるようになった。

ラベルに位置の制約を追加する

 

次に紫枠のPinボタンを押して吹き出しの設定画面を表示する。WidthとHeightにチェックを入れて「Add 2 Constraints」ボタンを押す。これでラベルのサイズの制約が追加された。

ラベルのサイズの制約を追加する

 

下図黄緑枠の位置の制約(Test Label.centerY = centerY)をCtrlキーを押しながらドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。Connectionに「Outlet」、Nameに「yConstraint」を入力してConnectボタンを押す。

赤枠の位置の制約(Test Label.centerX = centerX)も同じように吹き出しの設定画面を表示させ、Connectionに「Outlet」、Nameに「xConstraint」を入力してConnectボタンを押す。これで位置の制約をソースコードから操作できるようになった。

位置の制約とソースコードのコネクションを確立する

 

ViewController.swiftを以下のコードに変更する。ラベルが画面の外に飛び出さないようにしながら、スワイプした方向にラベルをアニメーションで移動させている。

 

以下は実際のプレイ動画