web-dev-qa-db-fra.com

UICollectionView avec des en-têtes de section comme UITableView

J'ai une question rapide. Quelqu'un a-t-il réussi à créer et à implémenter des en-têtes de section dans une CollectionView similaires aux en-têtes dans une TableView? J'ai fait beaucoup de recherches et trouvé des extraits de code, mais aucun exemple réel de quiconque y est parvenu avec succès. J'ai une CollectionView de photos, ce que j'essaie de réaliser, c'est de les regrouper en sections en fonction du mois où elles ont été prises. J'ai réussi à les diviser en ces sections, mais tout ce que j'ai maintenant est un en-tête vide juste au-dessus du début de chaque section. Ce que je veux faire, c'est afficher les mois dans ces en-têtes actuellement vides. De la même manière, les lettres de chaque section sont affichées dans la Tableview qui affiche les contacts. Merci pour vos réponses à l'avance.

iosobjective-cuitableviewuicollectionviewsectionheader
31
emm

  1. Activez la vue d'en-tête/pied de section dans Storyboard.

  2. Mettre en place collectionView:viewForSupplementaryElementOfKind méthode.

voir Ce lien

35
david72

L'ajout d'en-têtes de section dans une vue de collection fonctionne pour moi avec la configuration suivante:

  1. ajoutez un fichier xib pour définir le contenu de la vue d'en-tête. Le fichier xib contient une seule définition de type de cellule. Dans mon cas, la vue d'en-tête a un type personnalisé (ImageCollectionViewHeaderCell) qui dérive de UICollectionViewCell. Je pense que c'est obligatoire mais je n'en suis pas sûr. L'identifiant de cellule est également défini sur une chaîne prédéfinie (par exemple) "ImageCollectionViewHeaderCellId"

  2. ajoutez des fichiers d'en-tête et d'implémentation pour le type personnalisé. Il est pratique d'avoir une méthode pour obtenir son objet UINib (une sorte de proxy pour le fichier xib créé à l'étape 1)

    @implementation ImageCollectionViewHeaderCell
+ (UINib*) nib
{
  return [UINib nibWithNibName:@"nameOfXibFileCreatedAtStep1" bundle:nil];
}

@end

  3. dans le contrôleur de vue de collection (qui, dans mon cas, est également le dataSource et le délégué de l'UICollectionView), dans la méthode viewDidLoad, ajoutez l'enregistrement pour le type d'élément supplémentaire

    - (void) viewDidLoad
{
   [_collectionView registerNib:[ImageCollectionViewHeaderCell nib] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"ImageCollectionViewHeaderCellId"];
}

  4. dans le contrôleur de vue de collection, ajoutez les méthodes pour renvoyer une hauteur d'en-tête non nulle et les instances de vue d'en-tête

    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
  return CGSizeMake(0., 30.);
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
  NSAssert([kind isEqualToString:UICollectionElementKindSectionHeader], @"Unexpected supplementary element kind");
  UICollectionReusableView* cell = [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                                              withReuseIdentifier:ImageCollectionViewHeaderCellIdentifier
                                                                     forIndexPath:indexPath];

  NSAssert([cell isKindOfClass:[ImageCollectionViewHeaderCell class]], @"Unexpected class for header cell");

  ImageCollectionViewHeaderCell* header_view = (ImageCollectionViewHeaderCell*) cell;

  // custom content

  return cell;
}
18
Etienne