Creating a “chat bubble” on the iPhone, like Tweetie

Question

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 u

Answer 1

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.

Answer 2

Check out AcaniChat. It's the best open source version of the iPhone Messages app. It uses Core Data and will soon use WebSockets.

Answer 3

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.

Answer 4

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 https://github.com/jimpick/twitterfon

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

Answer 5

Many of our applications have chat or messaging facility, and many of the clients are asking to build chat "similar to that iPhone's SMS chat, with bubbles".

Unfortunately, Cocoa SDK does not provide convenient and easy way to display chat bubbles, and numerous code snippets that we've googled were not perfect either - some of them were simply ugly, some displayed bubbles of the same size regardless of text length, some did not alter bubble width, some were good, but barely customizable, etc.

Eventually, Alex - our leading iOS architect (who also happens to be the CTO at Stex) - went ahead and wrote this code from scratch. Main features are:

• easily (really easily!) customizable and embeddable. The code is based on the UITableView subclassing approach, so once you need to add the chat facility to the app - consider this as simply adding the UITableView, where each cell is a messag
• easily customizable bubble's color and style - there's 2 pictures, that can be easily tweaked in Photoshop
• time grouping
• flexible bubble height and witdh

The code can be downloaded from GitHub, https://github.com/AlexBarinov/UIBubbleTableView

Answer 6

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