Message bubble constraints with swift

Question

I know this is a hard problem to debug. I will try to explain, you can ask question from comments section.

I want to use message bubbles in my app. I wrote some code for constraints, but it is not working well.

How can i put the left edge of blue bubble to red line?

Here is my code:

When tableview cell loads this method is running:

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

As you can see i am creating bubble background and label for text.

And second method:

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

}

What is the problem with my code? It is working well for incoming messages (gray bubble) and not working well for outgoing messages (blue bubble)

Answer 1

I get it. You have to add a constraint that doesnt allows the bubble to exceed the max width. So you have to add a constraint like that:

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