I touchs: iOS: Photo Zooming

since: 2016/07/25
update: 2016/07/25
reference:
1. iOS APP 照片縮放 – Code Ranch

A. 新增專案:
1. iOS > Application > Single View Application > Next

2. > Next > Create

-----------------------------------------------------------------------------------------------

B. 設定 iOS 支援的最小版本:
專案 > General > Deployment Target: 8.0

-----------------------------------------------------------------------------------------------

C. 加入圖檔:
1. > 將圖檔拖拉到專案資料夾內

2. > 記得勾選 Copy items if needed
> Finish

-----------------------------------------------------------------------------------------------

D. 將預設的 View Controller 嵌入到 Navigation Controller 裡:
1. > Main.storyboard > 點選右邊 View Controller
> Editor > Embed In > Navigation Controller

2. 結果如下:

-----------------------------------------------------------------------------------------------

E. 開啟 ViewController.swift 修改如下:
import UIKit

//class ViewController: UIViewController {
//@update ###################################################
class ViewController: UIViewController, UIScrollViewDelegate {

    //@add ###################################################
    var scrollView: UIScrollView!
    var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // 把導覽列和工具列的半透明屬性設定好，確保導覽列和工具列會蓋在內容上。
        //@update ###################################################
        //self.navigationController?.navigationBar.translucent = true
        //self.navigationController?.toolbar.translucent = true

        // 產生圖片
        initImageInstance()

        // 產生 Scroll View
        initScrollViewContainer()

        // 加入偵測點擊事件
        setupGestureRecognizer()
    }

    //@add ###################################################
    // 要開始顯示子視圖時會執行
    override func viewWillLayoutSubviews() {
        setZoomScale()
    }

    //@add ###################################################
    // 產生圖片
    func initImageInstance(){
        self.imageView = UIImageView(image: UIImage(named: "Everest.jpg")!)
    }

    //@add ###################################################
    // 產生 Scroll View
    func initScrollViewContainer(){
        self.scrollView = UIScrollView(frame: CGRect(x: 0.0, y: 0.0, width: self.view.bounds.width, height: self.view.bounds.height))
        self.scrollView.backgroundColor = UIColor.blackColor()
        self.scrollView.contentSize = imageView.bounds.size
        self.scrollView.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]
        self.scrollView.delegate = self
        self.scrollView.addSubview(imageView)
        self.view.addSubview(scrollView)
    }

    //@add ###################################################
    // 設定一開始圖片縮放比例以及縮到最小情況下的比例
    func setZoomScale() {
        // 計算縮到最小情況下的比例
        let imageViewSize = imageView.bounds.size
        let scrollViewSize = scrollView.bounds.size
        let widthScale = scrollViewSize.width / imageViewSize.width
        let heightScale = scrollViewSize.height / imageViewSize.height
        scrollView.minimumZoomScale = min(widthScale, heightScale)

        // 設定一開始畫面出現時圖片的比例
        scrollView.zoomScale = min(widthScale, heightScale)
    }

    //@add ###################################################
    // 設定 ScrollView 到底要放大縮小裡頭的哪一個子視圖: imageView
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        return imageView
    }

    //@add ###################################################
    // 縮放時讓圖片永遠置中
    func scrollViewDidZoom(scrollView: UIScrollView) {
        let imageViewSize = imageView.frame.size
        let scrollViewSize = scrollView.bounds.size
        let verticalPadding = imageViewSize.height < scrollViewSize.height ? (scrollViewSize.height - imageViewSize.height) / 2 : 0
        let horizontalPadding = imageViewSize.width < scrollViewSize.width ? (scrollViewSize.width - imageViewSize.width) / 2 : 0

        scrollView.contentInset = UIEdgeInsets(top: verticalPadding, left: horizontalPadding, bottom: verticalPadding, right: horizontalPadding)
    }

    //@add ###################################################
    // 加入偵測點擊事件
    func setupGestureRecognizer() {
        //let singleTap = UITapGestureRecognizer(target: self, action: "navigationToggle:")
        //@update ###################################################
        let singleTap = UITapGestureRecognizer(target: self, action: #selector(ViewController.navigationToggle(_:)))
        singleTap.numberOfTapsRequired = 1
        scrollView.addGestureRecognizer(singleTap)

        //let doubleTap = UITapGestureRecognizer(target: self, action: "handleDoubleTap:")
        //@update ###################################################
        let doubleTap = UITapGestureRecognizer(target: self, action: #selector(ViewController.handleDoubleTap(_:)))
        doubleTap.numberOfTapsRequired = 2
        scrollView.addGestureRecognizer(doubleTap)

        // 在 "點一下" 的點擊事件中, 將 "點兩下" 事件設為無效
        singleTap.requireGestureRecognizerToFail(doubleTap)
    }

    //@add ###################################################
    // 點擊兩下後縮放圖片
    func handleDoubleTap(recognizer: UITapGestureRecognizer) {
        if (scrollView.zoomScale > scrollView.minimumZoomScale) {
            scrollView.setZoomScale(scrollView.minimumZoomScale, animated: true)
        } else {
            scrollView.setZoomScale(scrollView.maximumZoomScale, animated: true)
        }
    }

    //@add ###################################################
    // 點擊一下後導覽列出現與消失
    func navigationToggle(recognizer: UITapGestureRecognizer){
        if self.navigationController?.navigationBar.alpha == 0.0{
            showNavigation()
        } else {
            hideNavigation()
        }
    }

    //@add ###################################################
    // 顯示導覽列
    func showNavigation(){
        UIApplication.sharedApplication().setStatusBarHidden(false, withAnimation: UIStatusBarAnimation.Fade)

        UIView.animateWithDuration(0.2, delay: 0.0, options: [], animations: { () -> Void in
            self.navigationController?.navigationBar.alpha = 1.0
            self.navigationController?.toolbar.alpha = 1.0
            }, completion: nil)
    }

    //@add ###################################################
    // 隱藏導覽列
    func hideNavigation(){
        UIApplication.sharedApplication().setStatusBarHidden(true, withAnimation: UIStatusBarAnimation.Fade)

        UIView.animateWithDuration(0.2, delay: 0.0, options: [], animations: { () -> Void in
            self.navigationController?.navigationBar.alpha = 0.0
            self.navigationController?.toolbar.alpha = 0.0
            }, completion: nil)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}
-----------------------------------------------------------------------------------------------

F. 結果:
    1. 程式執行: