お手軽！storyboardでUITapGestureRecognizerを設定する

2016.09.03

storyboardからUITapGestureRecognizerを設定する記事のアイキャッチ

こんにちは、プログラマーの@Yuuです。

viewやimageをタップ出来るようにする「UITapGestureRecognizer」。

前回の記事（[swift]ボタン以外もタップ出来るようにするUITapGestureRecognizer）では、コードベースで「UITapGestureRecognizer」を使用してviewをタップ出来るようにする方法を書きましたが、
今回はstoryboardからviewをタップ出来るようにする方法をご紹介します。

解説を行う環境は以下になります。

OS：OS X El Capitan10.11.5
Xcode：7.3.1
Swift：2.2

storyboardでUITapGestureRecognizerを設定

今回もコードベースの時と同じくviewをタップされたらログに「タップされました」と表示しつつ、画面全体の背景色を青・緑に点滅するようにします。

storyboardからジェスチャーを登録する3つの利点

storyboardでジェスチャーを登録する際の利点が、僕は3点あるかなと考えてます。

コードでUITapGestureRecognizerを登録する必要がない
UITapGestureRecognizerの書き方を忘れてもviewなどにタップを登録出来る
storyboardを使い慣れている人には直感的に設定出来る

コードベースでジェスチャーを登録するのはそこまで面倒くさくなく、
以下のように「ジェスチャーを定義 -> ジェスチャーを登録」の2ステップで出来ます。

// タップを定義
let tap = UITapGestureRecognizer(target: self, action: #selector(ViewController.tapView(_:)))        
// viewにタップを登録
self.view.addGestureRecognizer(tap)

// タップを定義

let tap = UITapGestureRecognizer(target: self, action: #selector(ViewController.tapView(_:)))

// viewにタップを登録

self.view.addGestureRecognizer(tap)

それでも2行はコードを書かなくてはいけないので、コードの可読性を上げたい場合に効果が出るというのが1番目。

また、storyboardからアクションを登録する方法は直感的に出来るので、コードでジェスチャーを登録する書き方を忘れていてもアクションを登録出来るのが2点目。

そしてstoryboardでアクションを登録する方法は、UIButtonを使う場合と似たようにアクションを登録出来るので、storyboardを使い慣れた人には自然にアクションを登録出来るようになるというのが3点目です。

storyboardでUITapGestureRecognizerを登録する

SingleApplicationでプロジェクトを作成します。

まず「Main.storyboard」を開いて、viewの背景色を変更します。

肝となる「UITapGestureRecognizer」をviewに登録します。
「Tap Gesture Recognizer」と書かれたパーツを背景色を青くしたviewにドラッグアンドドロップします。

下記イメージのようにstoryboardの「View Controller Scene」内に「Tap Gesture Recognizer」が追加され、それを確認すると「view」と紐付いている事が確認出来ます。

次にButtonのアクションを登録する時と同じように、Tap Gesture RecognizerをViewController.swiftと紐付けます。

「Show the Assistant editor」に切り替えてTap Gesture Recognizer上でcontrolボタンを押しながら、ViewController.swiftまでドラッグアンドドロップします。

するとアクションを登録出来るので、「tapView」という名前でアクションを登録します。

ここではConnectionの項目を「Outlet」から「Action」に変更するのを忘れないように注意して下さい。

コードベースだと「タップをViewControllerに定義 -> viewにタップを登録」という順番だったのが、
storyboardを使う場合だと「viewにタップを登録 -> タップをViewControllerに定義」という逆の順番になるわけですね。

あとはTap Gesture Recognizerと紐付けたViewController.swift内のtapViewメソッドを変更すればOK。
ViewController.swiftを以下のように変更して下さい。
追加を行った行はマーカーをひいてある18〜25行目です。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
    /// viewをタップされた時の処理
    @IBAction func tapView(sender: AnyObject) {
        print("タップされました")
        
        // 背景色が青の場合は緑に、緑の場合は青に変更する
        if self.view.backgroundColor == UIColor.blueColor() {
            self.view.backgroundColor = UIColor.greenColor()
        }else {
            self.view.backgroundColor = UIColor.blueColor()
        }
    }
}