見出し画像

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

M_Kaku堂

概要

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

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

今回

をハイ、レッツゴ🕺

前準備

念の為、

  1. バックアップ

  2. 新しいクラス

  3. ビューコントローラの追加

  4. イニシャルビューの変更

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

こんな感じで〜〜〜〜

本題

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

部品を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)
    }
}

⒉シミュレータを実行

まずは大きく伸ばして〜〜〜
確かに状態をそのまま引き継いで、そこから変更できるね🕺

ブラッシュアップ

今回もAutoLayoutくらいかな💦

黄色の丸をクリック
confirmをクリックして、その後、update frameを選択して、Fix…ボタンをクリック
で解消💃
ブラッシュアップ後も問題なしを確認して、ハイ完了🕺

今回のポイント

ラベルを写真なんかに変更して、ScrollViewなんかと組みあせて使うと、

よくある画像集アプリなんかの拡大縮小機能を実装するのに使ってるんだ。

ってイメージが湧いてもらえれば十分かな💦
ここではやらないけど、実際、興味がある人はやってみてね

Apple公式

さて、次回は

をレッツゴする🕺

いいなと思ったら応援しよう！