web-dev-qa-db-fra.com

Aligner les cellules de la vue de collection pour qu'elles tiennent exactement 3 par ligne

J'essaie de créer une collection d'images de manière à ce qu'il y en ait 3 par ligne, sans espacement.

Mes sources de données de vues de collection sont:

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

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return posts.count
}

et voici comment il est configuré dans mon storyboard (largeur d'imageView est 125, un tiers de la largeur d'écran 375):

 enter image description here

Cependant, lorsque je lance l'application et que j'ajoute des photos, cela ressemble à ceci:

 enter image description here

Comment puis-je résoudre ce problème afin que je voie 3 images par ligne? Merci pour toute aide!

iosswiftxcodeuicollectionview
6
KingTim

Vous devez mettre en œuvre le 

UICollectionViewDelegateFlowLayout

pour les trucs d'espacement.

Définissez la taille de la collectionViewCells comme suit:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let yourWidth = collectionView.bounds.width/3.0
    let yourHeight = yourWidth

    return CGSize(width: yourWidth, height: yourHeight)
}

Vous pouvez également ajouter ces fonctions pour obtenir un espacement correct de la collectionViewCells:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets.zero
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}
24
Kingalione

1- Vous devez vous conformer à UICollectionViewDelegateFlowLayout

2- Vous devez implémenter collectionView (_: layout: sizeForItemAt :) method, comme suit:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let screenWidth = UIScreen.main.bounds.width
    let scaleFactor = (screenWidth / 3) - 6

    return CGSize(width: scaleFactor, height: scaleFactor)
}

En supposant que les espaces minimum soient 8 - par exemple -,

 enter image description here

la sortie doit comporter trois éléments pour chaque ligne, taille carrée.

Remarque: Si vous souhaitez que les espaces entre les cellules soient nuls, alors scaleFactor devrait être:

let scaleFactor = (screenWidth / 3)

J'espère que cela a aidé.

3
Ahmad F

Swift - Version 4.2 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let noOfCellsInRow = 3

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout

    let totalSpace = flowLayout.sectionInset.left
        + flowLayout.sectionInset.right
        + (flowLayout.minimumInteritemSpacing * CGFloat(noOfCellsInRow - 1))

    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))

    return CGSize(width: size, height: size) 
}
0
Gagandeep Gambhir

Vous devez mettre en œuvre le

UICollectionViewDelegateFlowLayout Pour les commandes d'espacement.

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return  10
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "UpperCollectionViewCell", for: indexPath) as! UpperCollectionViewCell
    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    return CGSize(width: (self.collectionView.frame.width/3.0) - 5 , height: (self.collectionView.frame.height/4.0))
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return  2
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return  2
}
0
Deviyani Swami