web-dev-qa-db-ja.com

iOS 10/11 UICollectionViewFlowLayoutAutomaticSizeを使用したUICollectionViewFlowLayoutにより、フッター補助ビューの位置がずれる

したがって、これはiOS 10のUICollectionViewFlowLayoutで見つかった興味深い問題であり（11でもまだ問題）、estimedItemSizeにUICollectionViewFlowLayoutAutomaticSizeを使用しています。

Timate_ItemSizeにUICollectionViewFlowLayoutAutomaticSizeを使用すると、フッターの補足ビューが下のいくつかのセルの上に浮かぶことがわかりました（赤/ピンクがヘッダー、緑がフッターです）。

UICollectionViewFlowLayoutAutomaticSize problementer image description here

VCサンプルアプリのコード：

import UIKit

class ViewController: UIViewController {

    // MARK: Properties

    let texts: [String] = [
        "This is some text",
        "This is some more text",
        "This is even more text"
    ]

    // MARK: Outlets

    @IBOutlet var collectionView: UICollectionView! {
        didSet {
            self.collectionView.backgroundColor = .orange
        }
    }

    // MARK: Lifecycle

    override func viewDidLoad() {

        super.viewDidLoad()

        // Layout
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        if #available(iOS 10.0, *) {
            layout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize
        } else {
            layout.estimatedItemSize = CGSize(width: self.collectionView.bounds.width, height: 50)
        }
        self.collectionView.collectionViewLayout = layout

        // Register Cells
        self.collectionView.register(UINib(nibName: "TextCell", bundle: nil), forCellWithReuseIdentifier: String(describing: TextCell.self))
        self.collectionView.register(UINib(nibName: "SectionHeader", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: String(describing: SectionHeader.self))
        self.collectionView.register(UINib(nibName: "SectionFooter", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: String(describing: SectionFooter.self))

        self.collectionView.reloadData()
    }
}

// MARK: - UICollectionViewDelegateFlowLayout Methods

extension ViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {

        return CGSize(width: self.collectionView.bounds.width, height: 90)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {

        return CGSize(width: self.collectionView.bounds.width, height: 90)
    }
}

// MARK: - UICollectionViewDataSource Methods

extension ViewController: UICollectionViewDataSource {

    public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        return self.texts.count
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

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

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: String(describing: TextCell.self), for: indexPath)

        if let textCell = cell as? TextCell {

            let text = self.texts[indexPath.row]
            textCell.configure(text: text)
        }

        return cell
    }

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {

        switch kind {
        case UICollectionElementKindSectionHeader:

            return collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: String(describing: SectionHeader.self), for: indexPath)

        case UICollectionElementKindSectionFooter:

            return collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: String(describing: SectionFooter.self), for: indexPath)

        default:
            return UICollectionReusableView()
        }
    }
}

// MARK: - UICollectionViewDelegate Methods

extension ViewController: UICollectionViewDelegate {

}

誰かがUICollectionViewFlowLayoutAutomaticSizeを補足のヘッダーおよびフッタービューでiOS 10で動作させることができましたか？ expectedItemSizeにサイズを追加すると機能するように見えますが、新しいiOS 10機能の使用にバグがあるかどうか、または間違って使用しているかどうかを知りたいです。

Appleで提出されたバグにはIDがあります：28843116

[〜＃〜] update [〜＃〜]：これは10.3 Beta 1でもまだ問題のようです

UPDATE 2：これはまだiOS 11 Beta 1の問題のようです

iosuicollectionviewuicollectionviewlayout
23
dlbuckley

UICollectionViewFlowLayoutは、セルの自動レイアウトを非常によくサポートしています。[〜＃〜] but [〜＃〜]補助ビューではサポートしていません。自動レイアウトコードがセルのフレームを更新するたびに、ヘッダーとフッターは何もしません。そのため、ヘッダーとフッターを無効にする必要があることをレイアウトに伝える必要があります。そして、これには方法があります！

UICollectionViewLayoutのfunc invalidationContext(forPreferredLayoutAttributes: UICollectionViewLayoutAttributes, withOriginalAttributes: UICollectionViewLayoutAttributes)をオーバーライドして、補足ビューの無効化を実行する必要があります。

例：

override open func invalidationContext(forPreferredLayoutAttributes preferred: UICollectionViewLayoutAttributes,
        withOriginalAttributes original: UICollectionViewLayoutAttributes)
                -> UICollectionViewLayoutInvalidationContext {
    let context: UICollectionViewLayoutInvalidationContext = super.invalidationContext(
            forPreferredLayoutAttributes: preferred,
            withOriginalAttributes: original
    )

    let indexPath = preferred.indexPath

    if indexPath.item == 0 {
        context.invalidateSupplementaryElements(ofKind: UICollectionElementKindSectionHeader, at: [indexPath])
    }

    return context
}

上記の例では、セクションの最初のセルが無効になった場合、ヘッダーの補足ビューを無効にするために、UICollectionViewFlowLayoutによって提供される無効化コンテキストを使用しています。このメソッドは、フッターの無効化にも使用できます。

24
Anton Lagutin

私は同じ問題に出会いました。 UICollectionViewFlowLayoutAutomaticSizeは、補足ビューでは機能しません。 UICollectionViewDelegateFlowLayoutを使用して、サイズを明示的に指定します。サイズを自動計算すると遅れが生じることがあるため、サイズを計算してデリゲートを使用する方が適切です。

referenceSizeForHeaderInSectionおよびreferenceSizeForFooterInSectionデリゲートメソッドを使用して、ヘッダーとフッターのサイズを明示的に指定します。

1
Ashutosh Pandey