ios - swift 的消息气泡约束

Question

我知道这是一个很难调试的问题。我会尽力解释，你可以在评论区提问。

我想在我的应用中使用消息气泡。我写了一些约束代码，但效果不佳。

如何将蓝色气泡的左边缘放到红线？

这是我的代码:

当 tableview 单元格加载时，此方法正在运行:

private func setup() {
    bubbleImageView = UIImageView(image: bubbleImage.incoming, highlightedImage: bubbleImage.incomingHighlighed)
    bubbleImageView.userInteractionEnabled = true

    messageLabel = UILabel(frame: CGRectZero)
    messageLabel.font = UIFont.systemFontOfSize(15)
    messageLabel.numberOfLines = 0
    messageLabel.userInteractionEnabled = true
    selectionStyle = .None
    contentView.addSubview(bubbleImageView)
    bubbleImageView.addSubview(messageLabel)
    messageLabel.translatesAutoresizingMaskIntoConstraints = false
    bubbleImageView.translatesAutoresizingMaskIntoConstraints = 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: -2))

    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))
}

如您所见，我正在为文本创建气泡背景和标签。

第二种方法:

func setCell(message:Message) {
    messageLabel.text="testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest"
    var layoutAttribute: NSLayoutAttribute
    var layoutConstant: CGFloat
    if message.incoming {
        bubbleImageView.image=bgImage.incoming
        messageLabel.textColor = UIColor.blackColor()
        layoutAttribute = .Left
        layoutConstant = 10
    }else{
        if message.isSent == 1 {
            bubbleImageView.image = bgImage.outgoing
        }
        if message.isSent == 0 {
            bubbleImageView.image = bgImage.notYetSent
        }
        messageLabel.textColor = UIColor.whiteColor()
        layoutAttribute = .Right
        layoutConstant = -10
    }

    contentView.addConstraint(NSLayoutConstraint(item: bubbleImageView, attribute: layoutAttribute, relatedBy: .Equal, toItem: contentView, attribute: layoutAttribute, multiplier: 1, constant: layoutConstant))

}

我的代码有什么问题？它适用于传入消息(灰色气泡)，但不适用于传出消息(蓝色气泡)

Answer 1

我明白了。您必须添加一个不允许气泡超过最大宽度的约束。所以你必须添加这样的约束:

let widthConstraint = NSLayoutConstraint(item: youritem, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.LessThanOrEqual, 
    toItem: self.youItem.superview, attribute: NSLayoutAttribute.Width,
 multiplier: 1.0, constant: 100)