Ajouter UICollectionViews à un UITableViewCell personnalisé qui se fait via Xib

J'ai été surpris de découvrir combien d'obstacles existaient pour implémenter UICollectionView dans UITableViewCell. Par conséquent, ce tutoriel est ici, j'espère qu'il vous fera gagner beaucoup de temps.

Remarque: ce tutoriel n'est pas destiné aux débutants. Il est supposé que vous connaissez les tablesViews et que vous créez des cellules personnalisées avec des fichiers xib.

De plus, je ne décris rien sur le composant visuel.

1) Ajoutez une UICollectionView à votre Xib TableViewCell

1. Faites glisser un UICollectionView dans votre TableViewCell Xib
2. Ajouter des contraintes
3. Et découvrez que vous ne pouvez pas ajouter CollectionViewCells à votre UICollectionView nouvellement ajoutée :)

Il s'avère que vous avez besoin d'un fichier séparé pour placer toutes les cellules de vue de collection que vous souhaitez afficher. (Lorsque votre UICollectionView est dans le fichier Xib)

2) Ajoutez le fichier UICollectionViewCell et Xib à votre projet



Vous pouvez faire ce que vous voulez dans votre cellule Collection View Cell Xib (ajouter une étiquette, une image, etc.). Pour les besoins de ce didacticiel, nous ne le touchons pas ici.

Assurez-vous de donner à votre cellule un identifiant resuable.



3) Vérifiez que votre classe TableViewCell dispose des protocoles UICollectionView Data Source et Delegate.

Étape 1: Retournez dans votre fichier tableViewCells Xib.



Étape 2: faites glisser votre collectionView vers «Propriétaire du fichier» et sélectionnez dataSource, puis déléguez.



Étape 3: faites glisser votre collectionView vers votre classe TableViewCell et créez un IBOutlet



Étape 4: vérifiez que vos protocoles Source Source et Delegate UICollectionView de classe TableViewCell sont conformes.

class TableViewCell: UITableViewCell, UICollectionViewDelegate, UICollectionViewDataSource { @IBOutlet weak var collectionView: UICollectionView! override func awakeFromNib() { super.awakeFromNib() // Initialization code self.collectionView.dataSource = self self.collectionView.delegate = self self.collectionView.register(UINib.init(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "collectionViewID") } override func setSelected(_ selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) // Configure the view for the selected state } func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 15 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionViewID", for: indexPath as IndexPath) as! CollectionViewCell return cell } } 

Explication du code:

1. Ajoutez UICollectionViewDelegate et UICollectionViewDataSource à la description de la classe
2. Faire la collection de sources de données View et delegate = self dans awakeFromXib
3. Ajouter la fonction numberOfItemsInSection
4. Ajouter une fonction cellForItemAt
5. Créez une cellule avec votre reuseIdentifier comme cellule personnalisée.

Étapes de dépannage:

1. Mes identifiants sont-ils attribués et corrects?
2. Ai-je glissé de ma collectionView vers le propriétaire des fichiers dans votre fichier Xib?

Si vous avez des questions, écrivez dans les commentaires.

Si cela vous a aidé ou vous aidera à l'avenir, comme.

J'espère que quelqu'un gagnera beaucoup de temps.