UICollectionViewDelegateFlowLayoutで変更したセルのサイズがスクロールすると変化する

Question

前提・実現したいこと

UICollectionViewで1行目は横幅一杯に1枚、2行目以降は1行に2枚画像を表示する画面を開発しています。

発生している問題・エラーメッセージ

初回表示はされるですが、画面を下にスクロールし、再度一番上に戻ると1行目の横幅が半分になり、途中の行の片方の画像の横幅が広がってしまいます。スクロールしても最初に表示された状態を保つためにはどのようにすべきでしょうか。

###該当のソースコード

PagingMenuControllerを使用しており、メインのビューコントロラーからimageUrlListをセットしてMyViewControllerを呼び出しています

class MyViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
	var imageUrlList: Array<String>!

    override func loadView() {
        super.loadView()
        // Do any additional setup after loading the view, typically from a nib.

        let myCollectionView = UICollectionView(frame: CGRect(origin: CGPoint.zero, size: self.view.frame.size), collectionViewLayout: UICollectionViewFlowLayout())
        myCollectionView.backgroundColor = UIColor.white
        myCollectionView.register(MyCollection.self, forCellWithReuseIdentifier: "MyCell")
        
        myCollectionView.delegate = self
        myCollectionView.dataSource = self        
        
        self.view.addSubview(myCollectionView)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        if indexPath.row == 0 {
            return CGSize(width: collectionView.frame.width, height: collectionView.frame.height * 0.3)
        }
        
        return CGSize(width: collectionView.frame.width * 0.5, height: collectionView.frame.height * 0.3)
    }

    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let collection = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! MyCollection
        let url = imageUrlList[indexPath.row]

        let thumbnail = collection.contentView.viewWithTag(MyCollection.TAG_THUMBNAIL) as! ThumbnailImageView
        thumbnail.loadImage(urlString: url)

        return collection
    }
}

class MyCollection: UICollectionViewCell {

    static let TAG_THUMBNAIL: Int = 0

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)

        initView(width: frame.size.width, height: frame.size.height)
    }

    func initView(width: CGFloat, height: CGFloat) {

        let thumbnail: ThumbnailImageView = ThumbnailImageView(frame: CGRect(x: 0, y: 0, width: width, height: height * 0.3))
        thumbnail.tag = MyCollection.TAG_THUMBNAIL
        self.contentView.addSubview(thumbnail)
    }
}

class ThumbnailImageView: UIImageView {

    let CACHE_SEC: TimeInterval = 60 * 60 * 24 // 1 day

    var baseWidth: CGFloat = 0
    var baseHeight: CGFloat = 0

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
    }

    override init (frame: CGRect) {
        super.init(frame: frame)
    }

    func loadImage(urlString: String) {
        self.alpha = 0
        let req = URLRequest(url: NSURL(string: urlString)! as URL, cachePolicy: .returnCacheDataElseLoad, timeoutInterval: CACHE_SEC);
        let session = URLSession(configuration: URLSessionConfiguration.default, delegate: nil, delegateQueue: OperationQueue.main);

        session.dataTask(with: req, completionHandler: { (data, resp, err) in
            if ((err) == nil) {

                // Success
                self.image = UIImage(data: data!);

                UIView.animate(withDuration: 1.0) { () -> Void in
                    self.alpha = 1
                }

            } else {
                // TODO: show default if error
                print("AsyncImageView:Error \(err?.localizedDescription)");
            }
        }).resume();
    }
}

###試したこと

セルのサイズを変更しているcollectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSizeの引数のindexPathが描画したセルの順番と合っていないのかと疑いブレークポイントを貼ってデバッグしましたが、スクロール時にブレークポイントに引っかかりませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)

• Swift 3
• xcode 8.2.1

Comments

[fuzzball]

collection​View(_:​layout:​size​For​Item​At:​)のコードに問題はありません。原因は他にあります。

[yousei]

ご確認頂きありがとう御座います。当該のビューコントローラの他の処理を追記しました。

Answer 1

CollectionViewはセルを再利用しますので、ちゃんと初期化し直さないと前回表示した状態が残ってしまいます。
今回の件は、ThumbnailImageViewのframeが最初に生成した時に設定した時のままなためかと思います。

例えば1番目のセルを再度表示した時に画像が半分になるのは、(例えば)6番目のセルを表示した時の大きさのままなためです。
同じように途中のセルが横幅いっぱいになるのは、最初に1番目のセルを表示した時の大きさのまま(MyCollectionをはみ出している)ためです。

対応策は2つあります。
どちらを使用するかは場合によります。1行目のセルとそれ以外は横幅以外に違いがないなら対応策1の方が簡単かと思いますが。

対応策1

どうやらThumbnailImageViewはセルの横幅いっぱいになればいいみたいですから、autoresizingMaskを設定する。
つまり、MyCollection のinitView(width:, height:)に

thumbnail.autoresizingMask = [.flexible​Width]

を追加する。
(コードは試してないのでエラーが出るかもです)

対応策2

1行目とそれ以外でセルのidentifierを別にして、再利用する際に横幅いっぱいのセルと半分のセルを混在させなくする。

具体的には、

override func loadView() {
    // ...前略
    myCollectionView.backgroundColor = UIColor.white
    myCollectionView.register(MyCollection.self, forCellWithReuseIdentifier: "MyCell")
    myCollectionView.register(MyCollection.self, forCellWithReuseIdentifier: "MyCellTop") // <- この行を追加
    // 以下略...
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let identifier = indexPath.row == 0 ? "MyCellTop" : "MyCell"
    let collection = collectionView.dequeueReusableCell(withReuseIdentifier: identifier, for: indexPath) as! MyCollection
    // 以下略...
}

とすればとりあえず動かすことはできるかと思います。
(例によって動作確認はしてないのでエラーが出たら適宜修正してください)

蛇足

内容とは関係ないですが、static let TAG_THUMBNAIL: Int = 0となっていますが、UIViewのtagは0がデフォルト値なので、0をセットしても意味がありません。
1以上の値にした方がいいかと思います。

Comments

[yousei]

ご回答頂きありがとう御座います。対応策2で解決することができました!

Answer 2

MyCollectionのinitView(width:height:)の中で

self.contentView.addSubview(thumbnail)

としていますが、これではthumbnailがどんどん積み重なっていきます。
（再利用されたセルは初期化されるわけではありません）

とりあえずの修正方法として、addする前にremoveしてみます。

self.contentView.viewWithTag(MyCollection.TAG_THUMBNAIL)?.removeFromSuperview()

他の方法としては、すでにaddされていたらaddせずに最小限の初期化だけ行う、などがあります。

おまけ

画像を裏で読み込んでいるようですが、読み込み中にセルが画面外に出たときの処理（読み込みキャンセルなど）を作らないと、高速にスクロールしたときに表示が乱れるような気がします。
（追記）UIImageViewの中で読み込み処理を行っているので、上に書いたremoveする方法であれば、表示は乱れないですね‥たぶん）

Comments

[yousei]

ご回答頂きありがとう御座います。ロード前にremoveFromSuperviewするようにしました。スクロール時に画像の乱れは出なくなりましたが、変わらずセルの横幅は崩れるようです。

[fuzzball]

let thumbnail: ThumbnailImageView = ThumbnailImageView(frame:...)
の代わりに、
let thumbnail = UIImageView(frame:...)
thumbnail.backgroundColor = 適当な色
として、素のUIImageViewを使うとどうなりますか？

[yousei]

試してみましたが、やはりセルの横幅が崩れます。

[fuzzball]

セルのcontentViewのbackgroundColorに色を付けて試してもらえますか？画像が小さくなっているだけかも。

[yousei]

contentView.backgroundColorを設定してみましたが、1行目の右のセル(空白?)は背景色が表示されました