带图像的动态UITableView

时间:2017-02-10 15:34:51

标签: swift uitableview uiimageview autolayout

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

Cell有4个约束: enter image description here

表视图控制器:

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

结果:

enter image description here

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

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

但它破坏了单元格的内容视图约束。

可以下载项目here>>

1 个答案:

答案 0 :(得分:3)

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

您的竞争代码将是:

aspectConstraint

THIS将是您的结果。

修改

要解决约束问题集999优先级aspectConstraintinternal var aspectConstraint : NSLayoutConstraint? { didSet { if oldValue != nil { customImageView.removeConstraint(oldValue!) } if aspectConstraint != nil { aspectConstraint?.priority = 999 //add this customImageView.addConstraint(aspectConstraint!) } } } 将是:

let url = "https://httpbin.org/post"
let parameters: Parameters = [
        "foo": "bar",
        "baz": ["a", 1],
        "qux": [
            "x": 1,
            "y": 2,
            "z": 3
        ]
    ]


Alamofire.request(url, method: .post, parameters: parameters, encoding: JSONEncoding.default).responseJSON { response in
    if((response.result.value) != nil) {
        let jsonVar: JSON = JSON(response.result.value!)
        print(jsonVar)
    }
}