Take the 2-minute tour ×

I currently have an application that has a messaging feature. It allows users to chat with one another. Currently the messages appear from the bottom up (I was able to accomplish this by rotating the table and the cells). Right now to distinguish between the sender and the receiver I use different colored text.

I want to use a bubble image as a background for the messages instead so that the app looks a lot more like iMessage. I know there is away to resize an image but I cannot get my head around this. Will I need a special kind of image? If so, how can I resize that image so that it fits the text and then place it as the background?

Thanks in advance for your help.

-EDIT- Code I am using to generate the cell with the bubble:

[self.textLabel setFont:[UIFont fontWithName:@"Helvetica" size:20]];
[self.textLabel setNumberOfLines:0];
CGSize size = [message.message sizeWithFont:self.textLabel.font];

    [self.textLabel setFrame:CGRectMake(690.0f - (size.width + 5.0f), 8.0f, size.width + 5.0f, size.height)];
    UIImage *bubble = [[UIImage imageNamed:@"aqua.png"] stretchableImageWithLeftCapWidth:24 topCapHeight:15];
    UIImageView *bubbleView = [[UIImageView alloc] initWithFrame:CGRectMake(704 - (size.width + 25.0f), 2.0f, size.width + 25.0f, size.height + 15.0f)];
    bubbleView.image = bubble;
    self.backgroundColor = [UIColor clearColor];
    self.opaque = NO;
    self.backgroundView = bubbleView;
share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

There are several ways to implement such a feature. Probably the easiest solution is using the
-resizableImageWithCapInsets: method of UIImage. You could create a tableview cell for each chat message and on the background draw this image and make the image stretch at the cap inset points.

In the tableView delegate method -tableView:heightForRowAtIndexPath: you can set the height of the cell, making use of the NSString method
-sizeWithFont:constrainedToSize:lineBreakMode: to calculate the proper height of the cell's contents (the actual chat message).

share|improve this answer
So I have a class that subclasses UITableView cell. Here I set the text of the cell as well as some other things like left alignment or right alignment based on the message and changing the color of the text. I understand how to set the height of the row. What I don't understand is drawing the UIImage in the background of the cell. I tried something like this self.backgroundView = imageView, where self is the UITableView cell and imageView is an image view whose image is set to a chat bubble png –  Siddharth Dhingra Aug 2 '12 at 15:38
I am unable to get the bubble to work properly. I will post some of the code I am using in my question. –  Siddharth Dhingra Aug 2 '12 at 19:20
Figured it out using the methods above. Thanks. Instead of using resizableImageWithCapInsets, I used stretchableImageWithLeftCapWidth:rightCapWidth: method. –  Siddharth Dhingra Aug 3 '12 at 16:52
While that method more or less works the same, it's deprecated. You should use the newer method I mentioned, you should be able to achieve the same results. –  Wolfgang Schreurs Aug 3 '12 at 17:11
Oh, and a word of warning: if performance becomes an issue, a more complicated method should be used, namely custom drawing of UITableView cells. The idea would be that an UITableViewCell has a contentView. You'll add your own view as subview to the contentView and within this view you'd implement the -drawrect: method. For your chatbubbles you will seperate the total image into 9 smaller images (top-left, top, top-right, middle-left, middle, middle-right, etc...). Around the middle image you'd draw the text on the view. Lookup fast tableview drawing for more info. –  Wolfgang Schreurs Aug 3 '12 at 17:15
add comment

Add a UIImageView to whatever object you're using to show the texts. Then just set its image property to whatever image you want; UIImageView will autoresize it for you.

UIImageView Class Reference

share|improve this answer
I am using a custom UITableViewCell, is there a way I can make that UIImageView the background of the cell and set it's size as the size of the text? –  Siddharth Dhingra Aug 2 '12 at 14:57
Yes. You can drag a UIImageView into the cell. As for being able to set its size as the size of the text, it depends what you're using to display the text. –  Dustin Aug 2 '12 at 14:59
I am programmatically creating the cell so I cannot just draw a UIImageView into the cell. –  Siddharth Dhingra Aug 2 '12 at 15:41
add comment

Your Answer


