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

2016年5月10日2020年6月16日

Tap Gesture Recognizerとは

本記事ではSwiftで使える部品の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ボタンを押す。これで、タップリコグナイザーをソースコードで操作できるようになった。

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

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

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

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

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

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

//
//  ViewController.swift
//

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {

    @IBOutlet weak var testLabel: UILabel!
    @IBOutlet weak var testTextField: UITextField!
    
    @IBOutlet var doubleRecognizer: UITapGestureRecognizer!
    @IBOutlet var singleRecognizer: UITapGestureRecognizer!

    
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //デリゲート先を自分に設定する。
        testTextField.delegate = self
        
        //ダブルタップに失敗したときのみシングルタップの検知を有効にする。
        singleRecognizer.requireGestureRecognizerToFail(doubleRecognizer)
    }



    //シングルタップ時の呼び出しメソッド
    @IBAction func tapView(sender: UITapGestureRecognizer) {
        
        //テキストフィールドの文字列をラベルに設定する。
        testLabel.text = testTextField.text
        
        //キーボードを閉じる。
        view.endEditing(true)
    }

    
    
    //Returnキー押下時の呼び出しメソッド
    func textFieldShouldReturn(textField: UITextField) -> Bool {

        //テキストフィールドの文字列をラベルに設定する。
        testLabel.text = testTextField.text

        //キーボードを閉じる。
        view.endEditing(true)

        return true
    }
}

// ViewController.swift

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {

@IBOutlet weak var testLabel: UILabel!

@IBOutlet weak var testTextField: UITextField!

@IBOutlet var doubleRecognizer: UITapGestureRecognizer!

@IBOutlet var singleRecognizer: UITapGestureRecognizer!

//最初からあるメソッド

override func viewDidLoad() {

super.viewDidLoad()

//デリゲート先を自分に設定する。

testTextField.delegate = self

//ダブルタップに失敗したときのみシングルタップの検知を有効にする。

singleRecognizer.requireGestureRecognizerToFail(doubleRecognizer)

}

//シングルタップ時の呼び出しメソッド

@IBAction func tapView(sender: UITapGestureRecognizer) {

//テキストフィールドの文字列をラベルに設定する。

testLabel.text = testTextField.text

//キーボードを閉じる。

view.endEditing(true)

}

//Returnキー押下時の呼び出しメソッド

func textFieldShouldReturn(textField: UITextField) -> Bool {

//テキストフィールドの文字列をラベルに設定する。

testLabel.text = testTextField.text

//キーボードを閉じる。

view.endEditing(true)

return true

}

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

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

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

設定項目はRecognizeの1つ。

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

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

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