UIScrollViewの使い方 その５

Tweet

サイトを移行しました。
iPhoneアプリと、そのプログラム



さて前回（UIScrollViewの使い方　その４）は、
タッチイベントは取得出来るようになったけれども、
スクロールができなくなってしまった、という問題が発生したのでした。

そこで、
・２本指でスワイプしたときには、スクロール動作。
・２本指でピンチイン・アウトしたときには、拡大縮小動作。
・１本指で画面をタッチした場合には座標取得
となるような、プログラムを作ってみましょう。

この方法を用いれば、指が２本の時は画面の拡大縮小移動を行ない、
指が１本であれば線を引くといったような動作が可能になるため、
多くのドローソフトではこのジェスチャが使われているようです。


この機能を実現するためには、
UIScrollViewを継承してオリジナルのScrollViewクラスを作成し、
touchesBegan:withEventメソッドなどをオーバライトする必要があります。



上図で説明すると（何度も、同じ図を使いまわしていますが ^^; ）
２本指でタッチされた場合には、通常通りScrollViewの動作を行い、
１本指でタッチされた場合には、スクローズせずに、下のViewにタッチイベントを投げるような、
独自ScrollViewクラスを作成します。今回はMyScrollViewという名前でクラスを作成しました。

MyScrollView.h

@interface MyScrollView : UIScrollView {
}
@end

MyScrollView.m

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
	if( [touches count] == 1 ){
		self.scrollEnabled = NO;
	} else {
		self.scrollEnabled = YES;
	}
	
	if (!self.dragging) {
		[self.nextResponder touchesBegan: touches withEvent:event]; 
	} 		
	[super touchesBegan: touches withEvent: event];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
	if (!self.dragging) {
		[self.nextResponder touchesMoved: touches withEvent:event]; 
	}		
	[super touchesMoved: touches withEvent: event];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
	if (!self.dragging) {
		[self.nextResponder touchesEnded: touches withEvent:event]; 
	}		
	[super touchesEnded: touches withEvent: event];
	
}

ポイントはtouchesBegan:withEventメソッドの最初の5行です。
タップされた指の数によって、スクロールをするかしないかを決定しています。
残りの部分は、レスポンダチェーンの先にあるインスタンスに処理を投げるプログラムです。


ここまでで、タッチされた指の本数によって、
スクロールとタッチ動作を分離するScrollViewクラスが作成できました。
あとは、ViewControllerクラスでこのScrollViewクラスのインスタンスを作成＆登録するだけです。

scrollViewController.h

@interface scrollViewController : UIViewController
{
	MyScrollView *scrollView;
	UIImageView *imageView;
}

scrollViewController.m

- (void)viewDidLoad {
	[super viewDidLoad];
	
	scrollView = [[MyScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
	[self.view addSubview:scrollView];
	[scrollView release];
	
	imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"test.jpg"]];
	scrollView.contentSize = imageView.frame.size;
	[scrollView addSubview:imageView];
	[imageView release];
	
	scrollView.contentSize = imageView.frame.size;
	scrollView.delegate = self; 
	scrollView.minimumZoomScale = 0.5;
	scrollView.maximumZoomScale = 4.0;
	scrollView.delaysContentTouches = NO;
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)_scrollView 
{
	return imageView;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
}

viewDidLoadメソッドの３行目から５行目で、
作成したScrollViewクラスのインスタンスを作成し、
Viewに登録しています。
この部分は、これまでIB側で部品を画面上に配置することで行なってきたことを
Xcodeで記述しているだけです。
scrollView.userInteractionEnabled=NO;の行を消した以外は、前回とほとんど同じですね〜。
後は、touchesBegan:withEventメソッドなどの中に座標を計算するプログラムを書けば完成です。


プロジェクトファイルをココに置いておきます。
参考にしてみてください。
scroll4.zip