しるてく

技術的な話をします

UICollectionViewでSDWebImage使うと同じ画像が表示されてしまうことがある

CollectionViewで図鑑(所持していると画像が見えて、所持していないと?画像が表示される)みたいなのを作るとして、

class HogeCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var hogeImageView: UIImageView!

    func setImage(url: String?) {
        if url != nil {
            self.hogeImageView.sd_setImageWithURL(NSURL(string: url))
        } else {
            self.hogeImageView.image = UIImage(named: "empty_hoge")
        }
    }
}

こんな感じのカスタムセルを作って、 cell.setImage(url) みたいな感じで画像をセットすると、未所持セルで何故か他の所持セルと同じ画像が表示されてしまう。

どうやら動きをみると、画面外にスクロールすると、どんどん未所持セルが所持セルに置き換わっているようなので、cellのreuseでsdWebImageが悪さしているらしいことが分かる。

なので、以下のように、 prepareForReusesd_cancelCurrentImageLoad を呼んであげればよさそうだ。

class HogeCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var hogeImageView: UIImageView!

    override func prepareForReuse() {
        super.prepareForReuse()
        self.hogeImageView.sd_cancelCurrentImageLoad()
    }

    func setImage(url: String?) {
        if url != nil {
            self.hogeImageView.sd_setImageWithURL(NSURL(string: url))
        } else {
            self.hogeImageView.image = UIImage(named: "empty_hoge")
        }
    }
}

なおった。