JSQMessagesViewController - 发送带附加图像文件的文本消息

Question

我使用JSQMessagesViewController发送和接收消息.它适用于文本消息.是否可以使用JSQMessagesViewController Framework发送带有附加图像文件的文本消息.

单击时,应显示附加的图像文件.像这样的东西.

发送消息应在消息窗口中显示如下.

用于发送照片

- (void)addPhotoMediaMessage
{
   JSQPhotoMediaItem *photoItem = [[JSQPhotoMediaItem alloc] initWithImage:[UIImage imageNamed:@"goldengate"]];
   JSQMessage *photoMessage = [JSQMessage messageWithSenderId:kJSQDemoAvatarIdSquires
                                               displayName:kJSQDemoAvatarDisplayNameSquires
                                                     media:photoItem];
  [self.messages addObject:photoMessage];
}

发送短信

- (void)didPressSendButton:(UIButton *)button
       withMessageText:(NSString *)text
              senderId:(NSString *)senderId
     senderDisplayName:(NSString *)senderDisplayName
                  date:(NSDate *)date
{
    [JSQSystemSoundPlayer jsq_playMessageSentSound];
    JSQMessage *message = [JSQMessage messageWithSenderId:senderId
                                          displayName:senderDisplayName
                                                 text:text];
   [self.messages addObject:message];
   [self finishSendingMessageAnimated:YES];
   [self receiveAutoMessage];
}

Answer 1

要完成此任务,您必须创建自定义单元格,然后在CollectionView中使用该单元格

首先将JSQMessage类子类化为以下内容以保留图像URL(附件)的数据 -

class ChatMessage: JSQMessage {

    internal var attachments : [NSURL]?

    init(senderId: String!, senderDisplayName: String!, date: NSDate!, text: String!, attachments: [NSURL]?) {
        self.attachments = attachments
        super.init(senderId: senderId, senderDisplayName: senderDisplayName, date: date, text: text)
    }

    init(senderId: String!, senderDisplayName: String!, date: NSDate!, media: JSQMessageMediaData!) {
        super.init(senderId: senderId, senderDisplayName: senderDisplayName, date: date, media: media)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    } 

}

现在,您必须将此课程用于所有聊天消息.

接下来,您必须为自定义单元格创建自定义xib文件.在该xib中,您将为消息文本和附件图标添加标签和图像视图.

现在创建一个表示自定义单元格的类.它将是如下 -

class CustomCell: UICollectionViewCell {
    @IBOutlet weak var topLabel: UILabel!
    @IBOutlet weak var bottomLabel: UILabel!
    @IBOutlet weak var containerView: UIView!
    @IBOutlet weak var dataLabel: UILabel!
    @IBOutlet weak var attachmentIcon: UIImage!

    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

现在我们必须在JSQMessagesViewController子类中使用这个CustomCell .

在viewDidLoad注册与集合视图的笔尖

self.collectionView.registerNib(UINib(nibName: "CustomCell", bundle: nil), forCellWithReuseIdentifier: "CustomCell")

现在您可以最终使用自定义单元格 -

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let message = messages[indexPath.item]

    if message.attachments.count() != 0 {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CustomCell", forIndexPath: indexPath) as! CustomCell

        cell.containerView.backgroundColor = UIColor.jsq_messageBubbleBlueColor()
        cell.containerView.layer.cornerRadius = 15
        return cell
    }

    else {
        // Add code here for the normal cell
    }
}

这应该成功呈现您的自定义单元格.

最后,在点击自定义视图单元格时,您可以转到新的VC(不要忘记传递图像数据)并正确显示图像.