対象:
Objective-C

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

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
(2013/10/08)

新着情報
【iOS Objective-C, Swift Tips】バッジの表示(Swift)
【iOS Objective-C, Swift Tips】画像の向きを指定して保存する(Swift)
【iOS Objective-C, Swift Tips】UIImagePickerControllerの表示を日本語にする(Swift)

Copyright(C) 2004-2016 モバイル開発系(K) All rights reserved.
[Home]