UIScrollViewの使い方(2本指でスクロール編)

このエントリーを含むはてなブックマークはてなブックマーク - UIScrollViewの使い方(2本指でスクロール編)

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

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

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

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

UIScrollView8

上図で説明すると(何度も、同じ図を使いまわしていますが ^^; )2本指でタッチされた場合には、通常通りScrollViewの動作を行い、1本指でタッチされた場合には、スクローズせずに、下の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
<UIScrollViewDelegate>{
	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メソッドの3行目から5行目で、作成したScrollViewクラスのインスタンスを作成し、Viewに登録しています。この部分は、これまでIB側で部品を画面上に配置することで行なってきたことをXcodeで記述しているだけです。

scrollView.userInteractionEnabled=NO;の行を消した以外は、前回とほとんど同じですね~。後は、touchesBegan:withEventメソッドなどの中に座標を計算するプログラムを書けば完成です。

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

2 Responses to “UIScrollViewの使い方(2本指でスクロール編)”

  1. [...] iPhoneアプリと、そのプログラム iPhoneアプリを作る際に役立つプログラムを置いています コンテンツへ移動 ホーム紹介 ← UIScrollViewの使い方(拡大縮小編) UIScrollViewの使い方(2本指でスクロール編) → [...]

  2. [...] This post was mentioned on Twitter by memo_0x0c, UKYO Kazuma (20). UKYO Kazuma (20) said: UIScrollViewの使い方(2本指でスクロール編) | iPhoneアプリと、そのプログラム http://htn.to/JvZrdZ [...]

Leave a Reply

You must be logged in to post a comment.