Creating a bubble view for messages

Question

I want to have the the text in my cell to have a bubble view behind it.

Currently the message text is inside a container so that it can only get so big,

Each cell has a message text property from core data, so the message labels are different in size.

Because of the view hierarchy, it seems like I am going to have to predict the size of the bubble for each cell because it's under the actual message label view.

So I guess the real question is how can I dynamically size a view based on each cells text member.

Answer 1

Using the boundingRect function from NSString.

func estimateFrameForText(_ text: String) -> CGRect {
    let size = CGSize(width: 250, height: 1000)
    let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)
    return NSString(string: text).boundingRect(with: size, options: options, attributes: [NSFontAttributeName: UIFont(name:"OpenSans",size:15)!], context: nil)
}

Set a max values(width, height -> in this case 250, and 1000), add the UIFont your text is using, and this will calcucalte the label text size. When using this function for a bubble you should probably add a padding +20 height, +20 width, so the bubble isn't touching the text as close.

I personally use it like this inside cellForItem:

let width = estimateFrameForText(message.content).width + 20
cell.bubbleWidthAnchor?.constant = width