[Objective-C] タップによるズーム機能の実装メモ

[PDF] iOS Scroll Viewプログラミングガイドを読んで、タップによるズーム機能が紹介されていたので、実際に作ってみたもののメモです。

実際のサンプルがgithubに公開されているので、そちらを見てみると分かりやすいと思います。
ここでは、ガイドラインを元に自分でコードを書いてみて気づいた点などを書いていきます。

##タップによるズーム

ピンチジェスチャに関しては基本的な実装をフレームワーク側で行っていますが、タップによるズーム（ダブルタップでズーム、など）を実装するにはアプリケーション側での実装が必要です。

####該当ビューのサブクラス

タップによるズームをさせたいビューをサブクラス化し、タッチに対しての制御を実装します。
また、いくつかのプロトコルも定義します。

#####SMPView.h

@protocol TapDetectingViewDelegate;

@interface SMPView : UIView

@property (assign, nonatmic) id<TapDetectingViewDelegate> delegate;

@end

@protocol TapDetectingViewDelegate <NSObject>

@optional
- (void)tapDetectingView:(SMPView *)view goSingleTapAtPoint:(CGPoint)tapPoint;
- (void)tapDetectingView:(SMPView *)view goDoubleTapAtPoint:(CGPoint)tapPoint;
- (void)tapDetectingView:(SMPView *)view goTwoFingerTapAtPoint:(CGPoint)tapPoint;

@end

プロトコルのメソッドは、このビューがタッチを識別し、 シングルタップ 、 ダブルタップ 、 2本指タップ を判断したあとにデリゲートに対してプロトコロで定義されたメソッドを呼び出します。

#####SMPView.m

@interface SMPView ()

@property (assign, nonatomic) BOOL multipleTouches;
@property (assign, nonatomic) BOOL twoFingerTapIsPossible;
@property (assign, nonatomic) CGPoint tapLocation;

- (void)handleSingleTap;
- (void)handleDoubleTap;
- (void)handleTwoFingerTap;

@end

multipleTouches、twoFingerTapIsPossibleプロパティは、それぞれマルチタッチかどうか、2本指タップかどうかを表すBOOL値です。
タッチ開始時と終了時で適切にハンドリングし、デリゲートメソッドを呼び出すのに利用します。

@implementation SMPView

- (id)initWithFrame:(CGRect)frame
{
	if (self = [super initWithFrame:frame]) {
		// マルチタッチを有効化
		self.multipleTouchEnabled = YES;
		
		self.twoFingerTapIsPossible = NO;
		self.multipleTouches        = NO;
	}

	return self;
}

// ----------------------------------------------
// タッチ制御
// ----------------------------------------------

// タッチ開始処理
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
	// 保留中のhandleSingleTapメッセージがあればそれを取り消す
	[NSObject cancelPreviousPerformRequestsWithTarget:self
                                             selector:@selector(handleSingleTap)
                                               object:nil];

	// タッチの状態を更新
	if ([[event touchesForView:self] count] > 1) {
		self.multipleTouches = YES;
	}
	if ([[event touchesForView:self] count] > 2) {
		// 指が3本以上触れていたら2本指タップの状態を`NO`に
		self.twoFingerTapIsPossible = NO;
	}
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    // touches.countは話された指の数
    // [event touchesForView:self].countは、直前までViewに触れていた指の数
	BOOL allTouchesEnded = ([touches count] == [[event touchesForView:self] count]);

	// まず単純なシングル／ダブルタップを判定する
	// 複数回のタッチが行われていない場合のみ、シングル／ダブルタップの可能性がある
	if (!self.multipleTouches) {
		UITouch *touch = [touch anyObject];
		self.tapLocation = [touch locationInView:self];

		// シングルタップ
		if ([touch tapCount] == 1) {
			[self performSelector:@selector(handleSingleTap)
                      withObject:nil
                      afterDelay:0.35];
		}
		else if ([touch tapCount] == 2) {
			[self handleDoubleTap];
		}
	}

	// 複数回のタッチが行われていた場合は、それが2本指のタップだったかどうか、
	// また、そうである状況が否定されていないか確認する
	else if (self.multipleTouches && self.twoFingerTapIsPossible) {

		// ケース1: 両方のタッチの同時の終了の場合
		if ([touches count] == 2 && allTouchesEnded) {
			int i = 0;
			NSUinteger tapCounts[2];
			CGPoint tapLocation[2];

			for (UITouch *touch in touches) {
				tapCount[i]    = [touch tapCount];
				tapLocation[i] = [touch locationInView:self];
				i++;
			}

			if (tapCounts[0] == 1 && tapCounts[1] == 1) {
				// 両方ともシングルタップであれば、これは2本指のタップ
				self.tapLocation = midpointBetweenPoints(tapLocations[0], tapLocations[1]);
				[self handleTwoFingerTap];
			}
		}

		// ケース2: これが1回のタッチの終了で、もう1つはまだ終了していない場合
		else if ([touches count] == 1 && !allTouchesEnded) {
			UITouch *touch = [touches anyObject];

			if ([touch tapCount] == 1) {
				// タッチが1回のタップであれば、その位置を保存し、
				// 2番目のタッチの位置と平均値を求められるようにする
				self.tapLocation = [touch locationWithView:self];
			}
			else {
				self.twoFingerTapIsPossible = NO;
			}
		}

		// ケース3: これが2つのタッチの2番目の終了である場合
		else if ([touches count] == 1 && allTouchesEnded) {
			UITouch *touch = [touches anyObject];

			if ([touch tapCount] == 1) {
				// 最後のタッチがシングルタップであれば、これは2本指のタップ
				self.tapLocation = midpointBetweenPoints(self.tapLocation, [touch locationInView:self]);
				[self handleTwoFingerTap];
			}
		}
	}

	// すべてのタッチが終了した場合、タッチの監視状態をリセットする
	if (allTouchesEnded) {
		self.twoFingerTapIsPossible = YES;
		self.multipleTouches = NO;
	}
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
	self.twoFingerTapIsPossible = YES;
	self.multipleTouches = NO;
}

// ----------------------------------------------
// タップイベント制御
// ----------------------------------------------

- (void)handleSingleTap
{
	if ([self.delegate respondsToSelector(@selector(tapDetectingView:goSingleTapAtPoint:)]) {
		[self.delegate tapDetectingView:self goSingleTapAtPoint:self.tapLocation];
	}
}

- (void)handleDoubleTap
{
	if ([self.delegate respondsToSelector(@selector(tapDetectingView:goDoubleTapAtLocation:)]) {
		[self.delegate tapDetectingView:self goDoubleTapAtLocation:self.tapLocation];
	}
}

- (void)handleTwoFingerTap
{
	if ([self.delegate respondsToSelector(@selector(tapDetectingView:goTwoFingerTapAtLocation:)]) {
		[self.delegate tapDetectingView:self goTwoFingerTapAtPoint:self.tapLocation];
	}
}

@end

// ----------------------------------------------
// ヘルパー関数
// ----------------------------------------------

CGPoint midpointBetweenPoints(CGPoint a, CGPoint b)
{
	CGFloat x = (a.x + b.x) / 2.0;
	CGFloat y = (a.y + b.y) / 2.0;
	return CGPointMake(x, y);
}

##コントローラクラスでデリゲートを実装する

コントローラ側では、ScrollViewとズーム対象のビューを入れ子にして生成します。
その上で、ScrollViewのdelegateプロパティに、自分自身をセットします。（つまり普通のdelegateの使い方です）

// SMPViewController.m

// デリゲートのみ記載

#define ZOOM_STEP 1.5

#pragma mark delegate methods

- (void)tapDetectingView:(SMPView *)view goSingleTapAtPoint:(CGPoint)tapPoint
{
	// シングルタップは処理しない
}

// ダブルタップ時の処理
- (void)tapDetectingView:(SMPView *)view goDoubleTapAtPoint:(CGPoint)tapPoint
{
	float newScale = self.scrollView.zoomScale / ZOOM_STEP;
	CGRect zoomRect = [self zoomRectForScale:newScale withCenter:tapPoint];
	[self.scrollView zoomToRect:zoomRect animated:YES];
}

// 2本指タップ時の処理
- (void)tapDetectingView:(SMPView *)view goTwoFingerTapAtPoint:(CGPoint)tapPoint
{
	float newScale = self.scrollView.zoomScale / ZOOM_STEP;
	CGRect zoomRect = [self zoomRectForScale:newScale withCenter:tapPoint];
	[self.scrollView zoomToRect:zoomRect animated:YES];
}

#pragma mark helper function

- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center
{
	CGRect zoomRect;

	// scaleで割ることで、ズーム対象となる矩形のサイズを決める
	zoomRect.size.height = self.scrollView.frame.size.height / scale;
	zoomRect.size.width  = self.scrollView.frame.size.width  / scale;

	// 矩形の中心をズームの中心にする
	zoomRect.origin.x = center.x - (zoomRect.size.width  / 2.0);
	zoomRect.origin.y = center.y - (zoomRect.size.height / 2.0);

	return zoomRect;
}

###解説

基本的にどのデリゲートメソッドも、渡された位置を元に処理を行っています。
処理の中心になるのがzoomRectForScale:withCenter:メソッドです。

これは、渡されたスケールと位置から、ズーム対象となる矩形を生成して返します。
zoomRectのイメージは、生成された矩形が元のスケールに戻るように計算される、と（自分は）イメージしています。
（つまり、小さい矩形なら、「それを元に戻す＝拡大」、大きい矩形なら、「それを元に戻す＝縮小」、というイメージ）

あとは生成された矩形を、ScrollViewのzoomToRect:animated:メソッドに渡してやることでズームが実行されます。