JSQMessagesViewController - 使用附加图像文件发送文本消息 [英] JSQMessagesViewController - Send text Message with Attached Images File

问题描述

我正在使用 JSQMessagesViewController 来发送和接收消息。它适用于文本消息。 是否可以使用JSQMessagesViewController框架发送带有附加图像文件的文本消息。

I am using JSQMessagesViewController for sending and receiving messages.It works well for text Messages. Is it possible to send Text Message with attached Image File using JSQMessagesViewController Framework.

单击时，应显示附加的图像文件。这样的事情。

The attached image file should be shown, when it is clicked on. Something like this.

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

用于发送照片

- (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];
}

推荐答案

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

To accomplish this task you will have to create a custom cell and then use that cell in your CollectionView

首先继承JSQMessage 类以下内容保留图像网址（附件）的数据 -

First of all subclass the JSQMessage class to something like following to keep the data for the image urls(attachments) -

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")
    } 

}

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

Now you will have to use this class for all your chat messages.

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

Next, you will have to create a custom xib file for your custom cell. In that xib you will add a label and image view for the message text and attachment icon.

现在创建一个代表您的自定义单元格的类即可。它将如下所示 -

Now create a class representing your custom cell. It will be something as follows -

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。

Now we have to use this CustomCell in our JSQMessagesViewController subclass.

在 viewDidLoad 使用集合视图注册你的笔尖

In viewDidLoad register your nib with the collection view

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

现在你终于可以使用自定义单元格了 -

Now you can finally use your custom cell -

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
    }
}

这应该可以成功渲染你的自定义单元格。

This should successfully render your custom cell.

最后点击自定义视图单元格你可以转到新的VC（不要忘记传递你的图像数据）并适当地显示图像。

Finally on tapping the custom view cell you can segue to a new VC (dont forget to pass your images data) and show the images appropriately.

这篇关于JSQMessagesViewController - 使用附加图像文件发送文本消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！