Swift - TableViewCell 中不同大小的图像的困难

Question

我正在使用 Kingfisher 加载许多远程图像，并且很难将它们正确加载到具有动态高度单元格的 Tableview 中。 我的目标是让图像始终是屏幕的全宽和动态高度，如何实现？

我之前问了一个相关问题，这导致使用堆栈视图了解基本布局：SnapKit: How to set layout constraints for items in a TableViewCell programatically

所以我构建了如下内容：

使用以下代码（为简洁起见，删除了一些部分）：

// CREATE VIEWS
let containerStack = UIStackView()
let header = UIView()
let headerStack = UIStackView()
let title = UILabel()
let author = UILabel()
var previewImage = UIImageView()

...

// KINGFISHER
let url = URL(string: article.imageUrl)
previewImage.kf.indicatorType = .activity
previewImage.kf.setImage(
  with: url,
  options: [
    .transition(.fade(0.2)),
    .scaleFactor(UIScreen.main.scale),
    .cacheOriginalImage
]) { result in
  switch result {
  case .success(_):
    self.setNeedsLayout()
    UIView.performWithoutAnimation {
      self.tableView()?.beginUpdates()
      self.tableView()?.endUpdates()
    }
  case .failure(let error):
    print(error)
  }
}

...

// LAYOUT
containerStack.axis = .vertical

headerStack.axis = .vertical
headerStack.spacing = 6
headerStack.addArrangedSubview(title)
headerStack.addArrangedSubview(author)
header.addSubview(headerStack)

containerStack.addArrangedSubview(header)
containerStack.addSubview(previewImage)

addSubview(containerStack)

headerStack.snp.makeConstraints { make in
  make.edges.equalToSuperview().inset(20)
}

containerStack.snp.makeConstraints { make in
  make.edges.equalToSuperview()
}

没有imageView 的约束，图像不会出现。

使用以下约束，图像也不会出现：

previewImage.snp.makeConstraints { make in
  make.leading.trailing.bottom.equalToSuperview()
  make.top.equalTo(headerView.snp.bottom).offset(20)
}

通过其他尝试，图像完全倾斜或与标签/其他单元格和图像重叠。

最后，遵循此评论：With Auto Layout, how do I make a UIImageView's size dynamic depending on the image? 和此要点：https://gist.github.com/marcc-orange/e309d86275e301466d1eecc8e400ad00 以及这些约束 make.edges.equalToSuperview() 我能够让图像以正确的比例显示，但它们完全覆盖了标签。

理想情况下应该是这样的：

Answer 1

带有示例代码的 100 % 工作解决方案

我只是设法通过动态标签内容和动态图像尺寸实现了相同的布局。我通过约束和自动布局做到了。看看这个GitHub Repository的演示项目@

---

正如马特所指出的，我们必须在图像下载后计算每个单元格的高度（当我们知道它的宽度和高度时）。注意每个单元格的高度是通过tableView的委托方法heightForRowAt IndexPath计算出来的

因此，在下载每个图像后，将图像保存在 indexPath 的数组中并重新加载该 indexPath，以便根据图像尺寸再次计算高度。

需要注意的一些关键点如下

• 使用 3 种类型的单元格。一个用于标签，一个用于字幕，一个用于图像。在cellForRowAt 内部初始化并返回相应的 细胞。每个单元格都有一个唯一的cellIdentifier，但类是相同的
• tableView 中的节数 == 数据源计数
• 节中的行数 == 3
  • 第一行对应标题，第二行对应副标题，第三行对应图片。
• 标签的行数应为 0，以便根据内容计算高度
• 在cellForRowAt 内部异步下载图像，将其存储在数组中并重新加载该行。
• 通过重新加载行，调用heightForRowAt，根据图像尺寸计算所需的单元格高度并返回高度。
• 因此每个单元格的高度都是根据图像尺寸动态计算的

---

看看一些代码

override func numberOfSections(in tableView: UITableView) -> Int {
  return arrayListItems.count
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  //Title, SubTitle, and Image
  return 3
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

switch indexPath.row {
case 0:
  //configure and return Title Cell. See code in Github Repo 

case 1:

  //configure and return SubTitle Cell. See code in Github Repo

case 2:

  let cellImage = tableView.dequeueReusableCell(withIdentifier: cellIdentifierImage) as! TableViewCell
  let item = arrayListItems[indexPath.section]
  //if we already have the image, just show
  if let image = arrayListItems[indexPath.section].image {
    cellImage.imageViewPicture.image = image
  }else {

    if let url = URL.init(string: item.imageUrlStr) {

      cellImage.imageViewPicture.kf.setImage(with: url) { [weak self] result in
        guard let strongSelf = self else { return } //arc
        switch result {
        case .success(let value):

          print("=====Image Size \(value.image.size)"  )
          //store image in array so that `heightForRowAt` can use image width and height to calculate cell height
          strongSelf.arrayListItems[indexPath.section].image = value.image
          DispatchQueue.main.async {
          //reload this row so that `heightForRowAt` runs again and calculates height of cell based on image height
            self?.tableView.reloadRows(at: [indexPath], with: .automatic)
          }

        case .failure(let error):
          print(error) // The error happens
        }
      }

    }

  }


  return cellImage

default:
  print("this should not be called")
}

//this should not be executed
return .init()
}


override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
//calculate the height of label cells automatically in each section
if indexPath.row == 0 || indexPath.row == 1 { return UITableView.automaticDimension }

// calculating the height of image for indexPath
else if indexPath.row == 2, let image = arrayListItems[indexPath.section].image {

  print("heightForRowAt indexPath : \(indexPath)")
  //image

  let imageWidth = image.size.width
  let imageHeight = image.size.height

  guard imageWidth > 0 && imageHeight > 0 else { return UITableView.automaticDimension }

  //images always be the full width of the screen
  let requiredWidth = tableView.frame.width

  let widthRatio = requiredWidth / imageWidth

  let requiredHeight = imageHeight * widthRatio

  print("returned height \(requiredHeight) at indexPath: \(indexPath)")
  return requiredHeight


}
else { return UITableView.automaticDimension }
}

---

相关。

我们可以遵循的另一种方法是从 API 请求中返回图像尺寸。如果可以做到这一点，它将简化很多事情。看看这个类似的问题（针对collectionView）。

Self sizing Collection view cells with async image downloading.

Placholder.com用于异步获取图片

Self Sizing Cells: (A Good read)

样本

Answer 2

按照您的描述进行操作相对容易：您的图像视图需要一个等于“屏幕”宽度（如您所说）的宽度约束和一个与宽度约束成比例的高度约束（ multiplier) 基于下载图像的比例（又名“纵横比”）。该值不能提前设置；下载图像后，您需要对其进行配置，因为直到那时您才知道其比例。因此，您需要一个高度约束的出口，以便您可以将其移除，并在您知道它时将其替换为具有正确multiplier 的出口。如果您的其他约束相对于图像视图的顶部和底部是正确的，则其他所有内容都将按照需要进行。

这些屏幕截图表明这种方法有效：

（进一步向下滚动表格视图：）

它与您想要的界面并非 100% 相同，但想法是相同的。在每个单元格中，我们有两个标签和一个图像，图像可以有不同的纵横比，但这些纵横比可以正确显示 - 并且单元格本身具有不同的高度。

这是我使用的关键代码：

    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! Cell
    // in real life you’d set the labels here too
    // in real life you’d be fetching the image from the network...
    // ...and probably supplying it asynchronously later
    let im = UIImage(named:self.pix[indexPath.row])!
    cell.iv.image = im
    let con = cell.heightConstraint!
    con.isActive = false
    let ratio = im.size.width/im.size.height
    let newcon = NSLayoutConstraint(item: con.firstItem, attribute: con.firstAttribute, relatedBy: con.relation, toItem: con.secondItem, attribute: con.secondAttribute, multiplier: ratio, constant: 0)
    newcon.isActive = true
    cell.heightConstraint = newcon
    return cell

Answer 3

如果您不想更改布局，有一个直接的解决方案可以解决您的问题。

1- 定义你的细胞

2- 将 UIImageView 和您喜欢的其他 UI 元素放入单元格中，并为图像视图添加以下约束： - 顶部、前导、尾随、底部到超级视图 -height 约束并在代码中添加出口（例如：heightConstraint）

3-将内容填充更改为：aspect fit

4- 通过 kingfisher 或您喜欢的任何其他方式加载您的图像，一旦您传递您的图像，检查大小并计算比率：imageAspectRatio = height/width

5-设置heightConstraint.constant = screenWidth * imageAspectRatio

6-call layoutIfNeeded() 为单元格，你应该没问题！

*此解决方案适用于任何 UI 布局组合，包括堆栈视图，重点是对图像有约束，并让 tableview 弄清楚如何计算和绘制约束。

class CustomTableViewCell: UITableViewCell {

    @IBOutlet weak var heightConstraint: NSLayoutConstraint!
    @IBOutlet weak var sampleImageView: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    func configure(image:UIImage) {
        let hRatio = image.size.height / image.size.width
        let newImageHeight = hRatio * UIScreen.main.bounds.width
        heightConstraint.constant = newImageHeight
        sampleImageView.image = image
        sampleImageView.layoutIfNeeded()
    }
}

结果：