web-dev-qa-db-fra.com

UICollectionView afficher 3 éléments par ligne

J'ai un UICollectionView créé à partir d'un storyboard,

Je veux avoir 3 éléments par ligne dans la vue. J'ai réussi à le faire en utilisant ce qui suit:

    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(collectionView.frame.size.width/3.6 , (collectionView.frame.size.height-100)/2);
}

Cependant, si j'ai 6 éléments, j'ai 2 rangées de 3 éléments chacune .

Est-il possible de les afficher sur 2 lignes, la première avec 3 éléments et la seconde en contient seulement 1?

iosobjective-cuicollectionviewuicollectionviewcelluicollectionviewlayout
7
Iphone User

ici, je l’ai fait, j’ai implémenté UICollectionViewDelegateFlowLayout sur UICollectionView, ajoutez la méthode suivante . ça marche, utilisez le.

- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    float cellWidth = screenWidth / 3.0; //Replace the divisor with the column count requirement. Make sure to have it in float.
    CGSize size = CGSizeMake(cellWidth, cellWidth);

    return size;
}

cette méthode fonctionne comme la largeur de l'écran divisée par 3.

9
Hiren Dhamecha
(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
  CGRect screenRect = [[UIScreen mainScreen] bounds];
  CGFloat screenWidth = screenRect.size.width;
  float cellWidth = screenWidth / 3.2; //Replace the divisor with the column count requirement. Make sure to have it in float.
  CGFloat screenHeight = screenRect.size.height;
  float cellHeight = screenHeight/3.0;


  CGSize size = CGSizeMake(cellWidth, cellHeight);


  return size;
}

Appliquez aussi le code ci-dessous - (viewWillTransitionToSize)

(void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [self.collectionView/*(that's my collection view name)*/ reloadData];
}

Ce code aidera à obtenir le même non. de cellules aussi bien en mode portrait qu'en mode paysage .. J'ai appliqué le code ci-dessus pour obtenir 3 cellules en mode portrait ainsi que 3 cellules en mode paysage.

2
Shashwat Tyagi
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(self.collectionView.bounds.size.width/3, self.collectionView.bounds.size.width/3);
}

La chose la plus importante à faire est également de vérifier la taille de la collection dans l’inspecteur de la taille. Régler l’espacement minimal des cellules et des lignes à 0

1
Vinayak Pal

essaye ça 

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(self.view.frame.size.width/3 -10 , (collectionView.frame.size.height-100)/2);
}
1
KKRocks

Vous devez d'abord calculer l'espace disponible pour le contenu, puis le diviser par le nombre d'éléments que vous souhaitez présenter par ligne.

Voici un exemple en supposant que la UICollectionView prend toute la largeur de l'écran

private let numberOfItemPerRow = 2

private let screenWidth = UIScreen.main.bounds.width
private let sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
private let minimumInteritemSpacing = CGFloat(10)
private let minimumLineSpacing = CGFloat(10)

// Calculate the item size based on the configuration above  
private var itemSize: CGSize {
    let interitemSpacesCount = numberOfItemPerRow - 1
    let interitemSpacingPerRow = minimumInteritemSpacing * CGFloat(interitemSpacesCount)
    let rowContentWidth = screenWidth - sectionInset.right - sectionInset.left - interitemSpacingPerRow

    let width = rowContentWidth / CGFloat(numberOfItemPerRow)
    let height = width // feel free to change the height to whatever you want 

    return CGSize(width: width, height: height)
}
0
Aladin