Faruk Faruk - 4 months ago 31
iOS Question

JSQMessagesViewController message bubbles are aligning irregular

I am developing an app using

JSQMessagesViewController
. But there is problem that message bubbles are aligning irregular order in
collectionView
.

Here is a Screenshot

enter image description here

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

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
Comments