JSQMessage 在消息中显示图像

Question

如何在气泡消息中显示完整图像。

我显示了图片但是被剪掉了:

谢谢

Answer 1

还行这是我的代码：

override func viewDidLoad() {
        super.viewDidLoad()



    self.collectionView?.collectionViewLayout.outgoingAvatarViewSize = CGSizeZero

    self.collectionView?.collectionViewLayout.incomingAvatarViewSize = CGSizeZero

    self.inputToolbar?.contentView?.rightBarButtonItemWidth = CGFloat(34.0)

    self.inputToolbar?.contentView?.rightBarButtonItem?.setTitle("Invia", forState: .Normal)

    self.inputToolbar?.contentView?.textView!.placeHolder = "messaggio.."

    setUpMessages()



    // Do any additional setup after loading the view.
}    


override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    return self.messages.count
}



override func collectionView(collectionView: JSQMessagesCollectionView!, messageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageData! {



    return self.messages[indexPath.item]
}

override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {

    let factory = JSQMessagesBubbleImageFactory()

    if messages[indexPath.row].senderId == senderId {
       return factory.outgoingMessagesBubbleImageWithColor(UIColor.lightGrayColor())
    } else {
       return factory.incomingMessagesBubbleImageWithColor(UIColor.greenColor())
    }

}



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

    return cell
}

override func collectionView(collectionView: JSQMessagesCollectionView!, avatarImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageAvatarImageDataSource! {

    return nil
}

func setUpMessages() {

//load text messages:

    let mes1: JSQMessage = JSQMessage(senderId: "10", displayName: "io10", text: "Ciao")
    let mes2: JSQMessage = JSQMessage(senderId: "10", displayName: "io10", text: "Ciao2")
    let mes3: JSQMessage = JSQMessage(senderId: "10", displayName: "io10", text: "Ciao3")
    let mes4: JSQMessage = JSQMessage(senderId: "10", displayName: "io10", text: "Ciao4")

    messages.append(mes1)
    messages.append(mes2)
    messages.append(mes3)
    messages.append(mes4)

//load image message

   let img2 = JSQPhotoMediaItem(image: UIImage (named: "default"))

   let mes5 = JSQMessage(senderId: "10", senderDisplayName: "io10", media: img2)

    messages.append(mes5)        


}

Answer 2

我不相信有一个函数可以覆盖以获得所需的结果。但另一方面，如果您想分叉 JSQMessageViewController 并自己修改它。如果您转到源项目，请转到 mediaView 下的 jSQMessages/JSQMessagesViewController/Model/JSQPhotoMediaItem.m Starting at line 74

if (self.cachedImageView == nil) {
    CGSize size = [self mediaViewDisplaySize];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:self.image];
    imageView.frame = CGRectMake(0.0f, 0.0f, size.width, size.height);
    imageView.contentMode = UIViewContentModeScaleToFill;
    imageView.clipsToBounds = YES;
    [JSQMessagesMediaViewBubbleImageMasker applyBubbleImageMaskToMediaView:imageView isOutgoing:self.appliesMediaViewMaskAsOutgoing];
    self.cachedImageView = imageView;
}

如果将第 78 行 imageView.contentMode = UIViewContentModeScaleAspectFit; 更改为 imageView.contentMode = UIViewContentModeScaleToFill; 如果你添加 imageView.backgroundColor = [UIColor lightGrayColor]; 你也会有气泡形状。这是前后的一些屏幕截图。

Before Code Change

After Code Change

JSQMessage 在消息中显示图像

JSQMessage show image in message

ios

jsqmessagesviewcontroller