从 URL 中检索并显示多张图像

Question

使用 Swift3、Alamofire 和 AlamofireImage 进行试验。我正在尝试在 table 视图中显示一些 Instagram 图片。我有一个使用 Alamofire 检索到的 Places 的 data.json 文件，如下所示：

{
  "places" : [
    { "name" : "place1", "url" : "http://instagramImage1.jpg" },
    { "name" : "place2", "url" : "http://instagramImage2.jpg" },
    { "name" : "place3", "url" : "http://instagramImage3.jpg" },
  ]
}

我用 UIImageView 设置了 PlaceTableViewCell 并将其连接到相应控制器的插座上。

我还有一个 PlaceTableViewController 其中包括：

var places = [Place]() //empty array to store places

在 viewDidLoad() 方法中我调用了一个私有函数：

loadJson()

函数如下所示：

private func loadJson() {
    Alamofire.request("https://example.com/data.json").responseJSON { response in
        if let JSON = response.result.value as? [String : Any],
            let places = JSON["places"] as? [[String : String]] {
            for place in places {
                //should I call loadImage() function here?
            }
        }
    }
}

我在JSON文件中的每个地方也有一个模型：

import UIKit

class Place {

    var name: String
    var url: String

    init?(name: String, url: String) {
        self.name = name
        self.url = url     
    }

}

问题

我不确定从这里到哪里去。我想使用 AlamofireImage（我已经包含在我的项目中）来下载每个图像，但我可以在某种循环中执行此操作吗？我还想在新的 table 行中显示每张图片。任何建议和代码示例将不胜感激。

Answer 1

您可以在表格视图控制器中使用以下代码在单元格中填充图像。为此，您还需要在 tableview 中创建一个单元格或使用 xib 创建自定义单元格。我的代码是从 xib 加载自定义单元格看看。

 //MARK:- TableView Delegate and DataSource
func tableView(_ tableView: UITableView, numberOfRowsInSection sectionIndex: Int) -> Int {
    return places.count
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 200//or cell height you want
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
     var cell  = tableView.dequeueReusableCell(withIdentifier: "PlaceCell") as? PlaceCell
    if cell == nil {
        cell = (loadFromNibNamed(viewClass: PlaceCell.self) as! PlaceCell)
    }

    cell?.ivCategory.af_setImage(withURL: URL(string: places[indexPath.row].url)) 
    return cell!
}

另请注意，一旦收到 api 的响应，您将必须重新加载 tableview。

Answer 2

我建议不要在 loadJSON 中获取图像。

为什么？

初始请求中可能会返回大量照片，用户甚至可能永远不会在应用程序中向下滚动到足以看到其中一些照片。
最重要的是，如果您同时初始化太多请求，一些请求可能会在等待其他请求完成时超时。所以这可能不是最好的解决方案。

所以，现在开始解决方案。只为用户试图查看的单元格下载图像数据是有意义的。

TableView 有一个专门用于此目的的委托方法

optional func tableView(_ tableView: UITableView, 
        willDisplay cell: UITableViewCell, 
           forRowAt indexPath: IndexPath)

使用此方法加载图像。

extension ViewController: UITableViewDelegate {
   func tableView(_ tableView: UITableView, 
        willDisplay cell: UITableViewCell, 
           forRowAt indexPath: IndexPath) {

    let photoURL = places[indexPath.row].url

    // fetch this photo from web using URL

    // get the table view cell and update the image
     if let cell = self.tableView.cellForRow(at: indexPath) as UITableViewCell {
         cell.imageView.image = //fetchPhoto
     }   
    }
}

从 URL 中检索并显示多张图像

Retrieve and display multiple images from URL

xcode

swift

alamofire

alamofireimage

xcode8