対象:
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のアウトレットも作成しておこう。

?
1
2
3
4
5
6
7
#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を追加すれば完成だ。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#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)
新着情報
【オープンソースソフトウェア環境構築】Apple silicon Macで開発環境を構築
【Rust Tips】Actix webでJSONをPOSTする
【Rust Tips】コマンドライン引数を取得する
Copyright© 2004-2019 モバイル開発系(K) All rights reserved.
[Home]