1. TOP>
2. iOS Objective-C, Swift Tips>
3. ピンチイン／ピンチアウトで画像を拡大／縮小

ピンチイン／ピンチアウトで画像を拡大／縮小

iOSでユーザのピンチイン／ピンチアウト操作によって画像を拡大／縮小するために必要な事は概ね以下になる。

1. 表示する画像(JPEG等)を準備
2. Main.storyboardにUIScrollViewを貼り付ける
3. UIScrollViewの上にUIImageViewを貼り付ける
4. UIImageViewで表示する画像を指定
5. UIScrollViewDelegateプロトコル使用を宣言
6. UIScrollViewの最小／最大倍率を設定
7. UIScrollViewのインスタンスにデリゲート割り当て
8. UIImageViewのインスタンスを返すviewForZoomingInScrollViewメソッドを作成

まず、ImageViewで表示する画像を用意する。表示したい画像をProject Navigatorにドラッグし、Xcodeで使えるようにする。この作業を行わないとImageViewでこの画像を選択できない。

次に、Main.storyboardにScrollViewを貼り付け、その上にImageViewを貼り付ける。Attributes InspectorでImageViewのImageプロパティをクリックし、先ほど追加した画像を選択する。

また、ImageViewのModeは"Aspect Fit"（画像のアスペクト比を維持しながらImageView内で画像がすべて表示される）にでもしておこう。この例では画面いっぱいにImageViewを貼り付けてある。

コードではViewController.hではUIScrollViewDelegateプロトコル使用を宣言しておく。追加したScrollViewとImageViewのアウトレットも作成しておこう。

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController  <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

ViewController.mのviewDidLoadでScrollViewのminimumZoomScaleプロパティとmaximumZoomScaleプロパティを設定し、デリゲートを割り当てる。今回は最小倍率が等倍、最大倍率が3倍とした。最後にImageViewのインスタンスを返すviewForZoomingInScrollViewを追加すれば完成だ。

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize scrollView;
@synthesize imageView;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    scrollView.minimumZoomScale = 1.0;
    scrollView.maximumZoomScale = 3.0;
    scrollView.delegate = self;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return self.imageView;
}

@end

• UIScrollView Class Reference
• UIImageView Class Reference
• UIScrollViewDelegate Protocol Reference