お手軽!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ステップで出来ます。
1 2 3 4 |
// タップを定義 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行目です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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() } } } |
下記のgif画像は前回のものを使いまわしていますが、ここまでの設定を行うと以下のようにviewをタップすると背景色が変更出来るようになります。
これでstoryboardからUITapGestureRecognizerの設定が出来ました!(๑•̀ㅂ•́)و✧
もしここまで試して反応がなかった場合は以下の記事も参考にして下さい。
あとがき
普段アプリ制作をする時でviewをタップするなどのジェスチャーの登録をする際には、コードベースで行っていました。
今回記事を書くためにstoryboardからジェスチャーを登録する方法をやってみたのですが、以外と簡単でビックリです。。
これからはstoryboardを使ってジェスチャーの設定をするようにしようかな・・笑
ではでは
今回はこの辺で!ヽ(•̀ω•́ )ゝ✧
