从 JSQMessagesViewController 打开图像

Question

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

Answer 1

JSQmessage 不处理该问题，但您可以在此方法中添加此功能并使用 zoomPopup class:

- (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 2

SWIFT 3：我找到了另一种方法，没有使用任何其他方法pods/libraries。

1) 在 ChatViewController.

之上添加 var selectedImage: UIImage?

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) 添加此函数以在用户点击时获取图像，并且 return 一个 UIImage （如果是已录音的短信，将 return 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 中，在您的 chatVC 附近添加一个视图控制器，并添加一个带有 showMedia 作为 segue 标识符的 segue（类型 Show）。在新 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 3

如果与 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)
    }
  }
}

Answer 4

Swift 3.0.1 希望对你有帮助 someone.I 已测试此代码

我使用以下代码在 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
}

从 JSQMessagesViewController 打开图像

Open image from JSQMessagesViewController

ios

jsqmessagesviewcontroller