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:
- Download and unpack the source with link above.
- Export the files under the
imagesdirectory into your Xcode project
UIBubbleTableViewto your view and implement
Check out the demo project which is located in
example directory to see how it works.
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
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
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 (
- Message type: incoming or outgoing (
- Message date (
It's good idea to use
+ (id)dataWithText:(NSString *)text date:(NSDate *)date type:(NSBubbleType)type to create bubble data.
- 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 firstname.lastname@example.org
Special thanks to: