消息泡沫的约束

Question

我正在构建一个消息传递应用程序，所以我正在使用消息气泡进行对话屏幕。但我有一个问题。我的屏幕看起来像这样：

你可以看到消息是否很长然后它正在破碎。我认为我的约束是错误的。

我的代码：

    bubbleImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    messageLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
    contentView.addConstraint(NSLayoutConstraint(item: bubbleImageView, attribute: .Left, relatedBy: .Equal, toItem: contentView, attribute: .Left, multiplier: 1, constant: 10))
    contentView.addConstraint(NSLayoutConstraint(item: bubbleImageView, attribute: .Top, relatedBy: .Equal, toItem: contentView, attribute: .Top, multiplier: 1, constant: 4.5))
    bubbleImageView.addConstraint(NSLayoutConstraint(item: bubbleImageView, attribute: .Width, relatedBy: .Equal, toItem: messageLabel, attribute: .Width, multiplier: 1, constant: 30))
    contentView.addConstraint(NSLayoutConstraint(item: bubbleImageView, attribute: .Bottom, relatedBy: .Equal, toItem: contentView, attribute: .Bottom, multiplier: 1, constant: -4.5))

    bubbleImageView.addConstraint(NSLayoutConstraint(item: messageLabel, attribute: .CenterX, relatedBy: .Equal, toItem: bubbleImageView, attribute: .CenterX, multiplier: 1, constant: 3))
    bubbleImageView.addConstraint(NSLayoutConstraint(item: messageLabel, attribute: .CenterY, relatedBy: .Equal, toItem: bubbleImageView, attribute: .CenterY, multiplier: 1, constant: -0.5))
    messageLabel.preferredMaxLayoutWidth = 218
    bubbleImageView.addConstraint(NSLayoutConstraint(item: messageLabel, attribute: .Height, relatedBy: .Equal, toItem: bubbleImageView, attribute: .Height, multiplier: 1, constant: -15))

如何解决此问题？

Answer 1

我假设您的视图层次结构为

TextBox

并且您正在使用自动调整大小的单元格。

将bubbleImageView的所有边缘固定到contentView。

var formattedDate = moment().format('YYYY-MM-DD hh:mm:ss')

同样适用于.Right，Top和.Bottom。

同样将messageLabel的所有边缘用适当的常量固定到bubbleImageView。

contentView -> bubbleImageView -> messageLabel

同样适用于.Right，Top和.Bottom。 无需在bubbleImageView中居中messageLable。