带图像的动态 UITableView

问题描述

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

There are similar questions, but non of the answers worked for me. In a dynamic table I want to display images that have different heigh. Each cell has a UIImageView with contentMode = .scaleAspectFit so the image nicely takes the width of the table and takes the height as much as needed.

Cell 有 4 个约束:

Cell has 4 constraints:

表格视图控制器:

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
    }
}

结果:

您可以看到单元格的高度不正确(图像视图顶部和底部的图像视图的红色背景).我相信这是因为图像视图的 intrinsicContentSize 等于图像大小，这就是单元格高度计算不正确的原因(不考虑内容模式).我尝试计算图像的高度并为图像视图添加高度约束:

As you can see that the height of the cell is incorrect (red background of the image view on top and bottom of the image view). I believe this happens because intrinsicContentSize of the image view is equal to the image size and thats why the height of the cell is calculated incorrectly (content mode is not taken into account). I tried calculating height of the image and adding height constraint for the image view:

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

但它打破了单元格的内容视图约束.

but it breaks cell's content view constraints.

项目可以在这里下载>>

推荐答案

在你的 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 方法将是:

And into your TableTableViewController.swift your cellForRowAt method will be:

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:

And declare your imageArr this way:

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 将是:

To fix constraint issue set aspectConstraint priority to 999 and aspectConstraint will be:

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

这篇关于带图像的动态 UITableView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！