Swift - JSQMessagesViewController - cell custom - swift

Question

I understood from this link that you can customise the cell of the JSQMessagesViewController library by overriding this method:
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
//Configure your cell here
return //yourCustomCell
}
Is there a possibility to get a sample code to understand how to implement the actual customisation including the subclass of the JSQMessagesCollectionViewCell?
As an example, I would like to add a label included at the bottom of the message bubble showing the time the message has been sent.
Thank you.
EDIT
I have created a custom cell class as follow:
class MyCustomCell: JSQMessagesCollectionViewCell {
var textLabel: UILabel
override init(frame: CGRect) {
self.textLabel = UILabel(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height/3))
super.init(frame: frame)
self.textLabel.font = UIFont.systemFontOfSize(UIFont.smallSystemFontSize())
self.textLabel.textAlignment = .Center
contentView.addSubview(self.textLabel)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
The custom cell is made programmatically without any xib file.
So in my JSQMessagesViewController, I have to declare it as follow:
override func viewDidLoad() {
super.viewDidLoad()
self.collectionView!.registerClass(MyCustomCell.self, forCellWithReuseIdentifier: "MyCustomCell")
}
And then, I'm able to override the cellForItemAtIndexPath method as follow:
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCustomCell", forIndexPath: indexPath) as! MyCustomCell
return cell
}
The issue is that I cannot see the messages and previous settings anymore.
What am I doing wrong?

Answer 1

This is the way I managed to make it:
1- Create two sub-classes:
JSQMessagesCollectionViewCellOutgoing
import UIKit
import JSQMessagesViewController
class messageViewOutgoing: JSQMessagesCollectionViewCellOutgoing {
#IBOutlet weak var timeLabel: UILabel!
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
JSQMessagesCollectionViewCellIncoming
import UIKit
import JSQMessagesViewController
class messageViewIncoming: JSQMessagesCollectionViewCellIncoming {
#IBOutlet weak var timeLabel: UILabel!
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
2- Create two xib files with names related to the two subclasses above. For each file, add the custom class related in the File's owner Placeholder.
3- Copy/paste the xib templates of each related classes from the JSQMessagesViewController library stored in the Resources folder and add your custom label into it.
4- Link the custom labels to your new subclasses above
5- Override the following function
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let message = self.messages[indexPath.item]
if message.senderId == self.senderId {
let cell = super.collectionView(collectionView, cellForItemAtIndexPath: indexPath) as! messageViewOutgoing
cell.timeLabel.text = localHourFormatter.stringFromDate(message.date)
return cell
} else {
let cell = super.collectionView(collectionView, cellForItemAtIndexPath: indexPath) as! messageViewIncoming
cell.timeLabel.text = localHourFormatter.stringFromDate(message.date)
return cell
}
}
Now the label is displayed in the bubble.
Still some work to do to adapt the size of the bubble for a proper display but this is not the purpose of this question.
Let me know if any comment/question.

Answer 2

Go to xcode make a new file then choose Cocoa Touch class and in subclass list choose
UICollectionViewCell and put your custom cell name like
customCellUICollectionViewCell.swift
After that go Mainstoryboard and drag a new collection cell to your view
Select your cell and in the right side menu in xcode choose
Show the identity inspector
and in Custom class type your custom class name
customCellUICollectionViewCell.swift
last thing in your collection view
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! customCellUICollectionViewCell
return cell
}

Answer 3

I believe that you are just not setting the text of you custom cell. I would also guard for safety
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
guard let cell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCustomCell", forIndexPath: indexPath) as? MyCustomCell else {
print("Could not get my custom cell")
return UICollectionViewCell()
}
let message = messages[indexPath.row] // or what ever your messages are called
let cell.mainLabel.text = message.text
return cell
}

Answer 4

I got error: Can't cast from messageViewOutgoing to JSQMessagesCollectionViewCellIncoming #sbkl. Did you get this error, because we can't cast from parent type to child type?