【我們都愛Paul Hegarty】斯坦福IOS8公開課個人筆記30 ScrollView Demo實戰

  在上一話中我們創建了一個通過URL讀取圖片的Demo，這個Demo是不能拖動和縮放的，現在給它增加選項讓它可以手動切換URL，並把圖片添加到ScrollView中。

向Storyboard中拖入一個splitviewController。把ImageViewController作爲detail視圖，把工程中自帶的那個viewcontroller作爲rootview，現在storyboard中的場景如圖：

現在運行一下：

點擊back可以切換到主界面，目前這個界面是空的，我們需要向其中增加一些功能按鈕。增加三個按鈕分別獲取模型中的三張圖片，並且調整自動佈局：

然後我們需要做的是建立過渡。

按住control鍵拖動按鈕到ImageViewController，選擇show detail segue，分別命名爲fengjing1、fengjing2、fengjing3。在viewController中設置過渡方法：

import UIKit

class ViewController: UIViewController {

    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        if let ivc = segue.destinationViewController as? ImageViewController,let identifier = segue.identifier{
            switch identifier{
            case "fengjing1":
                ivc.imageURL = DemoURL.Fengjing.fengjing1
                ivc.title = "風景1"
            case "fengjing2":
                ivc.imageURL = DemoURL.Fengjing.fengjing2
                ivc.title = "風景2"
            case "fengjing3":
                ivc.imageURL = DemoURL.Fengjing.fengjing3
                ivc.title = "風景3"
            default:break
            }
        
        }
    }
  
}

現在來運行試試，你會發現點擊所有按鈕依然只顯示默認的圖片，這是怎麼回事呢？

這是因爲我們之前在viewDiaLoad中增加了測試代碼，現在把測試代碼刪掉。再次運行你會看到初始化打開的頁面上沒有照片，返回到主頁面點擊按鈕選擇照片，由於圖片很大，按鈕會卡頓，在圖片加載完成後纔會跳轉到照片的顯示頁面。

在現在ImageViewController中拖拽一個scrollview，點擊約束中的reset to suggested Constraints。然後把圖片放到這個滾動視圖中，在代碼中生成滾動視圖的outlet。首先要修改的地方是viewDidLoad方法，imageView不再放到view中而是放到scrollview中：

 override func viewDidLoad() {
        super.viewDidLoad()
        scrollview.addSubview(imageView)
        
    }

其次任何圖片發生變化的地方都需要修改scrollview的尺寸，因爲我們需要scrollview一直保持和它上面的imageview相同的尺寸：

outlet中：

@IBOutlet weak var scrollview: UIScrollView!{
    
        didSet{
        scrollview.contentSize = imageView.frame.size
        }
    }

計算屬性image的定義中：

private var image:UIImage? {
        get {return imageView.image}
        set {
        imageView.image = newValue
        imageView.sizeToFit()
        scrollview?.contentSize = imageView.frame.size
        }
    }

這裏在scrollview尾部增加？是因爲在圖片變動時不能保證scrollview存在，而oulet和viewDidLoad方法中使用scrollview不用加？是因爲在兩種情況中scrollview是肯定存在的，這也是保護程序不異常退出的有效方法。現在來運行一下試試，點擊按鈕時依舊很慢，可喜可賀的是我們可以拖動圖像了。

顯然現在我們需要添加縮放方法，添加縮放的最好位置是在scrollview的outlet中，記得我們之前講過的用法首先讓ImageViewController遵守scrollview的代理，然後修改如下outlet：

 @IBOutlet weak var scrollview: UIScrollView!{
    
        didSet{
        scrollview.delegate = self
        scrollview.maximumZoomScale = 1.0
        scrollview.minimumZoomScale = 0.05
        scrollview.contentSize = imageView.frame.size
        }
    }

因爲scrollview的代理方法是OC風格的，所以即便你沒有實現代理方法，也不會報錯，現在我們實現需要的代理方法.

選擇需要進行縮放的視圖，顯然是我們的imageView

 func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        return imageView
    }

現在運行，然後按住option鍵可以模擬兩個手指的縮放操作，效果如下：