画像をテーブルビューのFiverrからロード

Question

こんにちは、私はXcodeでアプリケーションを作成しています。私はFirebaseから画像をダウンロードし、それらをテーブルビューで表示しています。そこにいくつかの問題があります。しかし、まずコードを表示します。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
    let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! FrontViewCell 

    cell.contentView.backgroundColor = UIColor.clear 

    //let whiteRoundedView : UIView = UIView(frame: CGRect(10, 8, self.view.frame.size.width - 20, 149)) 
    let whiteRoundedView: UIView = UIView(frame: CGRect(x: 10, y: 8, width: self.view.frame.width - 20, height: 200)) 
    whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.8]) 
    whiteRoundedView.layer.masksToBounds = false 
    whiteRoundedView.layer.cornerRadius = 2.0 
    whiteRoundedView.layer.shadowOffset = CGSize(width: -1, height: 1) 
    whiteRoundedView.layer.shadowOpacity = 0.2 

    cell.contentView.addSubview(whiteRoundedView) 
    cell.contentView.sendSubview(toBack: whiteRoundedView) 

    //cell.categoryImageView.image = catImages[indexPath.row] 
    //print("Product \(allCats[indexPath.row].name)") 

    cell.categoryLabel.text = allCats[indexPath.row].name 

    if let n = allCats[indexPath.row].name{ 
     con?.storage?.reference(withPath: "categories/\(n).png").data(withMaxSize: 10 * 1024 * 1024, completion: { 
      data, error in 
      if error == nil{ 
       let im = UIImage(data: data!) 
       cell.categoryImageView.image = im 
       cell.layoutSubviews() 
      } 
      else{ 
       print("Error Downloading Image \(error?.localizedDescription)") 
      } 
     }) 
    } 
    return cell 
} 

上記のコードは、画像をセル内のimageViewに設定するためのコードです。 問題

1. を私はスクロールダウンし、再度アップスクロール、画像が同じ細胞内で異なっています。
2. テーブルビューのスクロールは非常に遅いです。

これらは問題です。私はこれをどのように解決できるのか教えてください。 私はライブラリを知っていますSDWebImageしかし、そのライブラリでFirebaseのイメージをダウンロードする方法はわかりません。この問題で私を助けてください。私はこの問題によって非常に疲れています。私は睡眠なしで最後の20時間それを解決しようとしていましたが、できませんでした。私が間違ってやっていることを教えてください。どうすればいいのか教えてください。ありがとう。

Answer 1

イメージを常にダウンロードしているため、TableViewが遅いです。

これはキャッシングの問題です。 同じセル内で異なるイメージについては、イメージをnilに再設定するだけで、セルを再利用しているため、新しいイメージをダウンロードしている間に以前のイメージを使用しているため、これを変更できます。

しかし、キャッシングフレームワークを使用する場合、これらの問題は両方とも解決されます。たとえば、おそらく最も良いアウトプットはSDWebImageです。

このためにライブラリを使用したくない場合は、ここでは、イメージをキャッシュする最も基本的な実装があります。

let imageCache = NSCache<AnyObject, AnyObject>() 

extension UIImageView { 

    func loadImageUsingCacheWithUrlString(_ urlString: String) { 

     self.image = nil 

     //check cache for image 
     if let cachedImage = imageCache.object(forKey: urlString as AnyObject) as? UIImage { 
      self.image = cachedImage 
      return 
     } 

     //otherwise start the download 
     let url = URL(string: urlString) 
     URLSession.shared.dataTask(with: url!, completionHandler: { (data, response, error) in 

      //there was an error with the download 
      if error != nil { 
       print(error ?? "") 
       return 
      } 

      DispatchQueue.main.async(execute: { 

       if let downloadedImage = UIImage(data: data!) { 
        imageCache.setObject(downloadedImage, forKey: urlString as AnyObject) 

        self.image = downloadedImage 
       } 
      }) 

     }).resume() 
    } 

} 

使用法：

cell.categoryImageView.loadImageUsingCacheWithUrlString("your firebase url string") 

EDIT：はい、あなたはFirebaseに格納されている画像をダウンロードするためにこれを使用することができます。

編集：このコードはあなたの問題を解決しますが、メモリ管理はここでは考慮されません。深刻なプロダクションアプリでは、画像キャッシュ専用のライブラリを調べることをお勧めします。

編集：Firebaseのドキュメントには、SDWebImageとの連携方法を示す適切な情報があることに気付きました。それをチェックアウトしてください：SDWebImage + Firebase