Swift滚动视图及使用多线程加载网络图片

创建UI的过程全部在storyboard中完成，这里我们只贴上代码实现过程。

1.存入图片地址的model 使用了结构体知识

import Foundation

//存储图片url的model  
struct DemoURL {
    static let Stanford = NSURL(string: "http://comm.stanford.edu/wp-content/uploads/2013/01/stanford-campus.png")
    struct NASA {
        static let Cassini = NSURL(string: "http://www.jpl.nasa.gov/images/cassini/20090202/pia03883-full.jpg")
        static let Earth = NSURL(string: "http://www.nasa.gov/sites/default/files/wave_earth_mosaic_3.jpg")
        static let Saturn = NSURL(string: "http://www.nasa.gov/sites/default/files/saturn_collage.jpg")
    }
}

2.这里是结合了storyboard 并将图片地址传入下一视图 在下一视图中加载图片

import UIKit

class ViewController: UIViewController {

    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        if let ivc = segue.destinationViewController as? ImageViewController {
            if let identifier = segue.identifier {
                switch identifier {
                    case "Earth":
                        ivc.imageURL = DemoURL.NASA.Earth
                        ivc.title = "Earth"
                    case "Cassini":
                        ivc.imageURL = DemoURL.NASA.Cassini
                        ivc.title = "Cassini"
                    case "Saturn":
                        ivc.imageURL = DemoURL.NASA.Saturn
                        ivc.title = "Saturn"
                    default: break

                }
            }
        }
    }
}

3.加载网络图片，使用GCD编程

import UIKit

class ImageViewController: UIViewController, UIScrollViewDelegate {

    var imageURL: NSURL? {
        didSet {
            image = nil
            //如果不在这个界面 不下载图片
            if view.window != nil {
                fetchImage()
            }
        }
    }
    
    //加载数据 更新UI
    private func fetchImage() {
        if let url = imageURL {
            
            spinner?.startAnimating()//开始加载菊花
            
            //多线程加载数据
            let qos = Int(QOS_CLASS_USER_INITIATED.rawValue)
            //子线程下载数据
            dispatch_async(dispatch_get_global_queue(qos, 0)) { () -> Void in
                
                let imageData = NSData(contentsOfURL: url)
                
                dispatch_async(dispatch_get_main_queue()) {//主线程刷新UI
                  
                    if url == self.imageURL {//防止加载图片顺序混乱
                        if imageData != nil {
                            self.image = UIImage(data: imageData!)
                        } else {
                            self.image = nil
                        }

                    }
                }
            }
        }
    }
    
    @IBOutlet weak var spinner: UIActivityIndicatorView!//加载菊花
    private var imageView = UIImageView()
    
    private var image: UIImage? {
        get { return imageView.image }
        set {
            imageView.image = newValue
            imageView.sizeToFit()
            scrollView?.contentSize = imageView.frame.size//设置contentSize为图片的尺寸
            spinner?.stopAnimating()//停止加载
        }
    }
    
    @IBOutlet weak var scrollView: UIScrollView! {
        didSet {
            scrollView.contentSize = imageView.frame.size
            scrollView.delegate = self
            scrollView.minimumZoomScale = 0.03
            scrollView.maximumZoomScale = 1.0
        }
    }
    
    //scrollViewDelegate
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        return imageView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.addSubview(imageView)
//        if image == nil {
//            imageURL = DemoURL.Stanford
//        }
    }

    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        //如果来到这个界面了 下载
        if image == nil {
            fetchImage()
        }
    }
}

效果图：图片较大 主要是为了测试多线程编程 在加载时需要多一些时间

Paste_Image.png

Paste_Image.png

Paste_Image.png