【Swift】スクロールするたびにCollectionViewのセルの順序が変わる

Question

メルカリのような通販アプリを作っていて、出品した商品を画像付きでタイムライン形式で表示する画面を作っています。
↓

別画面でFirebaseにデータを保存して、ホーム画面でデータを取得し、取得した順に表示したいのですが..。

今直面している問題は、スクロールして隠れたセルの画像（配置？）がなぜか入れ替わっていることです。
↓

データを格納する配列を出力しましたが、

• スクロール中に同じデータを新たに取得してはいない
• 配列内の順序が変わってはもいない

という結果で原因がわかりません。

UICollectionViewの元々の仕様なのか、それとも単に隠れたセルは読み込む前の状態に戻ってしまうからなのか、何が問題なのでしょうか？

どうか、ご回答よろしくお願いします。

import UIKit
import Firebase
import FirebaseUI
import SDWebImage

class Home: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {
    
    @IBOutlet weak var collectionView: UICollectionView!
    
    //Firebaseから取得したItemIDを格納する
    var photos = [String]()
    //cellForItemAtが実行されたカウント
    var count_cellfunc = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView.delegate = self
        collectionView.dataSource = self
        downloadImageData()
    }
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return photos.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        count_cellfunc += 1
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        if count_cellfunc >= photos.count {
            return cell
        }
        //imageViewを宣言
        let imageView = cell.contentView.viewWithTag(1) as! UIImageView
        let storageref = Storage.storage().reference(forURL: "gs://bookshare-b78b4.appspot.com").child("userID").child("Item").child(photos[indexPath.row])
        imageView.sd_setImage(with: storageref)
        return cell
    }
    
    //FirebaseからItemのURLを取得する
    func downloadImageData() {
        let ref = Database.database().reference(fromURL: "https://bookshare-b78b4.firebaseio.com/")
        self.photos = [String]()
        ref.child("Item").observe(.value) { (snap) in
            for item in snap.children {
                let snapdata = item as! DataSnapshot
                //１つのデータ
                print(snapdata)
                let item = snapdata.value as! [[String:String]]
                self.photos.append(item[0]["ItemID"]!)
                print(self.photos)
            }
            self.collectionView.reloadData()
        }
    }

}

Answer 1

ソース拝見したところ、UICollectionViewにおけるセルの再利用のされ方に、やや誤解があるように見えます。

cellForItem(at:)のメソッド内の処理について
dequeueReusableCell(withReuseIdentifier:for:)メソッドで生成(or再利用)されたセルを取得・返却していますが、再利用される際には同じindexPathのセルが再利用されるわけではありません。

例えば、一度下にスクロールしてセルが表示された後に、上にスクロールしなおした場合、画面外に出た下のセルが新しく上から表示されるセルに再利用されたりします。

提示していただいたソースの以下の箇所で、cellの中身を更新せずに再利用されたセルを返却しているので、count_cellfuncの値がphotos.countを上回った段階から再利用されたセルがそのまま表示されることになります。

※そのため、上にスクロースしたときに、画面外に出ていったものがまた上から出てきたり、順番がおかしくなったり、みたいな現象が発生してるものと思われます。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    count_cellfunc += 1
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
    /* ------ ここから ------ */
    if count_cellfunc >= photos.count {
        /* 中身を更新せずにcellを返却してしまっている。 */
        return cell
    }
    /* ------ ここまで ------ */
    /*中略*/
}

簡単な対応としては、上記のcellを返却しているif文の箇所をコメントアウトすれば、毎回cellの画像がindexPathに応じたものにセットし直されることになるので想定している挙動になるかと思います。

---

補足

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

上記の処理でCollectionViewから"cell"というIDの付いたセルを取得しています。
この時、CollectionViewは同じIDを持った再利用可能なセルが有ればそれを取得し、
再利用可能なものがなければ新しく生成したセルを返却してきます。

再利用可能かどうかは、基本的に画面に表示中かどうかで判断されているようなので、
画面外に出たセルが再利用される形になります。
※ちなみに、画面に表示中の有効なセルはCollectionViewのvisibleCellsという配列に格納されています。

前述にも軽く書きましたが、dequeueReusableCell(withReuseIdentifier:for:)メソッドの引数のIDが同じものの中でセルの再利用が行われます。
極端な話、すべてのセルで異なるIDを使えば再利用が行われず、indexPathでユニークにすることも可能です。。
※ただし、すべてのセルがメモリ上にキャッシュされることになってしまうので、推奨される方法ではありません。
（あと、事前にセルのIDを決めて準備しておかないといけないので、面倒です。）

作ったセルは再利用されるものと思って実装しておいたほうが、今回の様な現象を見た時に対処しやすいと思います。

Comments

[nekokichi]

ご指摘のあったコードをコメントアウトしたら解決しました。

１つ質問があるのですが、
・"return cell"は既に使用したセル（いずれかの画像がセットされた）を返却している
という解釈でよろしいでしょうか？

1度作られたセルは固定されず、取得・返却のプロセスを必ず踏むという理解で構いませんか？

[fumiaki]

return cellが必ずしも既に使用したセルを返却している、とは限らないですが元のソースではcount_cellfuncで判定を行っていたので、ほぼ再利用されたものが表示されていたと思います。

※セルの再利用については回答に補足を追記しましたのでそちらも参照ください。

基本的には作られたセルは再利用される前提で考えておくのが良いと思います。

[nekokichi]

追加の質問にも答えていただきありがとうございます!!

基礎的な内容なのに理解していなかった自分が情けないです..。

しっかり覚えておきます。