Constraints for message bubble

Question

I am building a messaging app, so i am using message bubbles for conversation screen. But I have a problem. My screen looks like this:

You can see if message is long then it is breaking. I think my constrains is wrong.

My code:

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

How can I resolve this problem ?

Answer 1

I am assuming your view hierarchy is as

contentView -> bubbleImageView -> messageLabel

and you are using auto resizing cells.

Pin all the edges of bubbleImageView to contentView.

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

Same way do it for .Right, Top and .Bottom.

Similarly pin all the edges of messageLabel to bubbleImageView with appropriate constants.

contentView.addConstraint(NSLayoutConstraint(item: messageLabel, attribute: .Left, relatedBy: .Equal, toItem: bubbleImageView, attribute: .Left, multiplier: 1, constant: 5))

Same way do it for .Right, Top and .Bottom. No need to center messageLable in bubbleImageView.