web-dev-qa-db-fra.com

UICollectionView dans UIView

J'essaie d'implémenter une UICollectionView dans une UIView, mais je ne peux pas savoir comment le faire. Il y a beaucoup de tutoriels sur la façon d'utiliser UICollectionView avec une UICollectionViewController, mais pas comment en implémenter dans une vue normale. Comment faites-vous cela?

xcodeuiviewcontrollerios6uicollectionview
20
Matias Frank Jensen

1) Faites glisser un UICollectionViewdans votre UIViewet redimensionnez-le de manière appropriée.

2) Créez une propriété qui est également un IBOutletdans votre fichier .h pour la vue de collection:

@property (nonatomic, retain) IBOutlet UICollectionView *myCollectionView;

3) Encore une fois dans votre fichier .h, déclarez vos délégués, donc maintenant votre .h devrait ressembler à ceci:

@interface UtaQuickView : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate> {

}

@property (nonatomic, retain) IBOutlet UICollectionView *myCollectionView;

4) Connectez votre myCollectionViewIBOutletdans votre story-board.

5) (facultatif) Si vous ciblez un élément plus ancien que iOS6, synthétisez votre propriété myCollectionViewname__. Si vous ciblez iOS6, il le synthétisera automatiquement pour vous. Cela vaut pour toutes les propriétés, pas seulement UICollectionViewsname__. Donc, dans iOS6, vous n'avez pas besoin de @synthesize myCollectionView = _myCollectionView du tout. Vous pouvez simplement utiliser _mycollectionview partout où vous avez besoin d'accéder à la propriété. 

6) Dans votre fichier .mviewDidLoadname__, définissez votre delegateet dataSource.

_myCollectionView.delegate = self;
_myCollectionView.dataSource = self;

7) Implémentez les méthodes de source de données requises:

#pragma mark - UICollectionView DataSource 

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section 

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

À partir de là, vous pouvez mettre en œuvre autant de méthodes que vous le souhaitez, à savoir UICollectionViewDelegatename__. Cependant, 2 sont nécessaires selon la documentation: 

#pragma mark - UICollectionViewDelegate

- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath

- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath

Il est important de noter que vous pouvez remplacer <UICollectionViewDelegateFlowLayout> par <UICollectionViewDelegate> tout en ayant accès à toutes les méthodes de <UICollectionViewDelegate> car <UICollectionViewDelegateFlowLayout> est une sous-classe de <UICollectionViewDelegate>. 

Documentation sur le protocole UICollectionViewDataSource

Documentation sur le protocole UICollectionViewDelegate

34
jhilgert00

Et la version Swift

  1. Faites glisser un UICollectionView dans votre UIView et le dimensionner correctement.

  2. Modifier votre UIViewController pour étendre UICollectionViewDataSource et UICollectionViewDelegate

  3. Implémenter les fonctions requises

  4. Faites glisser votre scénario vers la classe pour créer un point de vente 'collectionView'.

  5. Dans viewDidLoad (), connectez le délégué et la source de données à collectionView.delegate = self et collectionView.dataSource = self

Cela devrait ressembler à ceci:

    class CustomerViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate
    {
        @IBOutlet weak var collectionView: UICollectionView!

        override func viewDidLoad() {
            collectionView.delegate = self
            collectionView.dataSource = self
        }

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

        }

        func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        } 

        func collectionView(collectionView: UICollectionView, didEndDisplayingCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {

        }

        func collectionView(collectionView: UICollectionView, didEndDisplayingSupplementaryView view: UICollectionReusableView, forElementOfKind elementKind: String, atIndexPath indexPath: NSIndexPath) {

        }
    }
3
Michael Hudson

Faites glisser un UICollectionView dans votre UIView et redimensionnez-le correctement. Créez une propriété qui est également un IBOutlet dans votre fichier .h pour la vue de collection:

@property (nonatomic, retain) IBOutlet UICollectionView *myCollectionView;

dans UIView, vous devez d'abord déclarer votre cellule UICollectionView dans -(void)awakeFromNib

[myCollectionView registerNib:[UINib nibWithNibName:@"nib file of collectionView cell" bundle:nil] forCellWithReuseIdentifier:@"identifier"];

puis

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    custom class *cell1=[collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath];
    return cell1;        
}
2
Hilaj
  1. Faites glisser uiviewcontroller sur le tableau de bord.
  2. Créer le nouveau fichier de classe pour le nouveau uiviewcontoller
  3. Définissez la classe nouvellement créée sur notre viewcontroller. Et ajoutez des méthodes de protocole au fichier .h. -UICollectionViewDelegate, UICollectionViewDataSource
  4. Faites glisser uicollectionview sur le contrôleur de vue. Par défaut, il y aura une cellule uicollectionview avec la collectionview.
  5. Créez une nouvelle classe pour la personnalisation de cellule en tant que sous-classe de uicollectionviewcell et définissez la classe sur la cellule dans l'inspecteur d'identité. Définissez également l'identificateur de réutilisation dans l'inspecteur d'attributs, le nom que vous devez spécifier pour identifier la cellule uicollectionview. Dis cellule ici.
  6. Glissez et déposez une image (à votre guise) à l'intérieur de la cellule uicollectionview, redimensionnez-la pour l'adapter.
  7. Définissez une image avec imageview (cette image sera affichée à plusieurs reprises avec collectionview).
  8. Définissez le délégué et la source de données avec uicollectionview sur le contrôleur de vue correspondant.

  9. Définissez les méthodes de source de données - numberOfItemsInSection et cellForItemAtIndexPath. 

  10. Renvoie le nombre de cellules requis avec la méthode numberOfItemsInSection. Dis 10 ici.

  11. Renvoie la cellule à afficher avec cellForItemAtIndexPath. 

    NSString *  identifier = @"cell";
CollectionViewCellForDay * cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
return cell;

A présent, vous devriez pouvoir visualiser une vue de la collection de 10 cellules :)

1
Tony