【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