Storyboardで8種類のUIGestureRecognizerを使う

2016.10.29

UIGestureRecognizerのStoryboardでの使い方の記事のアイキャッチ

こんにちは、プログラマーの@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以前の場合は上のコメントアウトしてある方を書いて下さい。

// singleTapGesture.requireGestureRecognizerToFail(doubleTapGesture) //Swift2.2以前の場合
singleTapGesture.require(toFail: doubleTapGesture) //Swift3の場合

1 2	// singleTapGesture.requireGestureRecognizerToFail(doubleTapGesture) //Swift2.2以前の場合 singleTapGesture.require(toFail: doubleTapGesture) //Swift3の場合

全文表示すると

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")
    }
}

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側にピンチを行った時のアクションを記述します。

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)")
    }
}

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」を使うと、よくある写真をピンチイン・ピンチアウトして拡大縮小表示するような事が出来ます。

以下のページが参考になりそう。

Swiftでピンチジェスチャー… | スタジオザンビ

画像をダブルタップとピンチイン・ピンチアウトで拡大・縮小する - Qiita

パン（UIPanGestureRecognizer）

パンはドラックの事で、translation(in:)を使う事で移動後の相対位置を取得出来ます。

ここではパンを実行された時にtranslationの値を表示してみます。

ピンチの時と同じように「Pan Gesture Recognizer」をViewに設定し、IBActionを設定します。

ViewControllerを以下のように書き換えます。

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)")
    }
}

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の全文は以下のとおり。

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")
    }
}

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にアクションを設定。

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)")
    }
}

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にアクションを設定。

import UIKit

class LongPressSbViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    /// ロングプレス時に実行される
    @IBAction func longPressView(_ sender: AnyObject) {
        print("Long Press")
    }
}

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にアクションを設定。

import UIKit

class EdgeSbViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    /// エッジ時に実行される
    @IBAction func edgeView(_ sender: AnyObject) {
        print("edge")
    }
}