iOS将图像加载到表格视图单元格中

Question

更新

现在图像在加载时显示，但仍有一个我无法解决的问题。 即使三个视图在垂直堆栈中，图像也会与单元格的内容重叠（第一个是图像，接下来的两个是标签视图）。 我想知道一个视图如何与堆栈视图中的其他视图重叠

现在我的 talbe 视图委托方法如下所示：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    var cell: BaseTableViewCell!
    if let contents = contents {
        let content = contents[indexPath.row]
        if let imageUrl = content.imageUrl, let url = URL(string: imageUrl) {
            cell = tableView.dequeueReusableCell(withIdentifier: "ImageContentRow", for: indexPath) as! ContentWithImageTableViewCell
            Alamofire.request(url).responseImage(completionHandler: { (response) in
                if let image = response.result.value {
                    cell.imageView?.image = image
                    cell.setNeedsLayout()
                }
            })
        }else{
            cell = tableView.dequeueReusableCell(withIdentifier: "ContentRow", for: indexPath) as! ContentTableViewCell
        }
        cell.contentTitleVeiw.text = content.title
        cell.contentLeadView.text = content.lead
    }
    return cell!
}

我对 iOS 很陌生。我已经看过教程并观看了视频课程，现在我想实现我的第一个应用程序。 我尝试阅读提要并显示内容的标题、线索和图像（如果有的话）。 我定义了一个带有 UIMageVeiw 和两个 UILable 的单元格，最后我将它们嵌入到垂直 StackView 中（我将分布设置为填充）。 一切正常，但图像不会自动显示，只要我单击单元格或滚动 TableVeiw。 即使我将图像视图设置为 Aspect Fit（并将其嵌入到垂直堆栈视图的顶部），当图像显示时，它仍会保持其原始大小并与单元格内容重叠。 我试图找出我做错了两天，但我无法解决它。

我尝试像这样显示数据：

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    var cell: BaseTableViewCell!
    if let contents = contents {
        let content = contents[indexPath.row]
        if let imageUrl = content.imageUrl, let url = URL(string: imageUrl) {
            cell = tableView.dequeueReusableCell(withIdentifier: "ImageContentRow", for: indexPath) as! ContentWithImageTableViewCell
            cell.imageView?.af_setImage(withURL: url)
        }else{
            cell = tableView.dequeueReusableCell(withIdentifier: "ContentRow", for: indexPath) as! ContentTableViewCell
        }
        cell.contentTitleVeiw.text = content.title
        cell.contentLeadView.text = content.lead
    }
    return cell!
}

图像视图单元格的视图层次结构如下所示：

启动应用并显示数据后，我的列表如下所示：

单击应显示图像的单元格或将其滚动并返回后，结果如下：

至少这是我的列表视图控制器，带有两个原型单元 （一种用于有图的内容，一种用于无图的内容）

Answer 1

您需要通知tableView 图片已加载并且它必须重新绘制单元格。

尝试改变

cell.imageView?.af_setImage(withURL: url)

到

cell.imageView?.af_setImage(withURL: url, completion: { (_) in
    self.tableView.beginUpdates()
    self.tableView.setNeedsDisplay()
    self.tableView.endUpdates()
})

看看我的回答here - 最后你可能需要在imageView 上明确设置高度。