JSQMessagesViewController message bubbles are aligning irregular - ios

Question

I am developing an app using JSQMessagesViewController. But there is problem that message bubbles are aligning irregular order in collectionView.
Here is a Screenshot
Here is the code:
import UIKit
class mDetailContainerViewController: JSQMessagesViewController, JSQMessagesCollectionViewDelegateFlowLayout{
var userName = ""
var messages = [JSQMessage]()
let incomingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.lightGrayColor())
let outgoingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.greenColor())
override func viewDidLoad() {
super.viewDidLoad()
self.userName = "iPhone"
for i in 1...10{
var sender = (i%2 == 0) ? "Syncano" : self.userName
var message = JSQMessage(senderId: sender, displayName: sender, text: "Text")
self.messages += [message]
}
self.collectionView.reloadData()
self.senderDisplayName = self.userName
self.senderId = self.userName
// Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func collectionView(collectionView: JSQMessagesCollectionView!, messageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageData! {
var data = self.messages[indexPath.row]
return data
}
override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {
var data = self.messages[indexPath.row]
if (data.senderId == self.senderId){
return self.outgoingBubble
}else{
return self.incomingBubble
}
}
override func collectionView(collectionView: JSQMessagesCollectionView!, avatarImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageAvatarImageDataSource! {
return nil
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.messages.count
}
override func didPressSendButton(button: UIButton!, withMessageText text: String!, senderId: String!, senderDisplayName: String!, date: NSDate!) {
var message = JSQMessage(senderId: senderId, displayName: senderDisplayName, text: text)
messages += [message]
self.finishSendingMessage()
}
override func didPressAccessoryButton(sender: UIButton!) {
}
I searched the solution a bit on the internet, but all the instructions are just complicated. I did not figure out anything. Besides, I am not sure that I found a solution. If someone will explain the solution simply, I will be pleased.
Note: JSQMessagesViewController is shown in container view.
Lastly, how can I change the send button title and text field placeholder with using localizations.
Thanks.

Answer 1

I am not familiar with this SDK but I think it is because both of these lines
let incomingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.lightGrayColor())
let outgoingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.greenColor())
are incomingMessagesBubbleImageWithColor. Set outgoingBubble to JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImageWithColor (if that exists)
And I've never used this message class before but I believe your alignment issue with the green text might be solved with something like...
outgoingBubble.textLabel.textAlignment = NSTextAlignment.Center

Answer 2

To fix the bubble locations, remove the avatar images with this code;
self.collectionView.collectionViewLayout.incomingAvatarViewSize = CGSizeZero
self.collectionView.collectionViewLayout.outgoingAvatarViewSize = CGSizeZero

Answer 3

For anybody having troubles with this in the future check that your code doesnt look like this:
override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {
let data = messages[indexPath.row]
if data.senderId == currentUser.objectId! {
return incomingBubble
} else {
return outgoingBubble
}
}
it should look like this:
override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {
let data = messages[indexPath.row]
if data.senderId == PFUser.currentUser()!.objectId! {
return outgoingBubble
} else {
return incomingBubble
}
}
that fixed it for me!

Answer 4

in Swift 3:
For your specific problem that's centering the text inside the bubble:
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = super.collectionView(collectionView, cellForItemAt: indexPath) as! JSQMessagesCollectionViewCell
cell.textView.textAlignment = .center
return cell
}