【我们都爱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 UIKitclass 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键可以模拟两个手指的缩放操作，效果如下：