ios - 如何将图像从 AWS S3 加载到 UICollectionView 中？

Question

我的 AWS S3 后端有一个桶，里面装满了我想加载到我的 UICollectionViewCell 上的图像。我应该采用什么方法来做到这一点？我也在寻找最有效的方法。

我可能会注意到，目前在我的项目中，我拥有的框架是 Alamofire、swiftyJSON 和 Haneke(用于缓存目的)，尽管我不知道如何正确使用它们来实现我的目标。我还可以补充一点，我正在使用 Parse.com 作为我的 BaaS，所以如果有一种方法可以在其中集成解析，那也将受到欢迎。

在 Swift 中有什么建议吗？

Answer 1

我建议的解决方案是使用 Parse.com 作为书籍元数据的来源，并使用 s3 作为存储。我认为您不需要任何其他组件(而且我特别怀疑用于基本 iOS 内容的网络代码便利包装器)。

所以我会(并且确实这样做了，以证明它有效)设置一个像这样的解析模型......

这是一个 swift 中的普通 ViewController，它有一个 Collection View 和一组自定义的 swift “Book”对象......

// ViewController.swift
import UIKit
import Parse

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    @IBOutlet weak private var collectionView : UICollectionView!
    var books : Array<Book>!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.books = []
    }

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        self.loadBooks()
    }

    func loadBooks() {
        var query = PFQuery(className: "Book")
        query.findObjectsInBackgroundWithBlock { (objects: [AnyObject]?, error: NSError?) -> Void in
            if error == nil {
                let bookObjects = objects as! [PFObject]
                for (index, object) in enumerate(bookObjects) {
                    self.books.append(Book(pfBook: object))
                }
            }
            self.collectionView.reloadData()
        }
    }

基本的东西。当 View 出现时，查询解析书籍对象，当它们返回时，在它们周围创建快速的“书籍”包装器并重新加载 Collection View 。这是 swift Book 类 ...

// Book.swift
import Parse

class Book: NSObject {

    var pfBook : PFObject
    var coverImage : UIImage!

    init(pfBook: PFObject) {
        self.pfBook = pfBook
    }

    func fetchCoverImage(completion: (image: UIImage?, error: NSError?) -> Void) {
        let urlString = self.pfBook["coverUrl"] as! String
        let url = NSURL(string: urlString)
        let request = NSURLRequest(URL: url!)
        let queue = dispatch_get_main_queue()

        NSURLConnection.sendAsynchronousRequest(request, queue: NSOperationQueue.mainQueue()) { (response: NSURLResponse?, data: NSData?, error: NSError?) in
            if error == nil {
                self.coverImage = UIImage(data: data!)
                completion(image: self.coverImage, error: nil)
            } else {
                completion(image: nil, error: error)
            }
        }
    }
}

有趣的方法是从保存在 PFObject 中的 url 中获取封面图像。 (查看 parse.com 数据浏览器中的 url 列。我在这里采取了快捷方式，并在网络上使用了一个很好的虚拟图像生成器。您需要实现一个具有相同签名的方法，但让它从 s3 获取图像).

唯一剩下的就是 Collection View 数据源。再次回到 ViewController.swift...

// ViewController.swift
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return self.books.count
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell",
        forIndexPath:indexPath) as! UICollectionViewCell
    if cell.backgroundView == nil { // brand new cell
        let v = UIImageView(frame:cell.bounds)
        v.tag = 32
        v.contentMode = .ScaleToFill
        cell.backgroundView = v
    }

    let book = self.books[indexPath.row]
    let coverImage = book.coverImage
    if coverImage == nil {
        book.fetchCoverImage({ (image, error) -> Void in
            collectionView.reloadItemsAtIndexPaths([indexPath])
        })
    } else {
        let imageView = cell.viewWithTag(32) as! UIImageView
        imageView.image = book.coverImage
    }
    return cell
}

注意我们在 cellForRow... 方法中做了什么:如果书对象有一个缓存的 coverImage，我们将它放在 ImageView 中。否则我们会告诉这本书获取它的封面艺术，并在完成后重新加载当前索引路径处的单元格(我们不再依赖于当前的单元格，因为在获取图像时时间会流逝)。

这是运行的样子......