UICollectionView Plusieurs Sections et les en-Têtes

La cellForItemAtIndexPath fonction gère le remplissage de chaque section avec des cellules, il ne gère pas les articles ou supplementaryViews, et n'est donc pas la principale chose que vous avez besoin d'aide quand il s'agit de la création d'en-têtes de section.

la méthode que vous devez mettre en œuvre viewForSupplementaryElementOfKind. Sa signature est:

func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {}

En supposant que votre collectionView fonctionne correctement pour 1 article (que vous avez correctement rempli le corps de votre cellForItemAtIndexPath et votre sectionData tableau reflète bien le nombre de sections que vous souhaitez afficher), vous devez être en mesure de mettre en œuvre des en-têtes de section en utilisant les pointeurs suivants:

Avec les cellules, UICollectionView prend également en charge "supplémentaire" visualiser les objets, généralement utilisé pour les en-têtes ou pieds de page. Ces nouvelles Vues loi très similaire à UICollectionViewCell objets. De la même manière que cellForItemAtIndexPath poignées de cellules, La viewForSupplementaryElementOfKind fonction des poignées supplémentaires vues.

Pour la mettre en œuvre, vous devez d'abord préparer votre ViewController de le faire. D'abord modifier votre objet de mise en page pour rendre compte de l'en-tête de taille, que chaque tête adhérer à:

 let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
 layout.headerReferenceSize = CGSize(width: self.view.frame.size.width, height: 30)

NOTE: je suis à l'aide d'un UICollectionViewFlowLayout

Prochaine, si vous ne l'avez pas déjà fait, créez un SectionHeader classe qui définit chaque section en-tête de l'objet, de sorte que vous pouvez ensuite enregistrer cette classe avec votre collectionView objet:

  collectionView!.registerClass(SectionHeaderView.self, forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "SectionHeaderView");

Ici, la première et la troisième argument passé sont les mêmes que pour un UICollectionViewCell enregistrement de Classe, le premier argument de cette méthode est la référence à la section d'en-tête de classe que vous avez créé. La troisième est la réutilisation de l'identificateur pour le Complémentaire de Vue.

Le deuxième argument est spécifique Supplémentaire de points de Vue, ce jeux, le genre de la SupplementaryView, qui dans ce cas est un en-tête, la constante chaîne de caractères fournie par le UICollectionViewFlowLayout classe UICollectionElementKindSectionHeader est utilisé pour cela. Si vous avez remarqué les paramètres sur la viewForSupplementaryElementOfKind, ce genre est ensuite transmis en tant que kind: String paramètre.

Remplir le corps de votre viewForSupplementaryElementOfKind la même manière que vous le feriez pour un cellForItemAtIndexPath fonction-- à l'Aide de la dequeueReusableSupplementaryViewOfKind méthode pour créer un SectionHeader objet, définissez les attributs (étiquettes, couleurs, etc.) et enfin le retour de l'en-tête de l'objet.

Espérons que cette aide!!

Points de référence:

https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UICollectionViewDataSource_protocol/index.html#//apple_ref/occ/intfm/UICollectionViewDataSource/

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionViewFlowLayout_class/index.html#//apple_ref/c/data/UICollectionElementKindSectionHeade

OriginalL'auteur mkncode

Après la création et l'enregistrement d'en-tête personnalisé (et/ou des pieds de page), vous pouvez facilement spécifier l'en-tête (ou pieds de page) pour différentes sections. Voici un exemple:

    override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        switch kind {
        case UICollectionElementKindSectionHeader:
            let section = indexPath.section

            switch section {
            case 0:
                let userHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: homeHeaderReuseIdentifier, for: indexPath) as! UserHeader
                return userHeader
            default:
                let postHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: sectionSpacingHeaderReuseIdentifier, for: indexPath) as! PostHeader
                return postHeader
            }
        case UICollectionElementKindSectionFooter:
            let userFooter = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: homeFooterReuseIdentifier, for: indexPath) as! UserFooter
            return userFooter
        default:
            return UICollectionReusableView()
        }
    }

Assurez-vous de spécifier le nombre correct de sections, de trop:

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

OriginalL'auteur sean

Travaillé solution pour Swift-3

i)Créer de Cellule Personnalisé && correspondant xib

   class SectionHeaderView: UICollectionViewCell {
        static let kReuseIdentifier = "SectionHeaderView"
        @IBOutlet weak var invitationsSectionHeader: UILabel!
        @IBOutlet weak var numberOfPerson: UILabel!
 }

ii)Registre de Collection Personnalisée de Vue de la Cellule pour HeaderView

 self.collectionView.register(UINib(nibName: SectionHeaderView.kReuseIdentifier, bundle: nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: SectionHeaderView.kReuseIdentifier)

iii)Appel de fonction de délégué à de rendu Personnalisé en-Tête de la Vue.

  func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        switch kind {
        case UICollectionElementKindSectionHeader:
           let  headerView: SectionHeaderView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: SectionHeaderView.kReuseIdentifier, for: indexPath) as! SectionHeaderView
            return headerView
        default:
            return UICollectionReusableView()
        }
    }

iv)la Mention de la Hauteur de l'en-Tête Personnalisé Vue

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSize(width:collectionView.frame.size.width, height:30)
}

OriginalL'auteur Shrawan