views:

5614

answers:

5

Just curious, did I overlook somewhere in the API to display a chat bubble type image as found in the iPhone's SMS application? There's a few applications out there that use bubbles that look verbatim to the iPhone's and I'm wondering if they're using a native widget or their own image.

This is also seen in the Tweetie application where the content of the tweets are.

+6  A: 

You need to use your own images, and Apple recommends using 9 UIImageViews (3 rows of 3) (Top Left Corner, Top Middle, Top Right Corner, Middle Left Side, Middle, Middle Right Side, Bottom Left Corner, Bottom Middle, Bottom Right Corner)

kdbdallas
thanks kdb. any chance you can point me in the right direction for where apple makes these recommendations?
Coocoo4Cocoa
It was at WWDC (should be in one of the videos)
kdbdallas
That's not really necessary. You can just use -[UIImage stretchableImageWithLeftCapWidth:topCapHeight:] to specify your stretchable area. See the UIImage docs for more info.
Mike McMaster
There is no way that Tweetie (or the SMS app) is using 9 separate UIViews per chat message. The performance would be horrid. Use the method Mike suggests.
Andrew Grant
+3  A: 

Read the code in UICatalog's ButtonsViewController.m: "+buttonWithTitle:" which creates a stretchable button from one image, which is the same case for creating a chat bubble.

leonho
+2  A: 

I stumbled across this today from one of my RSS feeds.

Its a bunch of UI elements re-created in illustrator

Notably they have the chat bubbles. You might be able to use them as a start for images to do what kdbdallas is saying.

http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements

Hope this helps.

chris.

PyjamaSam
+9  A: 

I suggest using the stretch method they recommend for button images.

[UIImage stretchableImageWithLeftCapWidth:15 topCapHeight:13]

You can see a working example by downloading Twitterfon's source(it's on the FAQ page). You can see how they code a reusable control for it as well as example images for creating your own bubble.

Edit - Source is no longer available(NDA, possibly)

I put the image up here. You should be able to figure out the rest :)

Jab
Jesse, it appears the source is no longer available. Any idea if it has been mirrored anywhere?
Coocoo4Cocoa
oh wow it is gone. I imagine it's down because they are starting to use iPhone OS 3.0 and it's under NDA. I obviously can't re-host their source, but I suggest searching stretchableImageWithLeftCapWidth for uses and I put the images in a drop. Link is in my answer.
Jab
What else is needed to display image to full tableview width?UIImage *image = [UIImage imageNamed:@"balloon_2.png"];[image stretchableImageWithLeftCapWidth:15 topCapHeight:13];cell.image = image;Thanks
MartinW
+3  A: 

There is a video tutorial showing Jabs method here http://vimeo.com/8718829 it includes bubble graphics in many colours. Also the the twitterfon source is here http://github.com/jpick/twitterfon.

(these should be comments to jabs answer but I don't have high enough rating to comment)

Grant M
Superb one. Excellent on. Yet no uPvotes ? How ?
sugar