Cocoa UI component for chat bubbles with avatars and images support
Home Page: http://alexbarinov.github.com/UIBubbleTableView/
Please note that unfortunatelly I don't have spare time to support this repository. Maybe there will be iOS8 like UIBubbleTableView someday.
Visit project home page http://alexbarinov.github.com/UIBubbleTableView/ for installation guide and example preview.
This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/
Alex Barinov [email protected]
Got his 'warning in the logs' even when i copy the example project into my app. This framework doesn't work at all.
Unknown class UIBubbleTableView in Interface Builder file.
This isn't really an issue but perhaps something to be placed in the doc. If you encounter chats which overlap vertically, the problem is likely that you've assigned the .delegate property of your BubbleTableView -- this breaks the connection created in your initializator method. Perhaps you could raise some sort of warning if the delegate isn't self?
There's no something like 'cellForRowAtIndexPath:'. NSBubbleData class makes it difficult to cache large images, which can bring me memory warning. ps. I think this can be solved by inheriting NSBubbleData (providing URL of an image instead of a view) & UIBubbleTableViewCell
Hi all,
I need add header cell but I have any problems.
Help me please.
Luca
Are there any plans to upgrade this to support the larger screen sizes and changes in iOS7?
thanks
Hi
It would be really nice, and pretty easy to convert this project to be ARC friendly.
Basically Just remove all autorelase, retain and release statements.
How to add Bubble with time please see the attached image.
how can i put a gesture for image and put delegate for this gesture
will be good addition to This ;-)
I Wanna Replace Avatar Image With Uilabel ..
What I Should Edit ?
Hello Alex,
first i wanna thank you for the great work! I searched a lot and tryed also my own solution but your one is by far the best!
To my issue:
I m using your view with a Tab bar Controller and i got two problems:
I hope u can help me with that or anyone else!
btw.. i had also that constraints error when entering the view but i turned off autolayout and the error is gone.. maybe that is in anykind importand.
ty, deada92
Sometimes the text in the bubble doesn't appear. This happens very often. Any ideas?
I've noticed that the bubble appears and stretches correctly based on the text - it's just that the text doesn't display.
Hi! How can I save to a core data (NSData) the bubbleData (NSMutableArray with filled up NSBubbleData classes) array? I tired with the NSKeyedArchiver method but i got this error message: -[NSBubbleData encodeWithCoder:]: unrecognized selector sent to instance 0x7457ea0
Hi
Great project. The only thing missing in this project to be a perfect chatTableView is support for photos.
Users expect, just like the built-in Message app in iOS, to be able to send photos to each other along side with the message text. And when they press the photo in the tableview they should be able to see a fullscreen view of the photo.
Is it possible for you to implement photo support within the next 2 coming months?
Br
Dennis
Hi,
I try to call insertRowsAtIndexPaths b/c I don't want to call reloadData every time I got a new message. I think this should be proper behaviors when updating UITableViewController. But after reading the implementation of UIBubbleTableView I am not sure if this is the case.
But the problem is that when I call insertRowsAtIndexPaths I always get NSInternalInconsistencyException.
int sec = [bubbleTable numberOfSections]-1;
int row = [bubbleTable numberOfRowsInSection:sec];
[bubbleData addObject:[NSBubbleData dataWithText:msg andDate:[NSDate dateWithTimeIntervalSinceNow:0] andType:BubbleTypeMine]];
NSIndexPath *updatePath = [NSIndexPath indexPathForRow:row inSection:sec];
[bubbleTable insertRowsAtIndexPaths:@[updatePath] withRowAnimation:UITableViewRowAnimationAutomatic];
*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'attempt to insert row 1 into section 1, but there are only 1 rows in section 1 after the update'
To debug the problem I tried to insert the new row into the first row instead of last row.
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
But I still get NSInternalInconsistencyException
*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid update: invalid number of rows in section 1. The number of rows contained in an existing section after the update (1) must be equal to the number of rows contained in that section before the update (1), plus or minus the number of rows inserted or deleted from that section (1 inserted, 0 deleted) and plus or minus the number of rows moved into or out of that section (0 moved in, 0 moved out).'
Can you add a feature that displays custom emoticons?
hello,
I got your tableView by "pod 'UIBubbleTableView', '~> 0.2' " .But the code is different from that I cloned from GIT. DId I do something wrong?
Hi,
It is a small thing, but in the current version there is one build error when using ARC.
In 'UIBubbleHeaderTableViewCell.m' at line 33;
[dateFormatter release];
should be
[dateFormatter release];
Then it is fixed.
And changing line 51 to:
self.label.textAlignment = NSTextAlignmentCenter;
fixed the waring in iOS 6 too.
I'm not sure how this happens, but this is the log:
2012-10-12 15:12:24.370 gdt-iphone[20333:c07] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
(
"<NSAutoresizingMaskLayoutConstraint:0xc8ee9d0 h=-&- v=-&- UIViewControllerWrapperView:0xc83d6f0.height == UINavigationTransitionView:0xa7957e0.height - 44>",
"<NSAutoresizingMaskLayoutConstraint:0xc865730 h=-&- v=-&- UILayoutContainerView:0xa793040.height == UIView:0xb362280.height>",
"<NSAutoresizingMaskLayoutConstraint:0xb3965a0 h=-&- v=-&- UINavigationTransitionView:0xa7957e0.height == UILayoutContainerView:0xa793040.height>",
"<NSAutoresizingMaskLayoutConstraint:0xc88c810 h=--- v=--- V:[UIWindow:0xa78fc20(480)]>",
"<NSAutoresizingMaskLayoutConstraint:0xc88b220 h=-&- v=-&- UIView:0xb362280.height == UIWindow:0xa78fc20.height - 20>",
"<NSLayoutConstraint:0x1936fc30 V:[GBubbleTableView:0xd113600(462)]>",
"<NSLayoutConstraint:0x1939bd80 V:[GBubbleTableView:0xd113600]-(42)-| (Names: '|':UIView:0x1939b610 )>",
"<NSAutoresizingMaskLayoutConstraint:0xc851d30 h=-&- v=-&- UIView:0x1939b610.height == UIViewControllerWrapperView:0xc83d6f0.height>",
"<NSLayoutConstraint:0x1939bd40 V:|-(0)-[GBubbleTableView:0xd113600] (Names: '|':UIView:0x1939b610 )>"
)
Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x1936fc30 V:[GBubbleTableView:0xd113600(462)]>
Break on objc_exception_throw to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
It's possible to add a title to the avatar?
Thanks for your work.
i tried to add a time label over the left corner of the chat text. but the time lable was hidden if the previous chat item was an image. refer the image
how can fix this. i modified insets of image and text
Hi, how can i change background color ? it's always white and i would like to have clean color. thanks
I tried changing the bubble images but after changing images in image folder the image don't get changed. need to have diffrent images there... can you help me with that.
Cells are not displayed when using "UIBubbleTableView"' and testing the app in 64-bit iPhone/Simulator.
The issue was because "UIBubbleTableView"'s "heightForRowAtIndexPath" delegate method is written like this :
"- (float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath"
and it s*cks because Xcode gives out a warning (and no one cares about it).
Saying that the method must be written like this :
"- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath"
After fixing this s*cking warning, the cells were given proper height and were displayed correctly.
It ruined more than 4 hours of my productive time to find a fix for it.
Probably, i should've searched it in Stack Overflow first instead of debugging for so long hours and should've found this :
http://stackoverflow.com/a/21210006/1222674
I am not willing to give a PR to fix this simple s*ucker.
Only Logging it here to save someone else's(like me) time.
When I analyze the code in my non-arc project, each allocation of cell in UIBubbleTableView is marked as a potential memory leak. Other examples of adding cells to table views use the [[[class alloc] init] autorelease] paradigm. Should this be added to the code?
Similarly, analyze marks UIBubbleHeaderTableView's creation of the lable as a potential leak. The existing code has [[UILabel alloc] initWithFrame: ...], and it appears we should autorelease it.
Finally, analyze also marks the alloc/init in setType: as a potential leak.
I Wanna Make Certain Action When user Scroll To Top Where I Can Write This Action ?
if I want to implement a didSelectRowAtIndexPath (to push a new View when a user selects a bubble) in UIBubbleTableView, how would you suggest to catch the event in ControllerView
Any configurations? Thanks.
Hello,
really great jon done!
Is it possible to show the time next to the bubbles ?
IMessage shows the time when sliding the bubbles to left side.
Please help.
Thanks!
I have forked it to
and will continue accepting pull requests and pushing to cocoapods at that repository
Hi , i want to add a button in each cell (ex: add to favorite) ,if user click the button then He can able to add that chat text as favorite. so how can i add the button to Each cell ? I added in UIBubbleTableViewCell class but the action not calling. any help will be highly appreciated.
while using image urls to load in chat table , the location of the image view changes at first time
One doubt... is there some way to "override" auto ordering of the bubble table view?
I need newer to older order (newer in first row).
My data source provides me in that order and i want to keep it.
Thanks for your amazing job
Bye
if we set snap interval, messages display based snapinterval. how to list out the message based on the data's date
update: replace the below method in uibubbletableview:
(void)reloadData
{
self.showsVerticalScrollIndicator = NO;
self.showsHorizontalScrollIndicator = NO;
// Cleaning up
self.bubbleSection = nil;
// Loading new data
int count = 0;
self.bubbleSection = [[[NSMutableArray alloc] init] autorelease];
self.bubbleSection = [[NSMutableArray alloc] init];
if (self.bubbleDataSource && (count = [self.bubbleDataSource rowsForBubbleTable:self]) > 0)
{
NSMutableArray *bubbleData = [[[NSMutableArray alloc] initWithCapacity:count] autorelease];
NSMutableArray *bubbleData = [[NSMutableArray alloc] initWithCapacity:count];
for (int i = 0; i < count; i++)
{
NSObject *object = [self.bubbleDataSource bubbleTableView:self dataForRow:i];
assert([object isKindOfClass:[NSBubbleData class]]);
[bubbleData addObject:object];
}
[bubbleData sortUsingComparator:^NSComparisonResult(id obj1, id obj2)
{
NSBubbleData *bubbleData1 = (NSBubbleData *)obj1;
NSBubbleData *bubbleData2 = (NSBubbleData *)obj2;
return [bubbleData1.date compare:bubbleData2.date];
}];
NSMutableArray *currentSection = nil;
NSMutableArray * datesArray = [[NSMutableArray alloc]init];
for (int i = 0; i < count; i++)
{
NSBubbleData *data = (NSBubbleData *)[bubbleData objectAtIndex:i];
NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
[dateFormat setLocale:[[NSLocale alloc] initWithLocaleIdentifier:@"en_US"]];
[dateFormat setDateFormat:@"MMMM d, yyyy"];
NSString* timeString =[dateFormat stringFromDate:data.date];
if(![datesArray containsObject:timeString])
{
[datesArray addObject:timeString];
}
}
for (int j = 0; j <[datesArray count]; j++)
{
currentSection = [[NSMutableArray alloc] init];
for (int i = 0; i < count; i++)
{
NSBubbleData *data = (NSBubbleData *)[bubbleData objectAtIndex:i];
NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
[dateFormat setLocale:[[NSLocale alloc] initWithLocaleIdentifier:@"en_US"]];
[dateFormat setDateFormat:@"MMMM d, yyyy"];
NSString* timeString =[dateFormat stringFromDate:data.date];
if ([timeString isEqualToString:[datesArray objectAtIndex:j]])
{
[currentSection addObject:data];
}
}
[self.bubbleSection addObject:currentSection];
}
}
[super reloadData];
}
Would be nice to be able to tap and hold on a bubble to copy the text to the clipboard. The "messages" app on ios does this. Great control.. thanks!
HHow Can we implement load more option for more data option. this is great sample Thanks
First let me thank you for this great job , how can i add load more of the top off table view
I need the ability to include several people in a conversation thread. Additionally, I would like to be able to see the people in the group at the top, similar to the iPhone Messages app.
Hi Alex, could you please create a new tag with the latest changes? I'm using cocoapods and the version 0.2 is quite old by now. Thanks and Regards.-
Undefined symbols for architecture i386:
"OBJC_CLASS$_NSBubbleData", referenced from:
objc-class-ref in ChatViewController.o
ld: symbol(s) not found for architecture i386
clang: error: linker command failed with exit code 1 (use -v to see invocation)
When trying to place .. in viewdidload
NSBubbleData *heyBubble = [NSBubbleData dataWithText:@"Hey, halloween is soon" date:[NSDate dateWithTimeIntervalSinceNow:-300] type:BubbleTypeSomeoneElse];
heyBubble.avatar = [UIImage imageNamed:@"avatar1.png"];
Check out:
https://github.com/mattt/TTTAttributedLabel/
I've used it for attributed text but also has a nice feature which makes urls clickable (as well as dates and phone numbers). Might be a nice addition.
How can I do it when received from the push notification of new messages, in order to reload the bubbleTable from didReceiveRemoteNotification?
Hi mate
Text bubbles overlaps on each other all items showing on the same cell.
I just used UIbubbletableview in new project without any other framework. This project is also working fine with iPhone Retina (4-inch) simulator but not with iPhone Retina (4-inch 64bit) simulator..
I am using XCode 5.1 and iOS 7.1. This issue occurs only in 64bit simulator.
Your sample app is working fine in all simulators, but I am using storyboard and unable to figure out where is the problem.
Please help me.
Why there is no scrolling to bottom support, I've added the following line to the end of the reloadData
[self setContentOffset:CGPointMake(CGFLOAT_MAX, CGFLOAT_MAX)];
and its working fine for me.
Just FYI, the NS* and UI* prefixes for classes are reserved by Apple. It is an extremely bad practice to use them in your code. Worse than not prefixing your classes at all.
The current recommended best practice from Apple is to prefix them with 3 letters unique to your organization.
It seems like a big request to ask you to take a pull request to change it... but if you're open to it... I might make the modifications needed to change the prefixes and send you one. If, however, you don't care or don't want such a pull request, feel free to ignore this.
Everything thing is fine and I like it, but what about the red bubble for those messages which are failed to send?
reloadData with large number of cells takes a few seconds. I've tracked the issue down to the sorting code in numberOfRowsInSection, heightForRowAtIndexPath, cellForRowAtIndexPath. Why is it necessary to to sort the array in every call of each method?
I've moved the sorting code to the reloadData methods so it would execute only once. It solved the performance problem and everything else seems to be working fine.
I added a UILabel under the chat bubble like so:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"Cell";
UIImageView *balloonView;
UILabel *label;
UILabel *name;
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
balloonView = [[UIImageView alloc] initWithFrame:CGRectZero];
balloonView.tag = 1;
label = [[UILabel alloc] initWithFrame:CGRectZero];
label.backgroundColor = [UIColor clearColor];
label.tag = 2;
label.numberOfLines = 0;
label.lineBreakMode = UILineBreakModeWordWrap;
label.font = [UIFont systemFontOfSize:14.0];
UIView *message = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, cell.frame.size.width, cell.frame.size.height)];
message.tag = 0;
name = [[UILabel alloc] initWithFrame:CGRectZero];
name.text = @"Test name";
name.backgroundColor = [UIColor clearColor];
name.tag = 3;
name.numberOfLines = 1;
name.lineBreakMode = UILineBreakModeTailTruncation;
name.font = [UIFont systemFontOfSize:14.0];
[message addSubview:balloonView];
[message addSubview:label];
[cell.contentView addSubview:message];
[cell.contentView addSubview:name];
[cell.contentView bringSubviewToFront:name];
[balloonView release];
[label release];
[message release];
}
else
{
balloonView = (UIImageView *)[[cell.contentView viewWithTag:0] viewWithTag:1];
label = (UILabel *)[[cell.contentView viewWithTag:0] viewWithTag:2];
}
NSString *text = [messages objectAtIndex:indexPath.row];
CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:14.0] constrainedToSize:CGSizeMake(240.0f, 480.0f) lineBreakMode:UILineBreakModeWordWrap];
UIImage *balloon;
if(indexPath.row % 2 == 0)
{
balloonView.frame = CGRectMake(320.0f - (size.width + 28.0f), 2.0f, size.width + 28.0f, size.height + 15.0f);
balloon = [[UIImage imageNamed:@"green.png"] stretchableImageWithLeftCapWidth:24 topCapHeight:15];
label.frame = CGRectMake(307.0f - (size.width + 5.0f), 8.0f, size.width + 5.0f, size.height);
name = (UILabel*) name;
name.textAlignment = NSTextAlignmentRight;
}
else
{
balloonView.frame = CGRectMake(0.0, 2.0, size.width + 28, size.height + 15);
balloon = [[UIImage imageNamed:@"grey.png"] stretchableImageWithLeftCapWidth:24 topCapHeight:15];
label.frame = CGRectMake(16, 8, size.width + 5, size.height);
}
name.frame = CGRectMake(10, balloonView.frame.size.height, 300, 30);
balloonView.image = balloon;
label.text = text;
return cell;
}
The app runs. But while scrolling, the UILabel gets converted into NSIndexPath and crashes :/
Firstly thx for this great control. If someone wants to have chat sorted newest on top, change reload data in UIBubbleTableView.m to:
- (void)reloadData
{
self.showsVerticalScrollIndicator = NO;
self.showsHorizontalScrollIndicator = NO;
// Cleaning up
self.bubbleSection = nil;
// Loading new data
int count = 0;
#if !__has_feature(objc_arc)
self.bubbleSection = [[[NSMutableArray alloc] init] autorelease];
#else
self.bubbleSection = [[NSMutableArray alloc] init];
#endif
if (self.bubbleDataSource && (count = [self.bubbleDataSource rowsForBubbleTable:self]) > 0)
{
#if !__has_feature(objc_arc)
NSMutableArray *bubbleData = [[[NSMutableArray alloc] initWithCapacity:count] autorelease];
#else
NSMutableArray *bubbleData = [[NSMutableArray alloc] initWithCapacity:count];
#endif
for (int i = 0; i < count; i++)
{
NSObject *object = [self.bubbleDataSource bubbleTableView:self dataForRow:i];
assert([object isKindOfClass:[NSBubbleData class]]);
[bubbleData addObject:object];
}
[bubbleData sortUsingComparator:^NSComparisonResult(id obj2, id obj1)
{
NSBubbleData *bubbleData1 = (NSBubbleData *)obj1;
NSBubbleData *bubbleData2 = (NSBubbleData *)obj2;
return [bubbleData1.date compare:bubbleData2.date];
}];
NSDate *last = [NSDate dateWithTimeIntervalSince1970:0];
NSMutableArray *currentSection = nil;
for (int i = 0; i < count; i++)
{
NSBubbleData *data = (NSBubbleData *)[bubbleData objectAtIndex:i];
if (([last timeIntervalSinceDate:data.date] > self.snapInterval) || (i==0))
{
#if !__has_feature(objc_arc)
currentSection = [[[NSMutableArray alloc] init] autorelease];
#else
currentSection = [[NSMutableArray alloc] init];
#endif
[self.bubbleSection addObject:currentSection];
}
[currentSection addObject:data];
last = data.date;
}
}
[super reloadData];
}
If you want, add it as option ;)
HI, i would like to point that in uibubbletableview cell ,
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.