从JSQMessagesViewController打开图像

Question

我正在使用JSQMesssagesViewController来构建消息传递应用程序。 我现在可以使用此图像发送图像，但想点击图像以全屏打开。 此功能类似于标准消息传递应用程序，允许您点击图像“气泡”，并捏放大和缩小。 有没有人有过使用JSQMessagesViewController做这个的经验？ 感谢那些可以提供帮助的人！

Answer 1

SWIFT 3：我发现了另一种不使用任何其他pod /库的方法。

1）添加var selectedImage: UIImage? 在ChatViewController 。

2）覆盖方法didTapMessageBubbleAt ，例如：

override func collectionView(_ collectionView: JSQMessagesCollectionView!, didTapMessageBubbleAt indexPath: IndexPath!) {
    if let test = self.getImage(indexPath: indexPath) {
        selectedImage = test
        self.performSegue(withIdentifier: "showMedia", sender: self)
    }
}

3）添加此函数以在用户点击图像时获取图像并返回UIImage （如果是已粘贴的文本消息，则返回nil）：

func getImage(indexPath: IndexPath) -> UIImage? {
        let message = self.messages[indexPath.row]
        if message.isMediaMessage == true {
            let mediaItem = message.media
            if mediaItem is JSQPhotoMediaItem {
                let photoItem = mediaItem as! JSQPhotoMediaItem
                if let test: UIImage = photoItem.image {
                    let image = test
                    return image
                }
            }
        }
        return nil
    }

4）添加segue：

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "showMedia" {
            if let pageDeDestination = segue.destination as? ShowMediaViewController {
                pageDeDestination.image = selectedImage!
                } else {
                print("type destination not ok")
            }
        } else {
            print("segue inexistant")
        }
    }

5）在Interface Builder中，在chatVC附近添加一个View控制器，并添加一个带有showMedia的segue（类型Show ）作为segue标识符。 在新的viewcontroller添加图像视图。

6）这是我的ShowMediaViewController的代码：

class ShowMediaViewController: UIViewController {
    var image: UIImage? = nil
    var titreText: String!

    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var titre: UILabel!


    override func viewDidLoad() {
        super.viewDidLoad()

        //titre.text = titreText

        if image != nil {
            imageView.image = image
        } else {
            print("image not found")
        }

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

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.
    }
}

不要忘记将“Aspect Fit”作为参数放在图像视图中（在界面构建器中）以正确显示图像。

Answer 2

JSQmessage没有处理，但您可以在此方法中使用zoomPopup类添加此功能：

- (void)collectionView:(JSQMessagesCollectionView *)collectionView didTapMessageBubbleAtIndexPath:(NSIndexPath *)indexPath
{
    JSQMessage *message = [self.messageModelData.messages objectAtIndex:indexPath.row];

    if (message.isMediaMessage) {
        id<JSQMessageMediaData> mediaItem = message.media;

        if ([mediaItem isKindOfClass:[JSQPhotoMediaItem class]]) {

            NSLog(@"Tapped photo message bubble!");

            JSQPhotoMediaItem *photoItem = (JSQPhotoMediaItem *)mediaItem;
            [self popupImage:photoItem.image];
        }
    }
}

- (void) popupImage: (UIImage*)image
{
    UIWindow *window = [[UIApplication sharedApplication] keyWindow];
    UIView *topView = window.rootViewController.view;
    imageView = [[UIImageView alloc] initWithImage:image];

    zoomPopup  *popup = [[zoomPopup alloc] initWithMainview:topView andStartRect:CGRectMake(topView.frame.size.width/2, topView.frame.size.height/2, 0, 0)];
    [popup showPopup:imageView];
}

你可以在这里看到zoomPopup： https ： //github.com/Tintenklecks/zoomPopup

Answer 3

Swift 3.0.1希望它可以帮助某人。我测试了这段代码

在JSQMessagesViewController上点击Image时，我使用以下代码在全屏幕上显示image 。

override func collectionView(_ collectionView: JSQMessagesCollectionView, didTapMessageBubbleAt indexPath: IndexPath) {
    let message: JSQMessage? = messages[indexPath.row]
    if message?.isMediaMessage != nil {
        let mediaItem: JSQMessageMediaData? = message?.media
        if (mediaItem is JSQPhotoMediaItem) {
            print("Tapped photo message bubble!")
            let photoItem = mediaItem as? JSQPhotoMediaItem

            let newImageView = UIImageView(image: photoItem?.image)
            newImageView.frame = UIScreen.main.bounds
            newImageView.backgroundColor = .gray
            newImageView.contentMode = .scaleAspectFit
            newImageView.isUserInteractionEnabled = true
            let tap = UITapGestureRecognizer(target: self, action: #selector(dismissFullscreenImage))
            newImageView.addGestureRecognizer(tap)
            self.view.addSubview(newImageView)
            self.tabBarController?.tabBar.isHidden = true // tabBarController exists
            self.navigationController?.isNavigationBarHidden = true // default  navigationController
        }
    }
}

func dismissFullscreenImage(_ sender: UITapGestureRecognizer) {

    self.tabBarController?.tabBar.isHidden = false 
    self.navigationController?.isNavigationBarHidden = false
    sender.view?.removeFromSuperview() // This will remove image from full screen
}

Answer 4

如果与PhotoSlider一起使用（ https://github.com/nakajijapan/PhotoSlider ）

// var images = [UIImage]() // puts images of messages here
override func collectionView(_ collectionView: JSQMessagesCollectionView!, didTapMessageBubbleAt indexPath: IndexPath!) {
  let index = indexPath.row
  let message = messages[index]
  if message.isMediaMessage {
    if message.media.isKind(of: JSQPhotoMediaItem.self) {
      let photoSlider = PhotoSlider.ViewController(images: images)
      let i = images.index(of: (message.media as! JSQPhotoMediaItem).image)!
      photoSlider.currentPage = i
      photoSlider.modalPresentationStyle = .overCurrentContext
      photoSlider.modalTransitionStyle = .crossDissolve
      present(photoSlider, animated: true, completion: nil)
    }
  }
}