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

  • NSMutableArray Difficulty
  • EXC_BAD_ACCESS on custom UIView with custom XIB
  • Jazzy is not working as expected for generating swift documentation
  • ios: how to dismiss a modal view controller and then pop a pushed view controller
  • NSBatchDeleteRequest in Swift 3 for iOS 10 only?
  • Inserting an HTTP stream into a AVMutableComposition
  • 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.

    4 Solutions Collect From Internet About “JSQMessagesViewController message bubbles are aligning irregular”

    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
    

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

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

    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!

    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
    }