具有自动布局和 UITableAutomaticDimension 的动态高度表单元格（动态 UILabel + 几个 UIImageViews）答案

【问题标题】：Dynamic Height Table Cell with Autolayout and UITableAutomaticDimension (Dynamic UILabel + several UIImageViews)具有自动布局和 UITableAutomaticDimension 的动态高度表单元格（动态 UILabel + 几个 UIImageViews）
【发布时间】：2017-07-02 12:25:37
【问题描述】：

我看了3天动态表格单元格和自动布局相关的文章，至今没用。

下面是我想要的表格单元格。这里的主要问题是用于发布文本和 UIImages 的 UILabel。

这是 UI 元素的层次结构。

- Content View
    + ...
    + UILabel for text - dynamic height
    + UIView - image view container
        * UIImageView
        * UIImageView
        * ....

标签的换行模式换行文本和行设置为 0。标签和容器视图具有顶部、底部、前导和尾随的约束。 ImageViews 在运行时添加，并具有顶部、前导、尾随、底部和高度约束的约束。第一个图像视图对容器视图具有顶部约束，最后一个图像视图对容器视图具有底部约束，其他图像视图对上部图像视图具有顶部约束。

第一次加载表格时（单元格具有不同的图像计数），它看起来很好，但是当我向上和向下滚动时，某些单元格中的约束被破坏并且图像在单元格内重叠。

这是错误输出：

Unable to simultaneously satisfy constraints.   Probably at least one of the constraints in the following list is one you don't want.      
Try this:       
(1) look at each constraint and try to figure out which you don't expect;       
(2) find the code that added the unwanted constraint or constraints and fix it.

"<NSLayoutConstraint:0x17428aaf0 V:|-(0)-[UIImageView:0x14be77ed0]   (active, names: '|':UIView:0x14be75b20 )>",
"<NSLayoutConstraint:0x17428a6e0 UIImageView:0x14be77ed0.height == 160   (active)>",
"<NSLayoutConstraint:0x17428acd0 UIImageView:0x14be77ed0.bottom == UIView:0x14be75b20.bottom   (active)>",
"<NSLayoutConstraint:0x174289650 V:|-(0)-[UIImageView:0x14be43ce0]   (active, names: '|':UIView:0x14be75b20 )>",
"<NSLayoutConstraint:0x17428bb80 UIImageView:0x14be43ce0.height == 160   (active)>",
"<NSLayoutConstraint:0x17428be50 V:[UIImageView:0x14be43ce0]-(10)-[UIImageView:0x14be74b10]   (active)>",

"<NSLayoutConstraint:0x17428bfe0 UIImageView:0x14be74b10.height == 160   (active)>",
"<NSLayoutConstraint:0x17428c080 UIImageView:0x14be74b10.bottom == UIView:0x14be75b20.bottom   (active)>"

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x17428be50 V:[UIImageView:0x14be43ce0]-(10)-[UIImageView:0x14be74b10]   (active)>

请帮我解决这个问题。谢谢。

【问题讨论】：

您能否显示更多代码或情节提要或单元格？
一个单元格最多可以显示多少张图片？
@HimanshuMoradiya，没有限制。用户可以附加他们想要的图片。

标签： ios objective-c iphone uitableview autolayout

【解决方案1】：

我建议不要给你的图片高度，而是在你的容器视图中添加一个垂直的 stackview 并在那里添加你的所有图片。确保他们将内容模式设置为适合方面，并且 stackview 应该负责其余的工作。不要忘记将 stackview 限制在标签底部和单元格底部，这样它就知道它有多少空间。它会自行处理您的图像

【讨论】：

我试过了，但是图像重叠并且约束被打破。
@Florens von Buchwaldt 这看起来更像是评论。您应该在评论中给出建议而不是在回答中。
@PaulStein 注意：developer.apple.com/reference/uikit/uistackview 仅适用于 iOS 9.0+。
@Sneak，UIStackView 在不破坏约束的情况下运行良好。但现在我面临着新的问题。单元格具有不同数量的图像视图，当我将表格的可重用单元格出列时，堆栈视图已经包含一些图像视图。我该如何处理？我尝试删除所有图像视图并添加，但效果不佳。
@PaulStein 检查我的答案，如果对您没有帮助，请添加代码来计算/设置委托方法的高度并评论我的答案评论部分

【解决方案2】：

为确保在单元格出列时堆栈视图不包含旧图像，您需要在prepareForReuse() 中清理它：

override func prepareForReuse() {
    super.prepareForReuse()

    stack.arrangedSubviews.forEach {
        stack.removeArrangedSubview($0)
        $0.removeFromSuperview()
    }
}

【讨论】：

我确实从容器视图中删除了所有图像视图并再次添加，它正在工作。但图像视图闪烁。有没有更好的方法可以流畅地显示图像？

【解决方案3】：

ImageViews 在运行时添加，并具有顶部、前导、尾随、底部和高度约束。

这是您的错误信息。删除 either 高度或您选择 either 约束的约束之一。您不能限制所有 4 个边并为此添加一个高度约束。

旁注：

宽度也是如此，如果您设置宽度约束，则不能同时约束两侧的前导/尾随。

编辑：

此外，按照 cmets 部分的建议，使用 UIStackView 更容易。

【讨论】：

@PaulStein 我很高兴它有效！不确定您的意思是您希望我在上面的答案中包含哪一部分？