[XCODE] iPhone上の画像を簡単にドラッグするUIGestureRecognizerの使い方

今日は、iPhoneアプリで画像などをドラッグする方法を学んだので、ブログに残しておきたいと思います。

ドラッグを感知するUIGestureRecognizer

ドラッグを簡単に感知する方法として、UIGestureRecognizerのうちUIPanGestureRecognizerを利用します。UIGestureRecognizerについては、『UIViewにタップした際のイベントを登録する』を参考にしてみて下さい。

今回は、以下のような画面を使います。背景白色のUIViewの上に、UIImageViewを乗せます。今回は、ユーザーのドラッグ操作に合わせて、UIImageViewの位置を変更してみました。

UIPanGestureRecognizerの動作を登録する

背景白色のUIView上で、ユーザーがドラッグをした場合に、指定したメソッドが呼び出されるように設定します。

- (void)viewDidLoad {
    [super viewDidLoad];

  // drag
  UIPanGestureRecognizer *pan = [[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)] autorelease];
  [self.view addGestureRecognizer:pan];
}

UIPanGestureRecognizerのインスタンス作成時に、ドラッグされた際に呼び出すメソッドを指定します。今回は、selfのpanAction:というメソッドを呼び出すように指定しています。

その後、UIViewのaddGestureRecognizerメソッドを使って、作成したUIPanGestureRecognizerインスタンスをUIViewに登録します。

ドラッグが発生した際に、呼び出されるメソッドでは

以下のような実装を行っています。panAction:はユーザーがドラッグしている間、何度も呼び出されます。

- (void)panAction : (UIPanGestureRecognizer *)sender {

  // ドラッグで移動した距離を取得する
  CGPoint p = [sender translationInView:self.view];

  // 移動した距離だけ、UIImageViewのcenterポジションを移動させる
  CGPoint movedPoint = CGPointMake(imgView.center.x + p.x, imgView.center.y + p.y);
  imgView.center = movedPoint;

  // ドラッグで移動した距離を初期化する
  // これを行わないと、[sender translationInView:]が返す距離は、ドラッグが始まってからの蓄積値となるため、
  // 今回のようなドラッグに合わせてImageを動かしたい場合には、蓄積値をゼロにする
  [sender setTranslation:CGPointZero inView:self.view];
}

この実装だけで、ユーザーの指の動きに合わせて、画像の位置を変える事が出来ました。カンタン(*´∇｀*)

参考

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

Event Handling Guide for iOS

UIGestureRecognizer Class Reference

UIPanGestureRecognizer Class Reference

最後に

iPhoneアプリ作成をしていると、良く便利な基盤がそろっているなぁと思います。うん、便利。いや、まだ奥深いところに到達していないだけかもですが。。

UIGestureRecognizerは他にも色々と種類があるので、使えるようになると良いなぁ♪(´ε｀ )