管理聊天视图的自动布局约束

Question

我正在创建聊天视图，目前正在尝试根据自动布局设计单元格。我的主要问题是，有一个图片视图，正下方有一个标签，用于聊天文字多行，如果没有图片，则只显示文字，如果没有文字只显示图像。图像应为单元宽度的60％和高度的40％。下面是我的手机设计，为了清晰起见，我为每个视图添加了背景色。

但是通过给出比例高度，我无法以编程方式设置其高度。因此，目前我尝试为图像视图提供固定高度，并在代码中以编程方式管理它。下面是我调整imageview和聊天文本高度的代码。

var sections = List<StringObject>()

这是现在的结果

多线似乎不起作用。我不确定我是否遵循最佳方法。如果有人有任何解决方案或任何建议，请告诉我。

PS：请不要建议像JSQMessagesViewController这样的第三方。我已经意识到了这些。我将此作为学习的一部分。

Answer 1

您只需为单元格中的所有组件设置底部约束。 并调用表视图的委托方法（EstimatedRowHight和HightForRow）。 它将返回单元格的确切高度。您还可以自定义是否显示..

请记住，文本标签应该具有相对于其他组件的底部约束属性。希望你得到我的意思。

Answer 2

如果永远不会在同一个单元格中显示UIImageView和UILabel，则可以删除它们之间的所有约束关系，并使每个约束仅与superview相关。然后使用一些代码，您可以管理UIImageView或UILabel可见性，并在CollectionView / TableView委托方法中为每个单元格计算正确的高度。

Answer 3

我认为问题出在你的行中

cell.chatTextContainerHeightConstraint.constant = CGRectGetHeight(cell.chatText.frame)+20

您应该手动计算高度，而不是获取chatText.frame高度。我使用以下函数来计算单元格高度：

+ (CGFloat)calculateCellHeightForText:(NSString *)text cellWidth:(CGFloat)cellWidth {
    CGFloat maxWidth = cellWidth;
    CGSize textSize = [text boundingRectWithSize:CGSizeMake(maxWidth, MAXFLOAT)
                                         options:NSStringDrawingUsesLineFragmentOrigin
                                      attributes:@{NSFontAttributeName : [UIFont fontWithName:@"CALIBRI" size:17]}
                                         context:nil].size;
    return textSize.height;
}