如何用图像调整表格视图单元格的大小？

Question

我正在尝试制作一个食谱搜索应用程序。 我正在尝试从 API 以及与这些结果相关联的图像中获取结果，并使用基本表视图单元格将它们显示在表视图中。

当我下载图像时，图像框架设置为其固有大小，因此它将是下载图像的尺寸。 当我在此图像上设置约束时，它变小了，但您仍然可以看到框架正在影响文本放置。

这是设置约束之前的样子： https://imgur.com/srmKJtV

这是设置约束后的样子： https://imgur.com/DFLviBK

这是我用来设置单元格的代码：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "recipe", for: indexPath)
         
    cell.imageView?.translatesAutoresizingMaskIntoConstraints = false
    cell.imageView?.heightAnchor.constraint(equalToConstant: 100).isActive = true
    cell.imageView?.widthAnchor.constraint(equalToConstant: 100).isActive = true
    cell.imageView?.image = recipeResults[indexPath.row].image
  
    cell.textLabel?.numberOfLines = 0
    cell.textLabel?.text = "\(recipeResults[indexPath.row].title)"
            
    return cell
}

有谁知道我如何将图像保持为 100x100 并使每一行中的文本排列得很好？

我还注意到我在使单元格出列时遇到问题，因为当我单击该行或向上/向下滚动时，图像会变回正常的大尺寸而不保持小尺寸。 我怎样才能解决这个问题？

Answer 1

为UIImage设置宽度和高度限制是不够的。

尝试将其设置为在单元格内垂直居中，并使用您的 label 添加约束。 我认为在 storyboard 中设置它更容易。

Answer 2

使用自定义单元格而不是basic单元格。

通过这种方式，您将能够自定义您想要的组件。

• 通过.xib或在Interface Builder中创建您自己的自定义单元格

• 将水平UIStackView添加到您的单元格中并约束它的leading 、 trailing 、 top和bottom 。

• 将imageView和label添加到stackView 。 你应该给你的imageView一个width限制。 在您的情况下，它是硬编码的100 。