[XCODE] Viewのサイズをピンチジェスチャーで変更する

こんにちは、@yoheiMuneです。

今日は、ピンチジェスチャーを行った場合に、UIImageViewなどのサイズを拡大／縮小する方法を学びましたので、ブログに残したいと思います。

ピンチジェスチャーで、画像の拡大を簡単に行う

ピンチジェスチャーとは、2本指で画面に触れ、2本指が離れる方向にドラッグするジェスチャーです。GooglMapや、写真アプリで画像の拡大／縮小に使う、あれです！！

ピンチジェスチャーで拡大／縮小を行う方法として、UIGestureRecognizerのうち、UIPinchGestureRecognizerというピンチジェスチャー用のGestureRecognizerを使います。UIGestureRecognizerについては、"UIViewにタップした際のイベントを登録する"を参考にしてみて下さい。

今回は、以下のような画面を使います。画面上でピンチジェスチャーを行うと、海の画像が大きくなったり、小さくなったりします。

ピンチジェスチャーを登録する

まずは、UIPinchGestureRecognizerのインスタンスを作成して、ピンチジェスチャーを受けつけるViewにイベントとして登録します。以下のように実装する事で実現出来ます。

- (void)viewDidLoad {
  [super viewDidLoad];

  // ピンチジェスチャーを登録する
  UIPinchGestureRecognizer *pinch = [[[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchAction:)] autorelease];
  [self.view addGestureRecognizer:pinch];
}

上記例では、ピンチジェスチャーが発生した場合に、selfのpinchAction:というメソッドを呼び出すように設定しています。

ピンチジェスチャーを感知したら、Imageを拡大／縮小する

ピンチジェスチャー発生時に呼び出されるメソッドでは、以下のような実装を行う事で、Imageの拡大／縮小を行うことが出来ます。

// ピンチジェスチャー発生時に呼び出されように設定したメソッド。
// ピンチジェスチャー中に何度も呼び出される。
- (void)pinchAction : (UIPinchGestureRecognizer *)sender {

  // ピンチジェスチャー発生時に、Imageの現在のアフィン変形の状態を保存する
  if (sender.state == UIGestureRecognizerStateBegan) {
    currentTransForm = imgView.transform; 
    // currentTransFormは、フィールド変数。imgViewは画像を表示するUIImageView型のフィールド変数。
  }

  // ピンチジェスチャー発生時から、どれだけ拡大率が変化したかを取得する
  // 2本の指の距離が離れた場合には、1以上の値、近づいた場合には、1以下の値が取得できる
  CGFloat scale = [sender scale];

  // ピンチジェスチャー開始時からの拡大率の変化を、imgViewのアフィン変形の状態に設定する事で、拡大する。
  imgView.transform = CGAffineTransformConcat(currentTransForm, CGAffineTransformMakeScale(scale, scale));

}

ここでは、アフィン変換を用いて、ピンチジェスチャー発生時からの拡大率の変化に合わせて、imgViewを拡大／縮小しています。

参考資料

以下資料を参考にしました。ありがとうございます。

Event Handling Guide for iOS

UIPinchGestureRecognizer Class Reference

最後に

UIGestureRecognizerとアフィン変換を用いる事で、簡単にViewの移動／拡大縮小／回転を行う事が出来ました。便利でイイですね♪(´ε｀ )アフィン変換はまだまだ勉強中なので、理解したらブログにも書けたら良いなぁ。