ios - 使用可读内容指南和灵活的缩略图高度不明确

Question

我有一个视频缩略图(UIImageView)，我希望它具有灵活的大小而不是固定的宽度和高度(以前是这样)。它需要灵活，因为我在 readableContentGuide 的缩略图和布局 anchor 之间添加了前导和尾随约束。单元格内容 View 的属性。

因此，我为缩略图高度 anchor 应用了一个比率，以使用其宽度定义高度:

NSLayoutConstraint.activate([
    videoThumbnailView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 30),
    videoThumbnailView.leadingAnchor.constraint(equalTo: readableContentGuide.leadingAnchor, constant: 30),
    videoThumbnailView.trailingAnchor.constraint(equalTo: readableContentGuide.trailingAnchor, constant: -30),
    videoThumbnailView.heightAnchor.constraint(equalTo: videoThumbnailView.widthAnchor, multiplier: VideoThumbnailRatio.plusOne.rawValue),
])

缩略图位置和大小正确，但其余内容的高度不正确:

其余的内容约束设置如下:

let stackView = UIStackView()
stackView.configure(distributon: .fill, alignment: .fill, axis: .vertical, spacing: 5)
stackView.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(stackView)
NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalTo: videoThumbnailView.bottomAnchor, constant: 10),
    stackView.leadingAnchor.constraint(equalTo: videoThumbnailView.leadingAnchor),
    stackView.trailingAnchor.constraint(equalTo: videoThumbnailView.trailingAnchor),
])

stackView.addArrangedSubview(titleLabel)
stackView.addArrangedSubview(subtitleLabel)

let buttonsStackView = UIStackView()
buttonsStackView.configure(distributon: .fillEqually, alignment: .fill, axis: .horizontal, spacing: 10)
buttonsStackView.addArrangedSubview(contentSyncProgressView)
buttonsStackView.addArrangedSubview(myListOptionsView)
buttonsStackView.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(buttonsStackView)
NSLayoutConstraint.activate([
    buttonsStackView.centerXAnchor.constraint(equalTo: stackView.centerXAnchor),
    buttonsStackView.topAnchor.constraint(equalTo: stackView.bottomAnchor, constant: 20),
    buttonsStackView.heightAnchor.constraint(equalToConstant: 30),
    buttonsStackView.widthAnchor.constraint(equalToConstant: 238),
    contentView.bottomAnchor.constraint(equalTo: buttonsStackView.bottomAnchor, constant: 20)
])

如果我强制为缩略图设置一个固定的高度值，那么一切都会顺利:

如何避免为缩略图设置固定高度并获得没有歧义的布局？

更新:

演示项目:https://github.com/ricardopereira/ThumbnailLayoutIssue

Answer 1

您应该始终将约束应用于单元格的 contentView 而不是单元格本身。

在此之后，在您的示例中，您应该将 layoutMarginsGuide 替换为 contentView.layoutMarginsGuide。

您还应该将 stackView 的 distribution 设置为 fill