How to Style UITableView Cells to Look Like Message Bubbles? [closed]

Question

I'm creating a message app in Swift to grasp the foundations of iOS app building and am trying to style the table view cells to look like this.

I've been following tutorials but I can't seem to piece it together. It's got to be pretty simple. Does anyone have a good tutorial that does this in Swift?

Answer 1

I don't have a tutorial but I can give you some suggestions.

An easy way to handle this is to create a stretchable image and install it as the background image for your cells.

A stretchable image has fixed corners/edges, and the system flood-fills the center with a solid color. You take an image like your speech bubble and pare it down to the smallest possible image (with a 1 point center) and then use the UIImage method resizableImageWithCapInsets: to turn it into a stretchable image.

You'd then install that stretchable image as the background image for your table view cells. If this is a chat app you might want several variants: one with the speaker's arrow pointing left, one with the speaker's arrow pointing right, and perhaps different colors.