add subview to collectionview cell jsqmessagesviewcontroller - ios

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.