swift - 带有图像的动态 UITableView

Question

有类似的问题，但没有一个答案对我有用。在动态表中，我想显示具有不同高度的图像。每个单元格都有一个带有 contentMode = .scaleAspectFit 的 UIImageView，因此图像可以很好地占据表格的宽度并根据需要占据高度。

Cell 有 4 个约束:

TableView Controller :

class TableTableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.estimatedRowHeight = 100
        tableView.rowHeight = UITableViewAutomaticDimension
    }

    override func numberOfSections(in tableView: UITableView) -> Int {

        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return 2
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: String(describing: ImageTableViewCell.self), for: indexPath) as! ImageTableViewCell

        let image = indexPath.row == 0 ? UIImage(named: "1.jpg")! : UIImage(named: "2.jpg")!
        cell.customImageView.image = image

        return cell
    }
}

结果:

如您所见，单元格的高度不正确( ImageView 顶部和底部的 ImageView 的红色背景)。我相信发生这种情况是因为 ImageView 的 intrinsicContentSize 等于图像大小，这就是单元格高度计算不正确的原因(不考虑内容模式)。我尝试计算图像的高度并为 ImageView 添加高度约束:

cell.heightConstraint.constant = cell.frame.width * image.size.height /  image.size.width

但它打破了单元格的内容 View 约束。

工程可以下载here>>

Answer 1

在你的ImageTableViewCell.swift

import UIKit

class ImageTableViewCell: UITableViewCell {

    @IBOutlet weak var customImageView: UIImageView!

    internal var aspectConstraint : NSLayoutConstraint? {
        didSet {
            if oldValue != nil {
                customImageView.removeConstraint(oldValue!)
            }
            if aspectConstraint != nil {
                customImageView.addConstraint(aspectConstraint!)
            }
        }
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        aspectConstraint = nil
    }

    func setPostedImage(image : UIImage) {

        let aspect = image.size.width / image.size.height

        aspectConstraint = NSLayoutConstraint(item: customImageView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: customImageView, attribute: NSLayoutAttribute.height, multiplier: aspect, constant: 0.0)

        customImageView.image = image
    }
}

在您的 TableTableViewController.swift 中，您的 cellForRowAt 方法将是:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "ImageTableViewCell", for: indexPath) as! ImageTableViewCell

    let image = imageArr[indexPath.row]
    cell.setPostedImage(image: image!)
    return cell
}

并以这种方式声明您的imageArr:

let imageArr = [UIImage(named: "1.jpg"), UIImage(named: "2.jpg")]

你的竞争代码将是:

import UIKit

class TableTableViewController: UITableViewController {

    let imageArr = [UIImage(named: "1.jpg"), UIImage(named: "2.jpg")]
    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.estimatedRowHeight = 100
        tableView.rowHeight = UITableViewAutomaticDimension
    }

    override func numberOfSections(in tableView: UITableView) -> Int {

        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return 2
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ImageTableViewCell", for: indexPath) as! ImageTableViewCell

        let image = imageArr[indexPath.row]
        cell.setPostedImage(image: image!)
        return cell
    }
}

和THIS将是你的结果。

编辑:

要解决约束问题，请将 aspectConstraint 优先级设置为 999 并且 aspectConstraint 将是:

internal var aspectConstraint : NSLayoutConstraint? {
    didSet {
        if oldValue != nil {
            customImageView.removeConstraint(oldValue!)
        }
        if aspectConstraint != nil {
            aspectConstraint?.priority = 999  //add this
            customImageView.addConstraint(aspectConstraint!)
        }
    }
}