Dans iOS 12, quand la mise en page des cellules de l'UICollectionView doit-elle utiliser la mise en page automatique dans la NIB ?

Question

Le même code comme ceci

collectionLayout.estimatedItemSize = CGSize(width: 50, height: 25)
collectionLayout.itemSize = UICollectionViewFlowLayoutAutomaticSize
collectionLayout.minimumInteritemSpacing = 10 

for _ in 0 ..< 1000 {
    let length = Int(arc4random() % 8)
    let string = randomKeyByBitLength(length)
    array.append(string!)
}
collectionView.reloadData()

les contraintes des cellules :

quand je l'exécute sous iOS 12, c'est différent. Le simulateur de gauche est iOS 11, et celui de droite est iOS 12 :

Mais, quand je le ferai défiler, les cadres des cellules seront normaux.

---

Exemple de projet pour reproduire le problème : https://github.com/Coeur/StackOverflow51375566

Answer 1

Pour toutes les solutions, notez qu'il n'est pas nécessaire d'appeler explicitement reloadData en viewDidLoad : cela se fera automatiquement.

Solution 1

Inspiré par L'idée de Samantha : invalidateLayout de manière asynchrone dans viewDidLoad .

override func viewDidLoad() {
    super.viewDidLoad()

    //[...]

    for _ in 0 ..< 1000 {
        array.append(randomKeyByBitLength(Int(arc4random_uniform(8)))!)
    }

    DispatchQueue.main.async {
        self.collectionView.collectionViewLayout.invalidateLayout()
    }
}

Solution 2

(imparfait, voir l'amélioration de DHennessy13 à ce sujet)

Sur la base de Réponse de Peter Lapisu . invalidateLayout en viewWillLayoutSubviews .

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    collectionView.collectionViewLayout.invalidateLayout()
}

Comme l'a noté DHennessy13, cette solution actuelle avec viewWillLayoutSubviews est imparfait car il invalideraLayout lors de la rotation de l'écran.

Vous pouvez suivre Amélioration DHennessy13 concernant cette solution.

Solution 3

Sur la base d'une combinaison de Réponse de Tyler Sheaffer , Portage de Shawn Aukstak chez Swift et l'idée de Samantha. Sous-classez votre CollectionView pour effectuer invalidateLayout en layoutSubviews .

class AutoLayoutCollectionView: UICollectionView {

    private var shouldInvalidateLayout = false

    override func layoutSubviews() {
        super.layoutSubviews()
        if shouldInvalidateLayout {
            collectionViewLayout.invalidateLayout()
            shouldInvalidateLayout = false
        }
    }

    override func reloadData() {
        shouldInvalidateLayout = true
        super.reloadData()
    }
}

Cette solution est élégante car elle ne nécessite pas de modifier le code de votre ViewController. Je l'ai implémentée sur la branche AutoLayoutCollectionView de cet exemple de projet. https://github.com/Coeur/StackOverflow51375566/tree/AutoLayoutCollectionView .

Solution 4

Réécriture des contraintes par défaut de UICollectionViewCell. Voir Réponse de Larry .

Solution 5

Mettre en œuvre collectionView(_:layout:sizeForItemAt:) et retourner cell.contentView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize) . Voir réponse mate .

Answer 2

Le problème est que la fonctionnalité proposée ici - des cellules de vue de collection qui se dimensionnent elles-mêmes en fonction de leurs contraintes internes dans un UICollectionViewFlowLayout - ne peut pas être utilisée. n'existe pas . Il a nunca existé. Apple prétend que c'est le cas, mais ce n'est pas le cas. J'ai signalé un bug à ce sujet chaque année depuis que les vues de collection ont été introduites et que cette affirmation a été faite pour la première fois ; et mes rapports de bug n'ont jamais été fermés, parce que le bug est réel. Il n'existe pas de cellules de vue de collection à taille unique.

Voir aussi ma réponse ici : https://stackoverflow.com/a/51585910/341994

Certaines années, la tentative d'utiliser des cellules autodimensionnées s'est soldée par un échec. D'autres années, il n'y a pas eu de plantage, mais la mise en page était erronée. Mais il ne fonctionne pas .

El seulement La façon de faire ce genre de chose est d'implémenter la méthode de délégué sizeForItemAt et fournir la taille vous-même . Vous pouvez facilement le faire en appelant

cell.contentView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)

sur une cellule modèle que vous avez configurée au préalable. C'est ce que le runtime debe faire pour vous - mais ce n'est pas le cas.

Voici donc ma solution à la question initiale. Au lieu d'un simple tableau de chaînes de caractères, nous avons généré un tableau de paires de chaînes de caractères (comme un tuple). Ensuite :

override func collectionView(_ collectionView: UICollectionView, 
    cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! MyCell
        cell.label.text = self.array[indexPath.row].0
        return cell
}

func collectionView(_ collectionView: UICollectionView, 
    layout collectionViewLayout: UICollectionViewLayout, 
    sizeForItemAt indexPath: IndexPath) -> CGSize {
        return self.array[indexPath.row].1
}

Answer 3

Voici une autre solution qui fonctionne sur Cœur Il a également fonctionné dans mon cas particulier, alors que les autres réponses ne l'ont pas fait. Le code ci-dessous remplace l'implémentation précédente de la fonction CollectionViewCell sous-classe dans ViewController.swift :

class CollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var label: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()

        contentView.translatesAutoresizingMaskIntoConstraints = false

        let leftConstraint = contentView.leftAnchor.constraint(equalTo: leftAnchor)
        let rightConstraint = contentView.rightAnchor.constraint(equalTo: rightAnchor)
        let topConstraint = contentView.topAnchor.constraint(equalTo: topAnchor)
        let bottomConstraint = contentView.bottomAnchor.constraint(equalTo: bottomAnchor)
        NSLayoutConstraint.activate([leftConstraint, rightConstraint, topConstraint, bottomConstraint])
    }
}

Ceci est inspiré de la réponse de ale84 de UICollectionViewFlowLayout estimatedItemSize ne fonctionne pas correctement avec iOS12 alors qu'il fonctionne bien avec iOS 11.*.

Answer 4

J'ai le même problème, les cellules utilisent la taille estimée (au lieu de la taille automatique) jusqu'au défilement. Le même code construit avec Xcode 9.x fonctionne parfaitement bien sur iOS 11 et 12, et construit dans Xcode 10 il fonctionne correctement sur iOS 11 mais pas sur iOS 12.

La seule façon que j'ai trouvée jusqu'à présent pour résoudre ce problème est d'invalider la mise en page de la vue de la collection, soit dans l'onglet viewDidAppear ce qui peut provoquer des sauts, ou dans un bloc asynchrone à l'intérieur de viewWillAppear (je ne suis pas sûr de la fiabilité de cette solution).

override func viewDidLoad() {
    super.viewDidLoad()
    let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout
    layout?.estimatedItemSize = CGSize(width: 50, height: 50)
    layout?.itemSize = UICollectionViewFlowLayout.automaticSize
}

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    // The following block also "fixes" the problem without jumpiness after the view has already appeared on screen.
    DispatchQueue.main.async {
        self.collectionView.collectionViewLayout.invalidateLayout()
    }
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    // The following line makes cells size properly in iOS 12.
    collectionView.collectionViewLayout.invalidateLayout()
}

Answer 5

Solution 2 de Cœur empêche la mise en page de clignoter ou de se mettre à jour devant l'utilisateur. Mais cela peut créer des problèmes lorsque vous faites pivoter l'appareil. J'utilise une variable "shouldInvalidateLayout" dans viewWillLayoutSubviews et je lui attribue la valeur false dans viewDidAppear.

private var shouldInvalidateLayout = true

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    shouldInvalidateLayout = false
}

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    if shouldInvalidateLayout {
        collectionView.collectionViewLayout.invalidateLayout()
    }
}