【徒然iOS】気ままにUIKit65〜Pinch Gesture Recognizer 2つの指で部品を拡大縮小〜

M_Kaku堂

2023年3月23日 10:11

概要

このマガジンは四十を過ぎたおっさんが、

を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。

今回

をハイ、レッツゴ🕺

前準備

念の為、

バックアップ
新しいクラス
ビューコントローラの追加
イニシャルビューの変更

をいつも通りやってから本題へ💃

本題

ピンチリコグナイザーとは、

部品を2つの指で摘んで外側に広げたとき、または、内側に狭めたときを検知する部品

ピンチアウト：外側に広げる動作
ピンチイン：内側に狭める動作

⒈ラベルを配置して、アウトレット接続

⒉ピンチリコグナイザーをラベルに配置して、アクション接続

⒊コードを組み込み

//
//  ViewController.swift
//
import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var testLabel: UILabel!
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    //ピンチ時の呼び出しメソッド
    @IBAction func pinchLabel(sender: UIPinchGestureRecognizer) {
        //アフィン変換でラベルを拡大縮小する。
        testLabel.transform = CGAffineTransformMakeScale(sender.scale, sender.scale)
    }
}

コード書き換え〜〜〜

今回のコード（シンプルピンチ）

class PinchGestureViewController: UIViewController {

    @IBOutlet weak var myLabel: UILabel!
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    //ピンチ時の呼び出しメソッド
    @IBAction func myPinchLabel(_ sender: UIPinchGestureRecognizer) {
        myLabel.transform = CGAffineTransformMakeScale(sender.scale, sender.scale)
    }
}

⒋シミュレータ実行

と、ここで解説

「ピンチ時の呼び出しメソッド」は

ピンチしている指が移動する度に呼び出される。

ピンチが検知された瞬間の指と指の距離が基準値1.0となり、基準値に対する現在の拡大率が引数に含まれている。

👉ピンチの拡大率が2.0になったらアフィン変換によって部品の縦横も2倍する。逆に、ピンチの拡大率が0.5になったら部品の縦横も2分の1にするという流れである。

てことらしい👀

前回ピンチの拡大率を引き継ぐ

CGAffineTransformScaleを使ってピンチ開始時のアフィン変換を引き継いだアフィン変換を作っている。
👉サイズが元に戻ることなくピンチを再開することができる。

⒈コード組み込み

//
//  ViewController.swift
//
import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var testLabel: UILabel!
    var startTransform:CGAffineTransform!
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    //ピンチ時の呼び出しメソッド
    @IBAction func pinchLabel(sender: UIPinchGestureRecognizer) {
        if(sender.state == UIGestureRecognizerState.Began){
            //ピンチ開始時のアフィン変換をクラス変数に保持する。
            startTransform = testLabel.transform
        }
        //ピンチ開始時のアフィン変換を引き継いでアフィン変換を行う。
        testLabel.transform = CGAffineTransformScale(startTransform, sender.scale, sender.scale)
    }
}

を参考に、コードを書き換え〜〜〜

今回のコード（状態引継ぎピンチ）

class PinchGestureViewController: UIViewController {
    
    @IBOutlet weak var myLabel: UILabel!
    var startTransform:CGAffineTransform!
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    //ピンチ時の呼び出しメソッド
    @IBAction func myPinchLabel(_ sender: UIPinchGestureRecognizer) {
        if(sender.state == UIGestureRecognizer.State.began){
            //ピンチ開始時のアフィン変換をクラス変数に保持する。
            startTransform = myLabel.transform
        }
        //ピンチ開始時のアフィン変換を引き継いでアフィン変換を行う。
        myLabel.transform = CGAffineTransformScale(startTransform, sender.scale, sender.scale)
    }
}