【Swift5最新版】TableViewのセルにダウンロードした画像を描画する【Xcode12】

こんな感じですね。このアプリはスクロール可能になるほど件数が追加されたり、セル同士の並び替えなどもできるアプリになっております。

都度、ImageView.image= nil しても再利用する前のデータが残っていたり、苦戦したので今回紹介します。

Cocoa Podsでライブラリをインストール

  pod 'Kingfisher'

TableViewCellのクラスで再利用前にセルの内容をリセット

    override func prepareForReuse() {
       super.prepareForReuse()
       // TableViewのセルを再利用される時に以前の値が入らないようにクリアする
       self.deckTitleLabel?.text = ""
       self.favButton.isSelected = false
       self.deckImageView.image = nil
   }
   
   これら3件はセルに表示するために使っているオブジェクトすべてを指します。

TableViewCellクラス内にダウンロード通信処理を実装

import Kingfisher



    func setCell(IconImageURL: String) {
       guard let url = URL(string: IconImageURL) else {
           return
       }
       self.deckImageView.kf.setImage(with: url) // 今回セットしたいImageView
   }
   
   
  

TableViewを表示しているTableViewDataSourceにて

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

       if let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell") as? DeckListTableViewCell {
           let model = dataManager.deckList[indexPath.row]
           cell.indexpath = indexPath
           cell.deckTitleLabel?.text = model.deckTitle
           cell.favButton.isSelected = model.isFav
           cell.delegate = self
           
           // Color
           cell.editImageView.tintColor = dataManager.themeColor
           cell.favButton.tintColor = dataManager.themeColor
           
           
           cell.imageView?.image = nil
           cell.setCell(IconImageURL: "https://www.pokemon-card.com/deck/deckView.php/deckID/" + model.duckRecipeId + ".png")
           
           return cell
       }
       return UITableViewCell()
   }

これで動作するかと思います。

スクロールで見切れたとしても再度ローディングも挟まれないです。

今回の記事で同様の記事を書いているのでもしよかったら読んでください。