Not getting chat bubble using JSQMessageViewController in ios - ios

Question

I am not getting Chat Bubble in JSQMessageViewController but not able to get what to method to be add to get chat bubble in my chat page in IOS I am getting only Textbox and send button when I type text and click send not getting bubbles I am new please help me.
// .h File content
// ChatpageViewController.h
// ChatApp
#import <UIKit/UIKit.h>
#import <JSQMessagesViewController/JSQMessages.h>
#import <JSQMessagesViewController.h>
#import "JSQMessagesCollectionViewFlowLayout.h"
#import "JSQMessages.h"
#import "JSQPhotoMediaItem.h"
#import "JSQLocationMediaItem.h"
#import "JSQVideoMediaItem.h"
#import "JSQMessagesMediaViewBubbleImageMasker.h"
#import "JSQMessagesAvatarImage.h"
#import "JSQMessagesAvatarImageFactory.h"
#import "JSQMessagesBubbleImage.h"
#import "JSQMessagesBubbleImageFactory.h"
#import "UIImage+JSQMessages.h"
#interface ChatpageViewController : JSQMessagesViewController<JSQMessagesCollectionViewDataSource,JSQMessagesCollectionViewDelegateFlowLayout,JSQMessagesCollectionViewCellDelegate,JSQMessageData,JSQMessageMediaData,JSQMessageAvatarImageDataSource,JSQMessageBubbleImageDataSource>
#property(nonatomic,strong)NSDictionary * receivedict;
#property (strong, nonatomic) IBOutlet UILabel *name;
#property (strong, nonatomic) IBOutlet UILabel *mobile;
- (IBAction)cancelbtn:(id)sender;
#end
M File starts from here
//
// ChatpageViewController.m
// ChatApp
//
#import "ChatpageViewController.h"
#interface ChatpageViewController ()
{
}
#end
#implementation ChatpageViewController
#synthesize receivedict,name,mobile;
-(void)viewWillAppear:(BOOL)animated
{
self.collectionView.collectionViewLayout.springinessEnabled = YES;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
[self.navigationController setNavigationBarHidden:YES animated:YES];
NSLog(#"%#",receivedict);
name.text = [receivedict objectForKey:#"Name"];
id.text =[receivedict objectForKey:#"Id"];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (NSString *)senderId
{
return [receivedict objectForKey:#"Id"];
}
- (NSString *)senderDisplayName
{
return [receivedict objectForKey:#"Name"];
}
- (NSDate *)date
{
return 18/03/2016;
}
- (void)didPressSendButton:(UIButton *)button withMessageText:(NSString *)text senderId:(NSString *)senderId senderDisplayName:(NSString *)senderDisplayName date:(NSDate *)date
{
[JSQSystemSoundPlayer jsq_playMessageSentSound];
JSQMessage *message = [[JSQMessage alloc] initWithSenderId:senderId
senderDisplayName:senderDisplayName
date:date
text:text];
// [demoData.messages addObject:message];
[self finishSendingMessageAnimated:YES];
NSLog(#"%#",message);
}
- (IBAction)cancelbtn:(id)sender
{
[self.navigationController popViewControllerAnimated:YES];
}
#end

Answer 1

There is lots of problem in your code .. You are not implementing all JSQ methods .. kindly check how to integrate JSQMessageViewController and than for bubbles that is you main question check answer below :-
You have to use JSQMessagesBubbleImage class to get bubbles like ...
in .h file define
#property (strong, nonatomic) JSQMessagesBubbleImage *outgoingBubbleImageData;
#property (strong, nonatomic) JSQMessagesBubbleImage *incomingBubbleImageData;
in .m file in viewDidLoad
JSQMessagesBubbleImageFactory *bubbleFactory = [[JSQMessagesBubbleImageFactory alloc] init];
self.outgoingBubbleImageData = [bubbleFactory outgoingMessagesBubbleImageWithColor:[UIColor jsq_messageBubbleBlueColor]];
self.incomingBubbleImageData = [bubbleFactory incomingMessagesBubbleImageWithColor:[UIColor jsq_messageBubbleLightGrayColor]];
than provide JSQMessages CollectionView DataSource
- (id<JSQMessageBubbleImageDataSource>)collectionView:(JSQMessagesCollectionView *)collectionView messageBubbleImageDataForItemAtIndexPath:(NSIndexPath *)indexPath
{
JSQMessage *message = [messages objectAtIndex:indexPath.item];
if ([message.senderId isEqualToString:self.senderId]) {
return self.outgoingBubbleImageData;
}
return self.incomingBubbleImageData;
}

Answer 2

I tried after adding the bellow methods in my coding then I have got the bubble with the bellow post other functions - (void)didPressSendButton:(UIButton *)button etc.
- (id<JSQMessageBubbleImageDataSource>)collectionView:(JSQMessagesCollectionView *)collectionView messageBubbleImageDataForItemAtIndexPath:(NSIndexPath *)indexPath
{
JSQMessage *message = [fularray objectAtIndex:indexPath.item];
if ([message.senderId isEqualToString:self.senderId]) {
return self.outgoingBubbleImageData;
}
return self.incomingBubbleImageData;
}
- (id<JSQMessageAvatarImageDataSource>)collectionView:(JSQMessagesCollectionView *)collectionView avatarImageDataForItemAtIndexPath:(NSIndexPath *)indexPath {
return [JSQMessagesAvatarImageFactory avatarImageWithUserInitials:#"JL" backgroundColor:[UIColor blueColor] textColor:[UIColor whiteColor] font:[UIFont systemFontOfSize:12.0] diameter:30.0];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return [fularray count];
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (id<JSQMessageData>)collectionView:(JSQMessagesCollectionView *)collectionView messageDataForItemAtIndexPath:(NSIndexPath *)indexPath {
return fularray[indexPath.row];
}