ios - 从 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）添加转场：

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 中，在您附近添加一个 View 控制器chatVC，并添加一个 segue (type Show)showMedia作为 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希望对某人有所帮助。我已经测试过这段代码

点击时，我使用了以下代码以image全屏显示。ImageJSQMessagesViewController

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