頭と尻尾はくれてやる!

パソコンおやじのiPhoneアプリ・サイト作成・運営日記


拡大したビューに乗ってるビューをドラッグしたい

iPhone/iPadアプリだと二本の指でぐにゅーんと画像なんかを拡大/縮小することができるのがあるよね。これはUIScrollViewを使えば実現できるんだけど、拡大/縮小する画像の上に別なビューがあってそれをドラッグしたいって場合はどうすればいいんだろう?ってお話。

頭と尻尾はくれてやる! / UIViewオブジェクトをドラッグする
↑ビューのドラッグはこんな感じでやる。

拡大はUIScrollViewDelegateの
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
メソッドで対象のオブジェクトを指定する(いつもながらこれ便利だよねえと感心しちゃうよ)。

ビューの構成はこんな感じで。
self.view
 |
 - scrollView ( UIScrollView )
   |
   - sheet ( UIView )
     |
     - imageView ( UIImageView )
     - circleView ( UIView )

上のUIScrollViewDelegateメソッドで拡大するビューを指定するのにsheetってビューを用意しといて、その上に拡大して見たい画像とドラッグ可能なcircleViewってのを乗せてる。

viewController内での処理は以下のような感じに。いろいろとはしょってるけど。
{
    //scrollView
    scrollView = [[[UIScrollView alloc] initWithFrame:(CGRect){0,0,width,height}] autorelease];
    scrollView.delegate = self;
    scrollView.minimumZoomScale = 1.f;
    scrollView.maximumZoomScale = 12.0f;
    [self.view addSubview:scrollView];

    //乗せるためのビュー
    sheet = [[[UIView alloc] initWithFrame:scrollView.bounds] autorelease];
    [scrollView addSubview:sheet];

    //画像
    UIImageView *imageView = [MyImageUtility makeImageViewForFileName:@"sasaki.png"];
    imageView.frame = (CGRect){0,0,320,imageView.height*320.f/imageView.width};
    [sheet addSubview:imageView];
        
    //サイズ指定
    sheet.frame = (CGRect){0,0, imageView.width , imageView.height };
    scrollView.contentSize = (CGSize){ imageView.width , imageView.height };

    //ドラッグするビュー
    UIView *circleView = [[[MyCircleView alloc] initWithRadius:30.f color:color center:] autorelease];
    [sheet addSubview:circleView];
    [MyGestureUtility setDragForView:circleView];
}

#pragma mark UIScrollViewDelegate method
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)aScrollView
{
    return sheet;
}
最初上のようにしてたんだけど、いざ使ってみると問題が発生。
拡大する前だと円(circleView)はドラッグできるんだけど、拡大した後だと円はドラッグできずにscrollViewが動いちゃうんだよ。

拡大時にドラッグできない!のスクショ

↑拡大するとドラッグできない!の図(これだけじゃわかんないよね)。

偶然発見した解決方法は左手の二本指で画像を押さえて、右手の指一本でドラッグする、というモノ。いや、そんなのいつ使えなくなるかわからないし、使いにくいったらありゃしない。レビューで★一つが並ぶのが目に見えてる。

どうしたものかなあと思って、ふと手持ちのお絵描きアプリはどうなってるんだろうといじってみたところ、scrollViewの移動は指二本でやってることに気が付いたよ。指二本で移動させて、指一本だと線が描けるって仕様。
なるほど〜!そうやって区別していたのか!

どうやって実装すればいいのかな?と思いつつ何かそれ用のがあるんじゃない?と思ってリファレンスを眺めたら、、、ちゃんとあるじゃない!
scrollView.panGestureRecognizer.minimumNumberOfTouches = 2;
↑これを追加すればいいだけ!
これで移動(パン)は指二本でやるんだぜって設定になる。素晴らしい!

拡大時にドラッグできた!のスクショ

↑ほら!ドラッグできた!の図(ご、ごめんなさい)。

<< iPhone/iPadの画面をReflectorでMacへ   TopPage  SpriteKitの2D物理エンジンで自動車っぽい動き >>

コメント


管理者にだけ表示を許可する
 

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/819-0fa32e99




Copyright ©頭と尻尾はくれてやる!. Powered by FC2 Blog. Template by eriraha.

FC2Ad