在UITableViewCell中使用高度宽度值设置UIImageView的高度。

Question

我需要在 UITableViewCell.

API返回图像的原始高度和宽度，所以我相信我应该能够计算出比例。然而，我不知道如何使用autolayout来布局。

final class ContentArticleImage: UITableViewCell {

  var ratio: CGFloat? { // 1000 / 600 (width / height)
    didSet {
      guard let ratio = ratio else { return }
      contentImageView.heightAnchor.constraint(equalTo: widthAnchor, multiplier: 1 / ratio).isActive = true
    }
  }

  private lazy var contentImageView = configure(UIImageView(frame: .zero), using: {
    $0.translatesAutoresizingMaskIntoConstraints = false
    $0.backgroundColor = .darkGray
    $0.contentMode = .scaleAspectFit
  })

  override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    configureUI()
  }

  required init?(coder: NSCoder) {
    return nil
  }
}
private extension ContentArticleImage {
  func configureUI() {

    addSubview(contentImageView)
    NSLayoutConstraint.activate([
      contentImageView.topAnchor.constraint(equalTo: topAnchor, constant: 12),
      contentImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
      contentImageView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -12),
      contentImageView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -12)
    ])

  }
}

我尝试了像上面的东西，但我可以自动布局的错误

(
    "<NSLayoutConstraint:0x600002885b30 V:|-(12)-[UIImageView:0x7ffe3551e170]   (active, names: '|':OneHubApp.ContentArticleImage:0x7ffe3551ddc0'ContentArticleImage' )>",
    "<NSLayoutConstraint:0x600002885c70 UIImageView:0x7ffe3551e170.bottom == OneHubApp.ContentArticleImage:0x7ffe3551ddc0'ContentArticleImage'.bottom - 12   (active)>",
    "<NSLayoutConstraint:0x600002885ea0 UIImageView:0x7ffe3551e170.height == 0.548298*OneHubApp.ContentArticleImage:0x7ffe3551ddc0'ContentArticleImage'.width   (active)>",
    "<NSLayoutConstraint:0x6000028860d0 'UIView-Encapsulated-Layout-Height' OneHubApp.ContentArticleImage:0x7ffe3551ddc0'ContentArticleImage'.height == 251   (active)>",
    "<NSLayoutConstraint:0x600002886080 'UIView-Encapsulated-Layout-Width' OneHubApp.ContentArticleImage:0x7ffe3551ddc0'ContentArticleImage'.width == 414   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x600002885c70 UIImageView:0x7ffe3551e170.bottom == OneHubApp.ContentArticleImage:0x7ffe3551ddc0'ContentArticleImage'.bottom - 12   (active)>

使用原始的高度宽度应该如何计算单元格中图片的高度？

编辑我的单元格是用以下方法渲染的。

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "CONTENT_CELL", for: indexPath) as! ContentArticleImage
    cell.ratio = asset.width / asset.height
    cell.selectionStyle = .none
    return cell
  }

Answer 1

你需要做的是在每次重用单元格时停用你的高度约束。另外，你需要将高度约束设置为等于下列参数的倍数。contentImageView 宽度约束，而不是单元格的宽度约束。所以你的代码应该是这样的。

final class ContentArticleImage: UITableViewCell {

    var heightConstraint: NSLayoutConstraint?

    var ratio: CGFloat? { // 1000 / 600 (width / height)
        didSet {
            guard let ratio = ratio else { return }
            heightConstraint?.isActive = false
            heightConstraint = contentImageView.heightAnchor.constraint(equalTo: contentImageView.widthAnchor, multiplier: 1 / ratio)
            heightConstraint?.isActive = true
            heightConstraint?.priority = .defaultHigh
        }
    }

    lazy var contentImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.backgroundColor = .darkGray
        imageView.contentMode = .scaleAspectFit
        return imageView
    }()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        configureUI()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        configureUI()
    }
}

请注意，我在单元格中设置了 priority 到 .defaultHight 只是为了让控制台中的布局警告沉默。