Cocoa UI component for chat bubbles

Download .zip Download .tar.gz View on GitHub

UIBubbleTableView is UITableView based iOS component for rendering chats like it's done in Messages application. Now comes with "typing" bubble and images in the chat!


How to install

As easy as 1-2-3:

  1. Download and unpack the source with link above.
  2. Export the files under the src and images directory into your Xcode project
  3. Add UIBubbleTableView to your view and implement UIBubbleTableViewDataSource

Check out the demo project which is located in example directory to see how it works.


Messages grouping

The messages received within specified time interval will be grouped into one chat conversation. Each chat conversation is prerendered with date label. You can change this time interval by setting NSTimeInterval snapInterval property of UIBubbleTableView

Now typing bubble

You can set the "now typing" bubble (small gray bubble with 3 dots inside) with NSBubbleTypingType typingBubble property. It can be displayed like you are typing (NSBubbleTypingTypeMe), or somebody's typing (NSBubbleTypingTypeMe). Or you can hide it with NSBubbleTypingTypeNone. Table data reload is now required for the bubble to show or to hide.

Images and more...

You can now place any custom view into bubble by calling + (id)dataWithView:(UIView *)view date:(NSDate *)date type:(NSBubbleType)type insets:(UIEdgeInsets)insets. This is good approach to insert anything you want into chat bubble.

There's a decicated method to insert images into chat: + (id)dataWithImage:(UIImage *)image date:(NSDate *)date type:(NSBubbleType)type. Check out the example!

Other colors for bubbles

You are welcome to create bubbles of any color you want. To archive this open the PSD files downloaded with the project in psd folder (you'll need Adobe Photoshop), in the Shape layer change the Gradient overlay effect the way you want and save the file in PNG in the images folder.


Currently there are 2 required methods to implement in the data source:

  • - (NSInteger)rowsForBubbleTable:(UIBubbleTableView *)tableView - asks for how many chat messages will be there
  • - (NSBubbleData *)bubbleTableView:(UIBubbleTableView *)tableView dataForRow:(NSInteger)row - asks the n-th message

NSBubbleData is a class which contains the user defined info related to the chat message. It includes:

  • Message text (NSString *text)
  • Message type: incoming or outgoing (NSBubbleType type)
  • Message date (NSDate *date)

It's good idea to use + (id)dataWithText:(NSString *)text date:(NSDate *)date type:(NSBubbleType)type to create bubble data.

Planned features

  • User avatars
  • URL, phone number recognition
  • Custom header for the table so that developer can add own buttons, labels, etc.
  • Auto scroll (?)

Feedback and Acknowledgement

More features are coming soon. You are always welcome to ask questions, leave comments and report bugs with https://github.com/AlexBarinov/UIBubbleTableView/issues or contact me directly at github@alex.barinov.name

Special thanks to: