JSQMessagesCollectionView (Message Bubble size all identical..)

Question

I am using JSQMessagesCollectionView to build an app which enables chat. It works really fine till now because I start to notice all the message bubbles have the width of the first one! If the message is longer than the 1st bubble, then text is cut... (I checked the messages I sent and received on the backend and the texts seem to be all fine...)

I am wondering if I did sth wrong in setting up JSQMessagesCollectionView correctly... and I can't figure it out :(

Here is my code:

// Total number of Messages in Section
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return messages.count
}

// Message Data Model At IndexPath
override func collectionView(collectionView: JSQMessagesCollectionView!, messageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageData! {

    return messages[indexPath.item]
}

//messageBubbleImageDataForItemAtIndexPath
override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {

    let message = messages[indexPath.item]

    if (outgoing(message)) {
        print(outgoingBubble)
        return outgoingBubble
    } else {
        return incomingBubble
    }
}

override func collectionView(collectionView: JSQMessagesCollectionView!, avatarImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageAvatarImageDataSource! {

    return avatarImageBlank // Return an empty avatar image for now
}


// Collection View text color and hyperlink
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    let cell = super.collectionView(collectionView, cellForItemAtIndexPath: indexPath) as! JSQMessagesCollectionViewCell

    let message = messages[indexPath.item]

    if (outgoing(message)) {

        cell.textView!.textColor = UIColor.whiteColor()
    } else {
        cell.textView!.textColor = UIColor.blackColor()
    }

    // Under line links
    let attributes : [String:AnyObject] = [NSForegroundColorAttributeName:cell.textView!.textColor!, NSUnderlineStyleAttributeName: 1]
    cell.textView!.linkTextAttributes = attributes

    return cell
}


// Usernames above bubbles at Indexpah
override func collectionView(collectionView: JSQMessagesCollectionView!, attributedTextForMessageBubbleTopLabelAtIndexPath indexPath: NSIndexPath!) -> NSAttributedString! {

    let message = messages[indexPath.item]

    if (outgoing(message)) {
        return nil
    }

    // Same as previous sender, skip, eg. 2nd message from other sender
    if indexPath.item > 0 {
        let previousMessage = messages[indexPath.item - 1]

        if (previousMessage.senderId() == message.senderId()) {

            return nil
        }
    }

    // Otherwise, mark sender's name
    return NSAttributedString(string:message.senderDisplayName())

}

//heightForMessageBubbleTopLabelAtIndexPath (Flow Layout)

override func collectionView(collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForMessageBubbleTopLabelAtIndexPath indexPath: NSIndexPath!) -> CGFloat {

    let message = messages[indexPath.item]

    // Sent by sendor, skip

    if (outgoing(message)) {
        return CGFloat(0.0)
    }

    // Same as previous sender, skip
    if indexPath.item > 0 {
        let previousMessage = messages[indexPath.item - 1]
        if (previousMessage.senderId() == message.senderId()) {
            return CGFloat(0.0)
        }
    }
    return kJSQMessagesCollectionViewCellLabelHeightDefault
}

I defined the incoming and outgoing message bubbles as follows:

let incomingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.lightGrayColor())
let outgoingBubble = JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImageWithColor(UIColor(red: 82.0/255.0, green: 181.0/255.0, blue: 1, alpha: 1.0))

score 1 · Answer 1 · answered Feb 12 '16 at 04:45

1

You also may just have not implemented the '_hash' for you message model. That's what I did when I implemented the first time.

answered Feb 12 '16 at 04:45

Dan Leonard

3,325
1
20
32

Sorry Daniel, I had a version which I also implemented the hash. But it was not the reason. The way I solved it was to delete this data model and use JSQMessage directly.. – Yanyan Feb 12 '16 at 08:43
Thats good but you should still be able to implement your own message Model and it work. I am just wondering if we can add better documentation on JSQMessageViewController to make this less of a hassle. Is it possible for you to accept your answer. – Dan Leonard Feb 12 '16 at 20:17
you are right! I still don't know why my message model introduces the behaviour I described above... – Yanyan Feb 12 '16 at 20:25
would you mind sharing you old model code. If you can. – Dan Leonard Feb 12 '16 at 20:25
that would be great! I will send it to u once I am back home – Yanyan Feb 12 '16 at 20:27
1

https://www.dropbox.com/s/rwdlugplqe9jjmk/Messaging.swift?dl=0 thanks! @DanielLeonard – Yanyan Feb 16 '16 at 15:59
btw, I am using the latest released version of jsqmessageViewController – Yanyan Feb 16 '16 at 17:00

Yanyan · Accepted Answer · 2016-02-12T16:43:49.657

0

OK I solved the problem myself. The reason for this behaviour was because I have created a custom JSQMessage data model (eg. a Messaging class) for my project. When I use the default JSQMessage Data model, everything works perfectly (as shown below).

    func createTextMessage(item: [String: AnyObject]) -> JSQMessage {

    return JSQMessage.init(senderId: item["userId"] as! String,
                            senderDisplayName: item["name"] as! String,
                            date: String2Date(item["date"] as! String),
                            text: item["text"] as? String)
}

edited Feb 12 '16 at 16:43

answered Jan 28 '16 at 23:27

Yanyan

92
9

Can you elaborate? Did you just create JSQMessages and make them the dataSource? Or did you still override the cellForItemAtIndexPath and implement the cell yourself? – Paul Lehn Feb 02 '16 at 17:39
@PaulLehn Sorry it took me quite long to reply. I have edited my answer above. For the cell, I used "JSQMessagesCollectionViewCell" and it was not customized – Yanyan Feb 12 '16 at 16:41
hiii @Yanyan u have used this lib using firebase or php as backend i need help – Dilip Tiwari Sep 05 '18 at 05:50

JSQMessagesCollectionView (Message Bubble size all identical..)

2 Answers2