Search code examples
iosswiftuicollectionviewcelljsqmessagesviewcontroller

How to add custom view to JSQMessagesViewController cell so that it includes one view with some buttons and text view?

I am using https://github.com/jessesquires/JSQMessagesViewController/issues/1820 this library for chat application. By using this libary I am able to send images and video, but my app needs to send one view with some button and text. Like when user sends some text it will appear to others as text and button and then when somebody clicks the button one push notification will be generated. I am not able to figure it out how can I achieve this.

enter image description here

Here is screen shot how I want my custom view to be. It has some text user has typed and has 2 button for accept and reject.

Solution

  • I would suggest that you create your own custom view for this. You can use the JSQIncomingCollectionViewCell.xib or JSQOutgoingCollectionViewCell.xib as a template for your self.

    1. Copy them from the example project and paste them into your own
    2. Rename the files to something else like CellWithConfimationButtons

    3. In your ChatViewController i.e. what ever you called the view that is a subclass of 'JSQMessagesViewController'. Add these two lines

      self.collectionView.registerNib(UINib(nibName: "CellWithConfimationButtons", bundle: nil), forCellWithReuseIdentifier: "incomingCell") self.collectionView.registerNib(UINib(nibName: "CellWithConfimationButtons", bundle: nil), forCellWithReuseIdentifier: "outgoingCell")

    4. Now you can add your buttons to the xib files Xib With Buttons

    5. Add Constraints so that it lays its self out right.

    6. Set your Images for those and then you need to make your files that support this guy. Just like JSQMessagesCollectionViewCellOutgoing.m and JSQMessagesCollectionViewCellOutgoing.h Then you need to add you IBOutlets for the buttons and add the actions and logic in that file

    Then you need to set a flag or some way of determining that the message is this type of message with buttons.

    1. Then in your collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath)

    you check for that flag and get your cell

    if message.flag == true let cell = collectionView.dequeableCellWithIdentifier("incomingCell")

    Then set everything up.

    I hope that helps. let me know if I can help more. 😜