從JSQMessagesViewController打開圖片

Question

我使用JSQMesssagesViewController來構建消息傳遞應用程序。我現在可以使用此發送圖像，但想要點擊圖像以全屏方式打開。此功能與標準的消息應用程序類似，可讓您點擊圖像「泡泡」，並捏合放大和縮小。有沒有人有與JSQMessagesViewController這樣做的經驗？感謝那些可以提供幫助的人！

Answer 1

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 2

SWIFT 3：我發現了另一個無需使用任何其他豆莢/庫。

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）添加此功能來獲得時，它的點擊用戶的圖像，並返回一個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）在界面生成器中，在您的chatVC附近添加一個視圖控制器，並添加一個segue（類型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. 
    } 
} 

不要忘了把「看點合格」作爲參數在圖像示意圖（在界面生成器），以正確地顯示圖像。

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