見出し画像

【Objective-C】UIScrollViewにUIImageViewを表示させ、拡大縮小まで対応させる方法【Xcode10.1対応】

こういう人向けに発信しています。
・UIImageViewを拡大・縮小表示させたいと考えている人
・ファイルビュワーなどを実装したい人
・Objective−c 初心者〜中級者

用意について

(1)ViewController.h
(2)ViewController.m
(3)かなり大きめの画像

大きめの画像については勉強用の画像です。
スクリーンショットでもいいですよ。
Shift+Command + 3でmacならスクリーンショット撮れます。
こちらをXcodeに追加して下さい。

ViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>{
    UIButton *btn;
    UIScrollView *scrollView;
    UIImageView *imageView;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initButton];
    // Do any additional setup after loading the view, typically from a nib.
}

-(void)initButton{
    btn = [[UIButton alloc]initWithFrame:CGRectMake(0,30.0f, self.view.bounds.size.width, 10.0f)];
    [btn setTitle:@"ボタン:イベント" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; //有効時
    [btn addTarget:self action:@selector(tappedButton:)
        forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:btn];
}

-(void)tappedButton:(UIButton*)button{
    // ここに何かの処理を記述する
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"イベントを発生させますか?" message:nil preferredStyle:UIAlertControllerStyleAlert];
    
    //preferredStyle:UIAlertControllerStyleActionSheet = アクションシート
    //preferredStyle:UIAlertControllerStyleAlert = アラートビュー
    [alertController addAction:[UIAlertAction actionWithTitle:@"はい" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
        //yesボタンが押された時の処理
        [self event];

    }]];
    [alertController addAction:[UIAlertAction actionWithTitle:@"いいえ" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
        // cancelボタンが押された時の処理

    }]];
    
    [self presentViewController:alertController animated:YES completion:nil];

}

- (void)event{
    CGRect rect = CGRectMake(0, self.view.frame.size.height /5, self.view.frame.size.width,self.view.frame.size.height*4/5);
    scrollView = [[UIScrollView alloc] initWithFrame:rect];
    UIImage *image = [UIImage imageNamed:@"demePhotoNote.jpg"];
    
    rect.origin.y = 0;
    imageView = [[UIImageView alloc] initWithFrame:rect];

    imageView.contentMode = UIViewContentModeScaleAspectFit;  //画像の表示方法の種類
    
    imageView.image = image;  //画像表示後に
    
    scrollView.backgroundColor = [UIColor grayColor];
    
    
    //タップのジェスチャー
    UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget: self action: @selector(doubleTap:)];
    tapGestureRecognizer.numberOfTapsRequired = 2;
    // ダブルタップだけに反応する。(4連続タップしたら、2回反応しますけど)
    [scrollView addGestureRecognizer: tapGestureRecognizer];
    
    
    [scrollView addSubview:imageView];

    
    scrollView.contentSize = imageView.bounds.size;
    scrollView.bounces = NO;

    [self.view addSubview:scrollView];
    
    //拡大/縮小対応
    scrollView.delegate = (id)self;
    scrollView.minimumZoomScale = 1.0;
    scrollView.maximumZoomScale = 3.0;
}

//拡大/縮小対応
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    for (id subview in scrollView.subviews) {
        if ([subview isKindOfClass:[UIImageView class]]) {
            return subview;
        }
    }
    return nil;
}

// ダブルタップで呼ばれるアクションメソッド
- (void)doubleTap: (UITapGestureRecognizer *)recognizer {
    // ダブルタップが終わったら
    if (recognizer.state == UIGestureRecognizerStateEnded) {
        // Scroll Viewの拡大率が等倍なら
        if (scrollView.zoomScale < 1.5) {
            CGPoint tappedPoint = [recognizer locationInView: imageView];
            // タップ位置を中心にして拡大するよう、タップ位置を取得
            [scrollView zoomToRect: CGRectMake(tappedPoint.x , tappedPoint.y , 160.0, 160.0) animated: YES];
            // 拡大
        } else { // 倍だったら
            [scrollView zoomToRect: CGRectMake(0.0, 0.0, scrollView.frame.size.width, scrollView.frame.size.height) animated: YES];
        }
    }
}

@end

祝辞

拡大・縮小の実装にあたり、
こちらの記事がとても参考になりました。
有益な記事をありがとうございます。

https://lab.dolice.net/blog/2013/07/06/objc-ui-scroll-view-zooming/

ダブルタップ系はこちらをコード見ました。
素晴らしかったです。
https://ja.stackoverflow.com/questions/16344/%E3%83%80%E3%83%96%E3%83%AB%E3%82%BF%E3%83%83%E3%83%97%E3%81%A7uiimageview%E3%82%92%E3%82%BA%E3%83%BC%E3%83%A0-%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93


いいなと思ったら応援しよう!