Storyboardで8種類のUIGestureRecognizerを使う

こんにちは、プログラマーの@Yuuです。
前回はswiftで8種類のUIGestureRecognizerを使う方法をご紹介しました。
しかし、UIGestureRecognizerはSwiftやObjective-Cと言ったコードを使わなくてもstoryboardから簡単に設定が出来ます。
そこで今回は、storyboardからUIGestureRecognizerを使う方法をご紹介します。
スポンサーリンク
UIGestureRecognizerとは
UIGestureRecognizerについては、前回の記事(Swiftで8種類のUIGestureRecognizerを使う方法)で丁寧に書いているので今回はザックリと。
「ピンチイン・ピンチアウト・長押し」と言った、iPhoneで扱える様々なジェスチャーを扱えるようにするクラスが「UIGestureRecognizer」です。
UIGestureRecognizerクラスを継承したUITapGestureRecognizerクラスなどを、オブジェクト(UIView
やUILabel
など)に対して使用する事で様々なジェスチャーを扱えるように出来ます。
前回の記事と同じく、以下8種類(ダブルタップを1つとカウント)のジェスチャーについてstoryboardを使用して扱えるようにする方法をご紹介します。
クラス名 | ジェスチャー |
---|---|
UITapGestureRecognizer | タップ・ダブルタップ |
UIPinchGestureRecognizer | ピンチ |
UIPanGestureRecognizer | パン(ドラッグ) |
UISwipeGestureRecognizer | スワイプ |
UIRotationGestureRecognizer | ローテイト |
UILongPressGestureRecognizer | ロングプレス |
UIScreenEdgePanGestureRecognizer | エッジ |
UIGestrueRecognizerを使う
タップ・ダブルタップ(UITapGestureRecognizer)
タップされた時は「single」・ダブルタップの時は「double」とログに出力されるようにします。
まず2つのTap Gesture RecognizerをViewに配置。
ダブルタップの方に設定するRecognizerだけTapsの値を変更します。
「Tap」のとなりにある「Touches」の値を変更すると、指定した本数以上の指でタップしないと反応しなくなります。
つまり「Touches」の値を「2」に変更すれば、2本指でタップしないと反応しなくなるという事です。
それぞれのTap Gesture Recognizerを「@IBOutlet」「@IBAction」としてViewControllerに紐付けます。
最後にviewDidLoad()
内に以下の1文を追加し、ダブルタップの時にはシングルタップを反応させないようにします。
Swift2.2以前の場合は上のコメントアウトしてある方を書いて下さい。
1 2 |
// singleTapGesture.requireGestureRecognizerToFail(doubleTapGesture) //Swift2.2以前の場合 singleTapGesture.require(toFail: doubleTapGesture) //Swift3の場合 |
全文表示すると
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 28 |
import UIKit class TapViewController: UIViewController { @IBOutlet var singleTapGesture: UITapGestureRecognizer! @IBOutlet var doubleTapGesture: UITapGestureRecognizer! override func viewDidLoad() { super.viewDidLoad() // ダブルタップの時はシングルタップを反応させない // singleTapGesture.requireGestureRecognizerToFail(doubleTapGesture) //Swift2.2以前の場合 singleTapGesture.require(toFail: doubleTapGesture) //Swift3の場合 } /// シングルタップ時に実行される @IBAction func tapSingle(sender: AnyObject) { print("single") } /// ダブルタップ時に実行される @IBAction func tapDouble(sender: AnyObject) { print("double") } } |
ピンチ(UIPinchGestureRecognizer)
ピンチイン・ピンチアウトをする際に以下の2種類の値を取得出来ます。
- scale・・2つのタッチポイントの相対的な拡大縮小率
- velocity・・1秒あたりのピンチの速度
ここではピンチイン・ピンチアウトされた時に「scale」と「velocity」をログとして出力してみます。
Pinch Gesture RecognizerをViewに設定します。
IBActionでpinchをViewControllerに紐付けます。
あとはViewController側にピンチを行った時のアクションを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import UIKit class PinchSbViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } @IBAction func pinchView(_ sender: AnyObject) { let pinch = sender as! UIPinchGestureRecognizer print("pinch") print("scale: \(pinch.scale)") print("velocity: \(pinch.velocity)") } } |
この「UIPinchGestureRecognizer」を使うと、よくある写真をピンチイン・ピンチアウトして拡大縮小表示するような事が出来ます。
以下のページが参考になりそう。
パン(UIPanGestureRecognizer)
パンはドラックの事で、translation(in:)
を使う事で移動後の相対位置を取得出来ます。
ここではパンを実行された時にtranslation
の値を表示してみます。
ピンチの時と同じように「Pan Gesture Recognizer」をViewに設定し、IBActionを設定します。
ViewControllerを以下のように書き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import UIKit class PanSbViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } @IBAction func panVIew(_ sender: AnyObject) { let pan = sender as! UIPanGestureRecognizer print("パン") //移動後の相対位置を取得 //let location: CGPoint = pan.translationInView(self.view) //Swift2.2以前 let location: CGPoint = pan.translation(in: self.view) //Swift3 print("location: \(location)") } } |
スワイプ(UISwipeGestureRecognizer)
レフトスワイプ・ライトスワイプそれぞれを取得してみます。
Swipe Gesture Recognizerを2つViewに配置します。
配置したそれぞれのSwipe Gesture RecognizerにSwipeの方向(direction
)をStoryboardから設定します。
あとはそれぞれをIBActionで繋ぎます。
ViewControllerの全文は以下のとおり。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import UIKit class SwipeSbViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } @IBAction func leftSwipeView(_ sender: AnyObject) { print("left Swipe") } @IBAction func rightSwipeView(_ sender: AnyObject) { print("right Swipe") } } |
ローテイト(UIRotationGestureRecognizer)
ローテイトをする際に「rotation」「velocity」の値を取得する事が出来ます。
- rotation・・回転した角度(ラジアン)
- velocity・・スピード(ラジアン/秒)
ここではローテイト実行時にrotation
・velocity
の値を表示するようにします。
Rotation Gesture RecognizerをViewに設定。
今までと同じようにViewControllerにアクションを設定。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import UIKit class RotateSbViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } @IBAction func rotationView(_ sender: AnyObject) { let rotation = sender as! UIRotationGestureRecognizer print("rotation: \(rotation.rotation)") print("velocity: \(rotation.velocity)") } } |
ロングプレス(UILongPressGestureRecognizer)
ロングプレスは長押しの事。
そのまんまですね。
Long Press Gesture Recognizerをviewに登録。
登録したLong Press Gesture Recognizerの「Attributes inspector」で、
最低何秒押された場合ロングプレスとするか(minimumPressDuration
)
ロングプレス中の指が動いていい範囲(allowableMovement
)を指定する事が出来ます。
ViewControllerにアクションを設定。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import UIKit class LongPressSbViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } /// ロングプレス時に実行される @IBAction func longPressView(_ sender: AnyObject) { print("Long Press") } } |
エッジ(UIScreenEdgePanGestureRecognizer)
エッジは画面端をスワイプするアクション。
ブラウザなどで画面左端をスワイプして前のページに戻ったり、画面下からスワイプして通知センターを表示する際にも、このアクションが使われています。
Screen Edge Pan Gesture Recognizerをviewに登録。
Edgeの方向は「Attributes inspector」で変更出来ます。
ViewControllerにアクションを設定。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import UIKit class EdgeSbViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } /// エッジ時に実行される @IBAction func edgeView(_ sender: AnyObject) { print("edge") } } |
あとがき
コードで書くよりもstoryboardを使った方がコードの可読性は良くなりますね。
普段から積極的にstoryboardを使う身として、今後はstoryboard上でUIGestureRecognizerの登録をするようにしようと思います。
使い勝手も悪くありませんしね!
ではでは
今回はこの辺で!ヽ(•̀ω•́ )ゝ✧
2016.11.13追記
UIGestureRecognizerが使えない起きた時の対処法の記事を書きました。
エラーが起きた際には参考にしてみて下さい。
