JSQMessagesViewController message bubbles are aligning irregular

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.

Did you try any debugging? Reading the code for `JSQMessagesViewController`? — Aaron Brager, Aug 04 '15 at 13:27
Yes tried something. And I wrote the code from this link; http://www.syncano.com/ios-chat-app-jsqmessagesviewcontroller/ — Faruk, Aug 04 '15 at 13:35

score 4 · Accepted Answer · answered Aug 04 '15 at 13:32

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

I am very very embarrassed. I can't believe that.It worked of course. Thanks — Faruk, Aug 04 '15 at 13:41

score 2 · Answer 2 · answered Aug 04 '15 at 15:08

2

To fix the bubble locations, remove the avatar images with this code;

self.collectionView.collectionViewLayout.incomingAvatarViewSize = CGSizeZero
self.collectionView.collectionViewLayout.outgoingAvatarViewSize = CGSizeZero

answered Aug 04 '15 at 15:08

Faruk

2,269
31
42

score 1 · Answer 3 · answered Jul 11 '16 at 13:34

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!

score 1 · Answer 4 · answered Dec 19 '16 at 14:48

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
}

JSQMessagesViewController message bubbles are aligning irregular

4 Answers4