add subview to collectionview cell jsqmessagesviewcontroller

Question

I'm trying to add a subview to each cell (message) of my collectionView ( JSQMessagesViewController ) to display time of my message, something like this:

Here is my code:

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = super.collectionView(collectionView, cellForItemAt: indexPath) as! JSQMessagesCollectionViewCell

        let message = messages[indexPath.item]

        let timeLabel = UILabel()
        timeLabel.frame = cell.textView.frame
        timeLabel.text = "abc"
        timeLabel.textColor = .blue

        cell.addSubview(timeLabel)

        if message.senderId == senderId { // 1
            cell.textView?.textColor = UIColor.black // 3
            cell.avatarImageView.image = self.avatars.0.image
            cell.avatarImageView.layer.cornerRadius = cell.avatarImageView.frame.size.height / 2
            cell.avatarImageView.clipsToBounds = true
        } else {

            cell.textView?.textColor = UIColor.black // 2
            cell.avatarImageView.image = self.avatars.1.image
            cell.avatarImageView.layer.cornerRadius = cell.avatarImageView.frame.size.height / 2
            cell.avatarImageView.clipsToBounds = true

        }

        return cell
    }

But it adds me 2 labels:

Why there are 2 labels? And how can I add this label particularly to the bottom-right of my message? Thanks in advance!

Answer 1

Check JSQMessagesCollectionViewCellIncoming.nib and JSQMessagesCollectionViewCellIncoming.nib and adjust the Cell bottom label as per your need to make it look like your design.Adjust Autolayout constraint and done.

Answer 2

Problem 1

Basically, you are creating every time new instance of label.

let timeLabel = UILabel()
timeLabel.frame = cell.textView.frame
timeLabel.text = "abc"
timeLabel.textColor = .blue

Due to the concept of reuses, the cell will reuse everything for the next time. So when you add the subview of timeLabel for the first time that is ready to reuse for the next time. and you are adding again it let timeLabel = UILabel() while the label already there and you are putting a new instance every time.

Solution 1

You have to add the subview once and reuse it by using the tag.

Declare the let timeLabel :UILabel? at class level means where your all variables are declare and check its reference in the cellForItemAt atIndexPath like

if timeLabel == nil {
    timeLabel = UILabel()
    timeLabel.frame = cell.textView.frame
    timeLabel.text = "abc"
    timeLabel.textColor = .blue
    timeLabel.tag = 766
    cell.addSubview(timeLabel)
}

And last get it with the tag in the cellForItemAt atIndexPath

Problem 2

That is not in the bottom right because after awakeFromNib() in JSQMessagesCollectionViewCell this is not adding means label adds before setupLayout.

Solution 2

A: You have to add the constraint manually.

B: OR you can try by setting the frame at last line before returning cell.