【Swift】Tap Gesture Recognizerの使い方。キーボード以外の場所をタップしてキーボードを閉じる。(Swift 2.1、XCode 7.2)

2020年6月16日

Tap Gesture Recognizerとは

本記事ではSwiftで使える部品のTap Gesture Recognizer(以下、タップリコグナイザー)について説明する。

Tap Gesture Recognizer

 

タップリコグナイザーとは、特定の部品がタップされたことを検知する部品である。画面全体やイメージビューなど、通常はタップ検知を行わないような部品に配置してイベントを検知させる。

シングルタップのみだけで無く、ダブルタップ、トリプルタップなどの連打数や、画面に触れた指の数で通知対象を絞り込むことができる。ちなみにダブルタップとは、シングルタップを時間の間隔を空けずに連続で行うことをいう。

 

タップリコグナイザーを使ってみる

タップリコグナイザーを利用してキーボードを閉じるものを作ってみよう。テキストフィールドをタップしたらキーボードが現れ、Returnキーを押したらキーボードが消えるのが通常の使い方である。それに加えて、キーボード以外の場所がタップされたときもキーボードが消えるようにする。

また、シングルタップした場合のみキーボードを消し、ダブルタップした場合はキーボードはそのままにする。

まず、ラベルとテキストフィールドをデバイス画面に配置する(下図赤矢印と青矢印)。黄緑枠のアシスタントエディタボタンを押してViewController.swiftを開く。Ctrlキーを押しながらラベルをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。

Connectionに「Outlet」、Nameに「testLabel」を入力してConnectボタンを押す。。テキストフィールドも同様にして吹き出しの設定画面を表示させ、Connectionに「Outlet」、Nameに「testTextField」を入力しConnectボタンを押す。

これでラベルとテキストフィールドをソースコードで操作できるようになった。

ラベルとテキストフィールドをデバイス画面に配置する

 

次に、タップリコグナイザーをデバイス画面に配置する(下図赤矢印)。これはViewController配下にあるViewにタップリコグナイザーを配置したということなので、いわゆる、画面全体を検知対象としたとということになる。

黄緑枠のタップリコグナイザーをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示する。Connectionに「Action」、Nameに「tapView」、Typeに「UITapGestureRecognizer」を設定してConnectボタンを押す。これで、画面をタップしたときのイベントをソースコードで受けれるようになった。

もう一度、黄緑枠のタップリコグナイザーをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示する。Connectionに「Outlet」、Nameに「singleRecognizer」を入力してConnectボタンを押す。これで、タップリコグナイザーをソースコードで操作できるようになった。

Tap Gesture Recognizerをデバイス画面に配置する

 

上記はシングルタップを検知させるためのリコグナイザーである。次はダブルタップ用のリコグナイザーを登録する。

タップリコグナイザーをデバイス画面に配置する(下図赤矢印)。紫枠のタップリコグナイザーをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。Connectionに「Outlet」、Nameに「doubleRecognizer」を入力してConnectボタンを押す。これで、ダブルタップ用のリコグナイザーをソースコードで操作できるようになった。

黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、RecognizeのTapsを「2」に変更する。これは、このリコグナイザーをダブルタップされたときに検知させる設定である。

ダブルタップ用のTap Gesture Recognizerをデバイス画面に配置

 

ViewController.swiftを以下のコードに変更する。

Returnキーが押されたとき、または、キーボード以外の場所をタップしたときにテキストフィールドの値をラベルに設定したあとにキーボードを消している。

requireGestureRecognizerToFailメソッドを用いて、ダブルタップに失敗したときのみシングルタップの検知を有効になるようにした。これにより、ダブルタップでは「シングルタップ時の呼び出しメソッド」が呼び出されないようになる。

 

以下は実際のプレイ動画。ダブルタップではキーボードは閉じないが、トリプルタップ以上ではキーボードが閉じる。検知対象にしたくない連打数ぶんリコグナイザーを登録しなければならないのが残念だ。

タップリコグナイザーの設定

タップリコグナイザーのアトリビュートインスペクタの設定を確認する。

Tap Gesture Recognizerのアトリビュートインスペクタ

 

設定項目はRecognizeの1つ。

Tapsは検知対象とする連打回数。例えば、シングルタップは「1」、ダブルタップは「2」に設定する。

Touchesは同時に触れている指の数。例えば、指1本は「1」、5本は「5」を設定する。何本の指まで正確に検知できるのかが気になるところだ。

例えば、Tapsに「3」、Touchesに「2」を設定した場合は2本の指で3回連打した場合に検知される。ちなみに、シミュレーターで2本の指を試すにはOptionキーを押しながらタップする。