2014年04月24日

【iOS開発】UIScrollViewでピンチイン/アウトによる拡大縮小

20140424_ios_scrollview_1.png

画像ビューア的な画面を実装する際にピンチイン/アウトで拡大縮小は当然できるようにしたいところです。
ありがたいことにUIScrollViewにはデフォルトでピンチイン/アウトによる拡大縮小機能が実装されています。
単純に拡大縮小のみをする場合は、UIScrollViewのデリゲートメソッドviewForZoomingInScrollViewを実装して拡大したいViewを返すようにすればOKです。

20140424_ios_scrollview_2.png

まずはヘッダファイルにUIScrollViewDelegateの使用を明示します。

MyViewController.h
@interface MyViewController : UIViewController <UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end


あとはScrollView.delegateにViewController自身を設定し、viewForZoomingInScrollViewの処理を記述すればOKです。

MyViewController.m
- (void)viewDidLoad
{
[super viewDidLoad];

// ScrollViewのdelegateをViewController自身に設定
_scrollView.delegate = self;
_scrollView.minimumZoomScale = 0.5f; // 最小拡大率
_scrollView.maximumZoomScale = 3.0f; // 最大拡大率
_scrollView.zoomScale = 1.0f; // 表示時の拡大率
}

/**
* 拡大縮小対象のViewを返す
*/
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}


これだけで拡大縮小が機能します。
viewForZoomingInScrollViewで返すViewは一つだけなので注意してください。複数のViewを対象にしたい場合は大きなViewで一つにまとめるなどする必要があります。

ただし、このままでは拡大縮小時にViewの中心位置がずれてしまい少しみっともないことになるので、拡大率に合わせてViewの中心位置を変更する処理を入れておくときれいに拡大縮小されるようになります。

/**
* ScrollViewが拡大縮小されるたびに呼び出される
*/
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
[self updateImageCenter];
}

/**
* ScrollViewの拡大縮小終了時に呼び出される
*/
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView
withView:(UIView *)view
atScale:(CGFloat)scale
{
[self updateImageCenter];
}

/**
* 拡大縮小された画像のサイズに合わせて中央座標を変更する
*/
- (void)updateImageCenter
{
// 画像の表示サイズを取得
CGSize imageSize = self.imageView.image.size;
imageSize.width *= self.scrollView.zoomScale;
imageSize.height *= self.scrollView.zoomScale;

// サブスクロールビューのサイズを取得
CGRect bounds = self.scrollView.bounds;

// イメージビューの中央の座標を計算
CGPoint point;
point.x = imageSize.width / 2;
if (imageSize.width < bounds.size.width) {
point.x += (bounds.size.width - imageSize.width) / 2;
}
point.y = imageSize.height / 2;
if (imageSize.height < bounds.size.height) {
point.y += (bounds.size.height - imageSize.height) / 2;
}
self.imageView.center = point;
}


サンプルファイルはこちらになります。
ScrollViewSample.zip


詳解 Objective-C 2.0 第3版
荻原 剛志
ソフトバンククリエイティブ
売り上げランキング: 8,923



タグ:Objective-C IOS
このエントリーをはてなブックマークに追加
posted by 割れたCDR at 00:18 | Comment(0) | TrackBack(0) | iOS開発 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。