お手軽!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点あるかなと考えてます。

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

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

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

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

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

storyboardでUITapGestureRecognizerを登録する

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

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

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

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

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

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

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

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

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

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

下記のgif画像は前回のものを使いまわしていますが、ここまでの設定を行うと以下のようにviewをタップすると背景色が変更出来るようになります。
viewをタップ出来るようにしたgif

これでstoryboardからUITapGestureRecognizerの設定が出来ました!(๑•̀ㅂ•́)و✧

もしここまで試して反応がなかった場合は以下の記事も参考にして下さい。

あとがき

普段アプリ制作をする時でviewをタップするなどのジェスチャーの登録をする際には、コードベースで行っていました。

今回記事を書くためにstoryboardからジェスチャーを登録する方法をやってみたのですが、以外と簡単でビックリです。。

これからはstoryboardを使ってジェスチャーの設定をするようにしようかな・・笑

ではでは
今回はこの辺で!ヽ(•̀ω•́ )ゝ✧

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

この記事が気に入ったらいいね!
して最新情報をチェックしよう!

スポンサーリンク