How to add time label into the message bubble?

Question

I'm using JSQMessageController in my app and now I want to add time label inside of my bubbles.

I searched in my directories, but did not find image assets folder. But when I'm typing an image/asset name here:

I'm trying this one:

override func collectionView(collectionView: JSQMessagesCollectionView!, attributedTextForCellBottomLabelAtIndexPath indexPath: NSIndexPath!) -> NSAttributedString! {
    let message: JSQMessage = self.messages[indexPath.item] as! JSQMessage
    return JSQMessagesTimestampFormatter.sharedFormatter().attributedTimestampForDate(message.date)
}

but this is not what I want. I want to add this label into the message bubble.

Any suggestions, even written in Objective-C?

You will have to make changes in `JSQMessageController` inorder to do that. — Harikrishnan, Nov 25 '15 at 08:28
I have once used the `JSQMessageController` and as far as I know it doesn't have any method to show the time inside the bubble. So to do that you will have to edit the library yourself and add the code for that. — Harikrishnan, Nov 25 '15 at 10:42

score 1 · Answer 1 · answered Nov 21 '16 at 10:59

Please try this. It will work for me.

- (UICollectionViewCell *)collectionView:(JSQMessagesCollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{

    JSQMessagesCollectionViewCell *cell = (JSQMessagesCollectionViewCell *)[super collectionView:collectionView cellForItemAtIndexPath:indexPath];

    JSQMessage *message = [jsqmessages objectAtIndex:indexPath.item];
    //cell.messageBubbleTopLabel.text = message.senderDisplayName;
    NSDateFormatter *dateFormat = [[NSDateFormatter alloc]init];
   [dateFormat setDateFormat:@"MMM dd, yyyy"];
    NSString *strDate = [dateFormat stringFromDate:message.date];
    cell.cellTopLabel.text = strDate;
    return cell;
}

score 0 · Answer 2 · answered Jul 09 '17 at 10:02

0

If you want to add a time label, you have to change the xib file of JSQMessagesCollectionViewCellOutgoing and also for the Incoming bubbles.

answered Jul 09 '17 at 10:02

Edin

1

pragmus · Answer 3 · 2016-11-22T10:41:29.260

The best approach that I found was to subclass JSQMessagesCollectionViewCellIncoming and JSQMessagesCollectionViewCellOutgoing. This is very important, because the library is expecting one of those types, you will run into trouble if you subclass from JSQMessagesCollectionViewCell directly. BTW, I copied the existing JSQMessagesCollectionViewCellOutgoing.xib, JSQMessagesCollectionViewCellIncoming.xib and changed/renamed everything and this made it easier for me to start my customization of the cells.

Then in your JSQMessagesViewController subclass, register cell identifiers in your viewDidLoad() like so:

    self.outgoingCellIdentifier = [CustomCollectionViewCellOutgoing cellReuseIdentifier];
    self.outgoingMediaCellIdentifier = [CustomCollectionViewCellOutgoing mediaCellReuseIdentifier];

    [self.collectionView registerNib:[CustomCollectionViewCellOutgoing nib] forCellWithReuseIdentifier:self.outgoingCellIdentifier];
    [self.collectionView registerNib:[CustomCollectionViewCellOutgoing nib] forCellWithReuseIdentifier:self.outgoingMediaCellIdentifier];

    self.incomingCellIdentifier = [CustomCollectionViewCellIncoming cellReuseIdentifier];
    self.incomingMediaCellIdentifier = [CustomCollectionViewCellIncoming mediaCellReuseIdentifier];

    [self.collectionView registerNib:[CustomCollectionViewCellIncoming nib] forCellWithReuseIdentifier:self.incomingCellIdentifier];

Then in collectionView:cellForItemAtIndexPath: you can access your custom cell:

[self.collectionView registerNib:[CustomCollectionViewCellIncoming nib] forCellWithReuseIdentifier:self.incomingMediaCellIdentifier];

Answer source link: https://github.com/jessesquires/JSQMessagesViewController/issues/1233

How to add time label into the message bubble?

3 Answers3