Implement view like standard iPhone SMS-chat bubbles view

Question

Does anybody know how to implement such view, any tutorials, code examples, ideas.

Other good example of such view is Tweetie application that is on top of social networking appstore applications. See first screenshot of that app on appstore.

I appreciate any ideas on that.

Answer 1

I'm pretty sure they're basically table-views with cells of different heights that are custom-drawn. You can do a lot by supplying your own background and content view's in a UITableViewCell.

Answer 2

There are some thoughts on this here:

Creating a “chat bubble” user experience

Be sure to read the comments on the answers as well!

Answer 3

Here's the answer, with example code, direct from the source (the creator of Tweetie): http://blog.atebits.com/2008/12/fast-scrolling-in-tweetie-with-uitableview/

From the blog post: "The technique is extensible to pretty much any style cell you need - I use the same thing in Tweetie and draw the chat bubble, text, and avatar all together into a single view." You can use - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight to create a stretchable chat bubble to put behind each cell in your table view

Answer 4

We're working on this here: http://github.com/acani/acani-chat/tree/master/Lovers/

Currently, I'm wondering how to make the input UITextView's height increase on Return (newline).

I just found an identical background image for the UITextView here: http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements

Maybe we could use that and set it to be stretchable. Any ideas?

Comments, questions, and contributions are welcomed.

Thanks!

Matt