kujiraxo’s diary

日々の作業メモ。

Swiftで画像アプリ(その9)〜画像の拡大縮小

画像をピンチイン/アウト、ダブルタップして拡大/縮小できるようにする。

 

まずはSubViewControllerにおける構成を変更する。
ViewController上に置いていたImageViewは一度削除。
ScrollViewを新たに設置し、その上にaddSubViewでImageViewをのせる進め方にする。

Main.storyboardからImageViewを削除。SubViewController.swiftからも@IBOutletのImageViewの記述を削除。
Main.storyboardでSubView上にScrollViewを追加。

f:id:kujiraxo:20180827084209p:plain


SubViewControllerのクラスにUIScrollViewDelegeteを追記し、ScrollViewとOutlet接続する。

f:id:kujiraxo:20180827084225p:plain


あとは下記の参考サイトに記載のとおり、addSubviewでImageViewを追加し、必要なコードを書いていくだけ。

 

【Swift 3】UICollectionViewのセル上に乗せた画像をピンチで拡大する【UICollectionView】 | うるおいらんど

 

 

import UIKit

 

class SubViewController: UIViewController, UIScrollViewDelegate {

    

    @IBOutlet weak var scrollView: UIScrollView!

    var selectedImg: UIImage!

    var imageView:UIImageView!

    

    override func viewDidLoad() {

        super.viewDidLoad()

        

        // デリゲートを設定

        scrollView.delegate = self

        

        // 最大・最小の大きさを決める

        scrollView.maximumZoomScale = 4.0

        scrollView.minimumZoomScale = 1.0

        

        // imageViewを生成

        imageView = UIImageView()

        imageView.frame = CGRect(x:0,y:0,width:view.frame.width,height:view.frame.height)

        scrollView.addSubview(imageView)

 

        // imageViewにセグエで飛ばされてきた画像を設定

        imageView.image = selectedImg

        imageView.contentMode = UIViewContentMode.scaleAspectFit

 

        // ダブルタップ対応

        let doubleTap = UITapGestureRecognizer(target:self,action:#selector(SubViewController.doubleTap(gesture:)))

        doubleTap.numberOfTapsRequired = 2

        imageView.isUserInteractionEnabled = true

        imageView.addGestureRecognizer(doubleTap)

 

    }

    func viewForZooming(in scrollView: UIScrollView) -> UIView? {

        return self.imageView

    }

    func scrollViewDidZoom(_ scrollView: UIScrollView) {

        print("end zoom")

    }

    func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {

        print("start zoom")

    }

    @objc func doubleTap(gesture:UITapGestureRecognizer) -> Void {

        if(self.scrollView.zoomScale < 3){

            let newScale:CGFloat = self.scrollView.zoomScale*3

            let zoomRect:CGRect = self.zoomForScale(scale:newScale, center:gesture.location(in:gesture.view))

            self.scrollView.zoom(to:zoomRect, animated: true)

        } else {

            self.scrollView.setZoomScale(1.0, animated: true)

        }

    }

    func zoomForScale(scale:CGFloat, center: CGPoint) -> CGRect{

        var zoomRect: CGRect = CGRect()

        zoomRect.size.height = self.scrollView.frame.size.height / scale

        zoomRect.size.width = self.scrollView.frame.size.width  / scale

        

        zoomRect.origin.x = center.x - zoomRect.size.width / 2.0

        zoomRect.origin.y = center.y - zoomRect.size.height / 2.0

        

        return zoomRect

    }

    

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }

 

}


ダブルタップやピンチ操作で拡大・縮小が確認できる。
ちなみにシミュレータ上でのピンチ操作はoptionを押しながらドラッグでした。

f:id:kujiraxo:20180827084241p:plain

 

MyPicApp-008